DEV Community

loading...
Cover image for Web Developer Roadmap for 2021

Web Developer Roadmap for 2021

britzdylan profile image Dylan Britz ・6 min read

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 Developement?

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 Fimga, 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
  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
  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 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!

    1. Start with best practices - Study this
    2. Advance css - this is a paid course but I highly reccomend
    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

Discussion (9)

pic
Editor guide
Collapse
bookercodes profile image
Alex Booker • Edited

Hey, I love it when I'm reading a post and stumble upon a Scrimba resource link (in this case, Gary Simon's course on UI Design).

We have many free courses, but the emphasis of your post (which I totally agree with) is to gleam the basics then practice, practice, practice.

For anyone reading, here are 4 free courses that take you though the process of building a project from start to finish:

Collapse
mdmk7 profile image
M.Makki

Hello Dylan! Great article, absolute beginner here. I was following somewhat a similar pattern but you have given me an extensive pathway. I was relying on freecodecamp for the fundamentals part, just finished the HTML and was about to start the CSS part before seeing your article. I was planning to stick with it up to the Js algorithms and data structure which you referenced in the article as well.

My question is, does the w3schools stack up better in comparison with freecodecamp for the fundamentals part? not necessarily comparing the two websites but just the content on the given topic of the HTML & CSS, I want to avoid having to switch between website before i'm done with a given target. Your insight would truly help.

Collapse
durkhaima profile image
durkhaima

not sure if this helps but w3schools is more like a quick overview with some examples to try. It is not a comprehensive discussion nor examples that can fully explore the ability of a concept. They are great to start with but you will need a few exercises with markup and css to truly begin.

Collapse
mdmk7 profile image
M.Makki

Thank you, I appreciate your input, it defiantly helps. I have personally found MDN to give a more comprehensive overview of the markup and CSS and been using it ever since. Truth to what you said, I just need more practical exercises to have a solid grasp of the concepts. I'm looking forward to the certification projects to get practical with it.

Collapse
britzdylan profile image
Dylan Britz Author

w3schools I recommend because it short easy digestible and not overly complicated. it won't make you an HTML or css pro but its a start. Always remember Practice makes Perfect!

Collapse
mdmk7 profile image
M.Makki

Thank you Dylan, your article has been very helpful! I'll keep that last line on my mind, daily practice is the key!

Thread Thread
britzdylan profile image
Collapse
sanlouise1042 profile image
Sandra Cooper

Thank you. Much needed roadmap

Collapse
davidmitchell777 profile image
davidmitchell777

Thank you so much, for the tech-related job approach, which I just read through axisbits.com/blog/The-Roadmap-for-.... It's very inspiring!