Web Developer Roadmap for 2021

Web Developer Roadmap for 2021

Featured on Hashnode
Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Summary

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 off with going through lots and lots of theory, much like you did in high school, but we never try and memorize this and it's 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 an 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 100 times until it makes sense.

The 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 becoming 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 favourite

Your first project

Create a landing page in Fimga, then recreate that in HTML & CSS.

Requirements:

  • Header with the top navigation bar
  • Hero section with image, heading and subheading
  • 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
  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 your 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
  2. 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
  3. Markdown Blog with NextJS, Contentful and Tailwind CSS

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

    8. Start with best practices - Study this

    9. Advance css - this is a paid course but I highly recommend
    10. Accessibility - Very important
    11. Advanced React - Go through this playlist
    12. Learn More Git and Github - Need to know this
    13. Learn Serverless - Growing in popularity
    14. GraphQL - Replacement for REST?
    15. Learn Webpack - Everyone uses bundlers these days
    16. GULP - Because who doesn't like automation
    17. JEST - Test-driven design is important
    18. 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 an employable web developer for 2021. If you found this helpful Share this article and tag me on Twitter @britzdm

 
Share this