Web development is a rising field, with thousands of new developers finding their start each year. However, with all the learning content out there, it can be hard to know where to start.
Today, we will take you through a complete guide to your web development journey, from basics to job interviews.
Here’s what we’ll cover today:
Make amazing web apps by learning HTML, CSS, and JS.
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.
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 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.
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!
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
<h4></h4>will make your text the smallest header size.
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.
<h4 style="color:Tomato;">Tomato Red</h4>
determines that the text “Tomato Red” should look like this:
For example, this chunk of code dictates that when the button “Click here” is pressed, the word “Bigger Font” changes to size 35px. Try it out!
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click here</button>
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.
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.
- 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
- Angular: good for Single-Page applications; not SEO friendly; based in TypeScript
See how React, Vue, and Angular compare for work in 2020, Angular vs Vue vs React: choosing the best framework in 2020
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
- 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 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.
Node.js is a popular open-source, server-side tool for fullstack and back-end developers.
Node.js is becoming more standardized even at enterprise-level organizations, so it’s a valuable tool to master.
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.
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
- 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
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.
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!
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.
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.
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!
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.
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.
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 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 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 start-up job boards:
- Startupers: specific to bay area
- Angel: speak directly with founders
- Hired: only offers vetted start-ups
Starting your web dev career is scary and but exciting. Luckily, there are tons of resources available to you where you can keep learning and seek advice.
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.
Learn Web Development From Scratch: this course gently guides you into the world of web dev through hands-on practice, text-based instruction, and interactive playgrounds.
Web Development: A Primer: familiarize yourself with the basic terms before getting hands-on with a project
Join a community of 1.7 million readers. Enjoy a FREE, weekly newsletter rounding up Educative's most popular learning resources, coding tips, and career advice.