Originally posted on Educative.io

Do you want to become a web developer but don’t know where to start? You’re in the right place! Today, we will take you through a complete guide to your web development journey. If you want to skip the reading and get right into web development you can visit this great free course, Learn web development from scratch: Go beyond the syntax.

Here’s what we’ll cover today:

• Part One: The basics of web development skills and tools

• Part Two: A guide to web development jobs

• Part Three: Resources for practice and help

Let’s jump right in!

Are you completely new to web development? No worries! We recommend checking out our Web Developer FAQ before you keep reading!

Part One: The Basics of Web Development

What skills do I need as a web developer?

Anyone can become a web developer. You don’t need a fancy degree in computer science to master the skills, but before you can start looking for jobs in the field, there are a few things you will need to learn.

1. The basics of how the Internet and websites work
2. The basics of HTML, CSS, and JavaScript
3. Libraries and frameworks, like jQuery, React.js, and Bootstrap
4. Other programming languages, like Python and Ruby (for back-end web devs only)
5. Git and GitHub

Don’t let this overwhelm you. All of these skills naturally build off of each other, so it’s important to learn slowly and take it step-by-step as you develop a solid foundation.

Alright, now you know what’s ahead of you. Let’s start learning!

The Foundational Stuff

The Internet is comprised of three interacting features.

• Websites: a collection of files and information that we access through a computer and a server

• Servers: the computers that store all the data of websites in a massive network

• Browsers: the programs that load and display content on your computer

Every website is comprised of the frontend (client side) and the backend (server side). The frontend includes everything that the user will directly see and experience when they visit a website. The backend is the behind the scenes where information is stored, sent, and received.

Everything you see on a website, like the one you’re looking at now, is made up of HTML, CSS, and Javascript files. These are the most foundational tools that you need as a web developer. They are the languages you use to actually create your webpages. So, let’s learn what they do!

What is HTML?

HTML (HyperText Markup Language) is the basic programming language for web development. It provides the basic structure of a site such as words, titles, and paragraphs. HTML consists of a bunch of established tags, which represent different functions that then “translate” into readable information on the screen. These tags are written between angle brackets.

For example, the text surrounded by the <b> </b> will be bold. The tag <h6> </h6> will make your text the smallest header size.

What is CSS?

CSS (Cascading Style Sheets) is a style sheet that essentially describes how HTML elements will appear on a webpage. You use CSS to control the presentation, style, and formatting of your site, like RGB values, border colors, background images, and more. CSS files declare a set of rules, that define a set of properties and their values.

For example:

<h4 style="color:Tomato;">Tomato Red</h4>

determines that the text “Tomato Red” will appear in the color "Tomato".

What is JavaScript?

JavaScript is how you control the behavior of your webpage. If you’re serious about web development, you’ll need to start to learn the basics of JavaScript. It is one of the most popular and pervasive programming languages in the world, with a low entry barrier and offers immediate results based on the success of your code. JavaScript makes websites interactive by manipulating your various HTML and CSS features. With JavaScript, a user can click on a button, scroll to the bottom of a page, or display photos in a moving carousel.

For example, this chunk of code dictates that when the button “Click here” is pressed, the word “Bigger Font” changes to size 35px.

<button type="button" 
onclick="document.getElementById('demo').style.fontSize='35px'">Click here</button>

Get started with HTML, CSS, and JavaScript for free with Learn web development from scratch: Go beyond the syntax.

The Technology Stack

Alright, so now we understand the basics of HTML, CSS, and JavaScript. Next, we need to tackle frameworks and libraries, which are part of the technology stack. A tech stack is the combination of software, applications, programming languages, and tools that all build on top of each other to make your website. Companies and web developers will use different tech stacks based on their unique needs and goals.

So, what are frameworks and libraries, and why do we need them? While you can technically make a webpage without these tools, you won’t make it very far as a web developer without them.

What are frameworks?

You could build a webpage completely from scratch, but it takes a lot of time, especially when you want to add more complexity. That’s where JavaScript frameworks come in handy. A framework is like a prepackaged structure of pre-written code for your website that determines how programs should interact.

Say you wanted to build a car. Instead of starting entirely from scratch, you can buy a vehicle frame to save time and guarantee you’ll build something that will actually drive. A framework in web development is similar. It offers built-in programs, plug-ins, and tools that you install into your website files. Frameworks speed up your development process, and they are made by other developers, so you know the code is pre-tested and effective.

There are backend and frontend frameworks that use different programming languages. Let’s look at a few notable ones to get you started.

Backend frameworks

• Express JS: used by IBM and Uber; minimalist design; harder for beginners
• Django: used by Google, Instagram; tons of built-in features; based on Python
• Spring Boot: easy to use; good for large scale cloud projects; based on Java
• Ruby on Rails: used by SoundCloud; good for small projects; based on Ruby
• Flask: used by Lyft; easy to set up; based on Python

Frontend frameworks

• Ember: used by Netflix, LinkedIn; good for mobile apps; based in JavaScript
• React: easy DOM manipulation; easy to learn; based in JavaScript
• Backbone: lightweight; helps with code organization; based in JavaScript
• Vue: progressive frameworks; easy to understand; based in JavaScript
• Angular: good for Single-Page applications; not SEO friendly; based in TypeScript

What are libraries?

A library is a collection of specific tools and features that you can add to your website for functionality. Unlike a framework, a library does not offer any structure but rather implements different behaviors and actions on your webpage.

Let’s return to our car analogy. If the framework is the frame of the car, the libraries are the features and parts you add to the car to tailor it to your needs, like the tires, air conditioner, or steering wheel.

There are tons of different libraries that each have diverse purposes. Let’s take a look at a few to get a sense of what they can do.

• jQuery: for manipulating HTML, DOM, and CSS
• React.js: for creating interactive UIs
• Chart.js: for making charts using JavaScript
• Wow.js: for showing animations as you scroll
• Scrolline.js: for showing how far you’ve scrolled on a page

jQuery and React.js are probably the most important libraries for you to learn at this time. They are very popular and have hundreds of unique features to make some really cool stuff.

What is Node.js

Node.js is a popular open-source, server-side tool for fullstack and back-end developers. Node is a run-time environment used for executing your web programs. It’s very useful for building network applications. It also comes packed with a library of JavaScript modules to simplify your web application process. Node.js is becoming more standardized even at enterprise-level organizations, so it’s a valuable tool to master.

What other tools do I need to become a web developer?

Having the right tools before you get started will prepare you to learn faster and more efficiently. Fortunately, you can get started with just three basic things: a browser, a text editor, and a version control system.

Web browsers

This is where you will test your code. A good web developer should be comfortable using many different kinds of browsers, but as you’re getting started, it’s fine to stick with one until you feel more comfortable. The most common browsers used by web developers are outlined below. This list is not exhaustive, so you will see several others as you research and learn.

• Mozilla Firefox: open-source, native on all platforms, lots of updates
• Google Chrome: DevTools, easy to troubleshoot JavaScript, uses a lot of memory
• Edge: integrated with Windows, cons similar to IE
• Brave: focused on performance, secure, poor plug-in support
• Safari: great dev tools, not integrated with Windows
• Opera: free VPS service, cons similar to IE

Text editors

This is where you will write your code. There are many different options for text editors. You computer likely comes with a built-in one, but we recommend a more robust option. The most commonly used text editors by web developers are:

• Atom: open-source, cross-platform, created by GitHub, known for its speed (free)
• Sublime Text: cross-platform, known for its plugins and shortcuts ($70)
• VS Code: open-source, created by Microsoft, interactive debugger (free)
• Brackets: open-source, made by Adobe, live preview feature (free)

Unlike browsers, most web developers stick with the same text editor. Explore your different options to see which one is most comfortable for you. The more you use it, the more muscle memory you will build.

Content management system (CMS)

A Content Management System is a software used to facilitate editing, creating, and publishing your work. A CMS gives you control over your content by integrating all of the features of your site into an accessible platform. Many of these help with both content management, marketing, and content delivery.

A CMS typically uses a database (such as MySQL and MariaDB), which stores a collection of programs and tools in a particular programming language. That way, you can edit and manage your website without needing to return to the minute details of your code.

Choosing a CMS depends on a lot of different factors, like your users, the size of your team, and the ease of the interface. A good CMS for beginners is WordPress. It’s a free, open source hosting service for building and publishing websites. It’s very popular for bloggers and has a low entry barrier for beginners. With a huge community of support, you’re likely to find answers to your questions as they come up.

Some other notable CMS softwares are Drupal, Typo3, and Joomla!

Part Two: A Guide to Web Dev Jobs

What jobs are there for web developers?

Once you feel confident in your web dev skills, it’s time to actually start looking for work and apply your skills to the real-world. Where do you begin? What are the options for you? Let’s look at three things you’ll need to consider as you figure out the job that is best for you.

Step1: Determine what kind of web dev you want to specialize as

The first step to looking for work is to determine what kind of web developer you want to be. There are three different categories of web developer jobs to consider: frontend, backend, and full stack. You might not know yet which is a better fit for you, and that’s fine! The more you practice and explore, the clearer that will become.

Frontend Web Developers work on the layout and visuals of a website and use languages like HTML, CSS, and JavaScript. They work with web design and user experience. This kind of web dev is good for someone who likes fine-tuning details. The salary for a front-end web developer generally ranges from US$45k-$75k.

Backend Web Developers work on the frameworks of a website that fetch and display data. They use languages like Java, Python, and Ruby on top of HTML, CSS, and JavaScript. This kind of web dev is good for someone who cares more about functionality than design. The salary for a back-end web developer generally ranges from US$55k-85k.

Full Stack Web Developers deal with both sides of web development. The salary for a full stack developer generally ranges from US$60k-110k. Learn more about becoming a Full Stack Web Developer here!

Step 2: Determine what work environment is best for you

Before jumping into a career, you should consider the different work environments available to a web developer. You could work freelance, find a full-time job with a big company, join a start-up, or even go into teaching. Think about which environment is best for your life situation. This will determine how you market yourself, how you design your portfolio, and where you look for job postings.

Step 3: Start building a portfolio of your awesome projects and skills

A killer web developer portfolio is critical for getting jobs in the field. This is the website where you showcase all your hard-earned skills, beautiful designs, and best web projects. We know you’re just starting out, so don’t let this step overwhelm you. As you learn more and practice, you’ll start to compile pretty much everything you need for a portfolio. Your portfolio can even showcase your early work and your practice projects!

There are a lot of hosting websites where you can publish your portfolios. Here are three great options for those of you starting out. Go check out them out and get some inspiration from other web developers: Github Pages, Repl, Carbonmade, Krop.

Where do I find job postings?

Now that you know what kinds of jobs are out there, you need to know where to find them. There are a lot of resources for job searching that range from general to specialized.

Important note: One of the best ways to learn about job openings is through the Web Dev community. Networking is a key way to learn about jobs and see what kind of work excites you. Don’t be afraid to go to meetups, conferences, and job workshops.

For general job boards:
Glassdoor, Indeed, and LinkedIn are great places to start for a general, sweeping search of web development jobs.

For remote / freelance job boards:

• Upwork: tailor postings to your needs
• Just Remote: specific to tech jobs
• JobsPresso: diverse job options
• FlexJobs: features on major media outlets

For tech specific job boards:

• Mashable Job Board: can search by company
• Smashing Jobs: minimalist interface
• Krop: tailored to web designers
• GitHub Jobs: large community of users

For start-up job boards:

• Startupers: specific to bay area
• Angel: speak directly with founders
• Hired: only offers vetted start-ups

Part Three: The Resources

Where can I learn more about web dev?

Starting something new is scary and exciting. Luckily, there are tons of resources available to you where you can keep learning and seek advice. We’ve compiled a list of the most important resources, forums, and newsletters to get you started.

• Awwwards.com: Check out the work of other web developers for inspiration.

• Codrops: A blog for web developers focused on the latest trends, tutorials, and design tips.

• Codepen: A platform to build and test code

• CSS Tricks: Get daily articles on topics relating to CSS, HTML, and JavaScript.

• Designer Hangout: The most active community for UX designers

• DZone: An online hub for tutorials and tools for web dev beginners

• EdPresso: Educative’s online dictionary for quick answers to common questions organized. These are organized by tags and have useful visualizations to help you learn quickly.

• GitHub / StackOverflow: Open-access forums and discussion boards where a global community of programmers and developers share code, answer questions, and give feedback on projects.

• Meetup: A search engine for local events that you can browse by category

• Smashing Magazine: An international blog and thriving community of web developers who talk about books, webinars, web dev discounts, and more.

• Webdevforums: A forum where you can get feedback on your projects and ask questions relating to SEO

• Webdeveloper Forum: A general forum for questions relating to web development and program that is organized by frontend and back end questions.

• Whatis.com: A free, online dictionary for terms relating to coding and web development.

Conclusion

You’ve made it this far! Bravo! You’re ready to begin your web dev journey. So, where do you start?

Working with experts, we’ve put together an easy-to-use roadmap course for everything you need to know to get started. Our free Learn Web Development From Scratch course cuts through the muck and gently guides you into the world of web dev through hands-on practice, text-based instruction, and interactive playgrounds.

The first three lessons familiarize you with web dev fundamentals and give you hands-on practice with this new language.

The course then dives deeper into the programming interface and teaches you how to modify the language you now know how to write. By the time you complete the course, you’ll be able to apply your knowledge and develop fully functional web modules, such as an image carousel and a to-do list application.

This course is also part of one of our carefully designed learning tracks. Once you complete the lesson, you’ll automatically know what to learn next with a simple click!

We know that being a beginner is already hard, so we believe that taking the first step shouldn’t come at any extra cost or stress to you. That’s why we’ve made our Learn Web Development from Scratch course completely free! You’ll get lifetime access to the course without any sneaky subscription fees. You could even start learning right now!