Welcome to the web developer roadmap for 2021, I made this roadmap with one purpose in mind to show you the final preview of a 10 000 piece puzzle.

Introduction

Welcome to the web developer roadmap for 2021, Why did I make this roadmap? Well, think of this the final preview of a 10 000 piece puzzle on the box. In my journey to become a Web developer, I realized it sometimes felt like I was building a puzzle without knowing what the final piece should look like. So I did the research for you I simple got together everything you need to know to become a successful web developer in 2021 in as little as 8 months!

What is Web Development?

Web development is simply the process of building software that runs on a separate computer somewhere else in the world and all you get is the final result of millions of lines of code compiling and sending something back to you. Simple right?

How to approach learning web development.

My method of learning goes something like this, We first start of with going through lots and lots of theory, much like you did in high school, but we never try and memorize this and its only for getting a quick overview and understanding of what we are dealing with.

Then we move straight into taking a Bootcamp or online course to learn about web development. This will help you solidify your understanding of certain topics and see someone experienced working with it.

Third we go back to theory, because at this stage you should have a understanding of the basics and a general overview of everything you need to know. although this time we are going to study the theory, yes memorize it and explain to yourself a 100 times until it makes sense.

Fourth step is to start building your own projects or experimenting without the help of anyone or anything.

This is only my way of sharing how I learnt web development and its not the only way to do it but it sure did help me.

The 8 Month Roadmap to become a web developer

This roadmap is broken into 3 parts.

Part One is Getting familiar with the fundamentals and the most important of all parts. - 3 Months
Part Two is all about boot camps and projects, probably the most fun part - 1 month
Part Three we will look at frameworks and some less unfamiliar topics in web development, this one is the longest - 4 months

So there you have it you can get going down below, it will be hard, you will get frustrated, but only the strong survive!

Part One - 3 Months

How the web works - Brief over this, only make sure you understand this topic Here we are learning how the web works and how it started, this is a must for every type of developer

How it works [ watch, only terminology section is required ]
What is http [read]
DNS and how it works [watch]
Basic Hosting [watch]
Browsers and how they work [watch]

HTML & CSS - The Root of web development

HTML And CSS are in every single web project you will work on, this is your foundation and this is one topic you should master!

HTML Tutorial - Work through everything.
CSS Tutorial - Work through everything.
HTML Semantics - you went through this but go through it again

Web & UI Design

Design plays an important part of the web, there are people whose jobs are to make sure a website design is good, accessible and usable. No need to become a designer but good UI Skills for front end developers is in high demand.

Design for non designer - Just watch this
Design Fundamentals - just watch
Principles of design - just watch and take note
Typography - very important
Color - important
Spacing - Know this
Contrast - Important
UI Design - complete the entire course
Learn Figma - some tutorials might have been using adobe xd, but Figma is my personal favorite

Your first project

*Create a landing page in Figma, then recreate that in html & CSS. *

Requirements:

Header with top navigation bar
Hero section with image , heading and sub heading
Benefits section - list 3 benefits with some description of each
call to action to collect emails
footer with common footer elements
must be responsive
Create your own colour pallet
Choose one font for the page
use placeholder content

How to get better at UI Design

One strategy to get better at UI design is to find great examples form other creators and recreate their project and try and determine why they made the design choices they did, another strategy is to find bad designs and make it better based on all the UI Design best practices and principles.

Introduction to programming

Intro to programming - watch
Programming in Javascript - watch only
JavaScript Algorithm and Data Structures FCC Certification - Complete this course
You Don't Know JavaScript - Read through the book once, don't take notes

What Is

Head over to YouTube and search 'What is [insert topic here]' get the topic from the list below watch one video on each topic

Topics

JQUERY
CSSOM
BOOTSTRAP
TAILWIND CSS
JSON
VSCODE
REACT

Part Two - 1 month

Do an online boot camp. Choose one of these 2 and complete the entire boot camp

Next Step is to test and improve you problem solving skills by building 3 projects on your own.

HTML,CSS & Vanilla JS - find a corporate/business website and recreate it

Minimum of 5 pages
add your custom animations
improve UI where possible
Grab all the content from the page and add it to your design, do not link anything directly to the real site, download everything and structure your folders appropriately
Must be responsive

React Weather App using the Open Weather API & Material UI

Build a SPA with react
The Style of the SPA needs to change depending on the time of day of the user
Must be able to search for weather in any city

Markdown Blog with NextJS, Contentful and Tailwind CSS

Home page with latest articles
View articles by category

View a single article
View Article by author
Us contentful cms to create and manage all of your posts
Deploy the blog on vercel
Get a lighthouse score of at least 90

Part Three

__ JavaScript best practices__

Part three is very crucial and covers a lot of topics that will take you to the next level. Pay attention and make sure you do the work!

Start with best practices - Study this
Advance css - this is a paid course but I highly recommend
Accessibility - Very important
Advanced React - Go through this playlist
Learn More Git and Github - Need to know this
Learn Serverless - Growing in popularity
GraphQL - Replacement for REST?
Learn Webpack - Everyone uses bundlers these days
GULP - Because who doesn't like automation
JEST - Test driven design is important
Website optimization - Because we love fast website

Thank you for working through this roadmap, I hope I gave you some great insight into what you need to become a employable web developer for 2021. If you found this helpful share this article and tag me on twitter @britzdm