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.

1. Part One is Getting familiar with the fundamentals and the most important of all parts. - 3 Months
2. Part Two is all about boot camps and projects, probably the most fun part - 1 month
3. 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

1. How it works [ watch, only terminology section is required ]
2. What is http [read]
3. DNS and how it works [watch]
4. Basic Hosting [watch]
5. 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!

1. HTML Tutorial - Work through everything.
2. CSS Tutorial - Work through everything.
3. 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.

1. Design for non designer - Just watch this
2. Design Fundamentals - just watch
3. Principles of design - just watch and take note
4. Typography - very important
5. Color - important
6. Spacing - Know this
7. Contrast - Important
8. UI Design - complete the entire course
9. 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

1. Intro to programming - watch
2. Programming in Javascript - watch only
3. JavaScript Algorithm and Data Structures FCC Certification - Complete this course
4. 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

• The Complete Web Developer in 2020: Zero to Mastery
• The Web Developer Bootcamp 2020

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

1. 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

1. 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

1. Markdown Blog with NextJS, Contentful and Tailwind CSS

• Home page with latest articles
• View articles by category

1. View a single article
2. View Article by author
3. Us contentful cms to create and manage all of your posts
4. Deploy the blog on vercel
5. 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!

1. Start with best practices - Study this
2. Advance css - this is a paid course but I highly recommend
3. Accessibility - Very important
4. Advanced React - Go through this playlist
5. Learn More Git and Github - Need to know this
6. Learn Serverless - Growing in popularity
7. GraphQL - Replacement for REST?
8. Learn Webpack - Everyone uses bundlers these days
9. GULP - Because who doesn't like automation
10. JEST - Test driven design is important
11. 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