frontend web development roadmap, learn

Table of Contents

How to Learn Frontend Web development✨?

Three years before I was also asking this same question – How to learn Frontend web-development? Which topics to learn? From Where to learn? I was also facing the same issues which you are facing

So, I made this post which covers all the essential questions regarding frontend web development and good resources(Both Paid & Free) to learn from, so that you can reach your goal of becoming a frontend web developer with ease.

frontend webdevelopment

Let’s quickly see what topics we will cover❀️?

  • Basics of internet
  • HTML & CSS
  • Javascript
  • Tooling(frontend)
  • PWA
  • Web Security
  • Type Checkers
  • Learn State Management
  • SSR
  • GraphQL
  • Static Site Generation and JamStack

Now let’s start without wasting any time.And also you canΒ Download the complete roadmap and checklist PDF

Basics of Internet

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 1 » Csspoint101

Topic 1: How does the internet work?

Mozilla Article on How does internet works β€“ https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work

Topic 2: What is www?

Article by java point on What is www β€“ https://www.javatpoint.com/what-is-world-wide-web

Topic 3: What is a browser and how it works?

Article by freecodecamp on What is Browser β€“ https://www.freecodecamp.org/news/web-application-security-understanding-the-browser-5305ed2f1dac/

Article by Mozilla on What is Browser β€“ https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/

Topic 4: What is HTTPS, domain, and hosting?

Article by wpbeginner on What is the Domain name β€“ https://www.wpbeginner.com/beginners-guide/beginners-guide-what-is-a-domain-name-and-how-do-domains-work/

Bonus Topic: Learn about what is DNS and how it works?

HTML & CSS

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 10 » Csspoint101

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 11 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 12 » Csspoint101

Chapter 1: Basics of HTML

Article by W3school on Basics of HTML β€“https://www.w3schools.com/html/html_basic.asp

Article by Html.com on Complete Html β€“https://html.com/

Chapter 2: HTML Forms/Semantics/Media

Article by W3school on Basics of Media Tags β€“https://www.w3schools.com/tags/att_media.asp

Article by W3school on Html Semantic Elements β€“https://www.w3schools.com/html/html5_semantic_elements.asp

Chapter 3: Css Basics- syntax, specificity,selectors, properties

Article by W3school on CSS Selectors β€“https://www.w3schools.com/css/css_selectors.asp

Article by tutsplus on 30 CSS Selectors β€“https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

Article by Zellwk on Important CSS properties β€“https://zellwk.com/blog/9-important-css-properties-you-must-know/

Chapter 4: CSS Box Model

Article by CSS-tricks on Box Model β€“https://css-tricks.com/the-css-box-model/

Chapter 5: Css Layouts- Display & Positioning

Article by CSS-tricks on Display Properties β€“https://css-tricks.com/almanac/properties/d/display/

Article by CSS-tricks on CSS Position β€“ https://css-tricks.com/almanac/properties/p/position/

Chapter 6: CSS Flexbox

Complete Free Flexbox Video Course By WesBos β€“ https://flexbox.io/

Article by CSS-tricks on CSS FLexbox β€“ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A game that Teaches Flexbox β€“ https://flexboxfroggy.com/

Chapter 7: CSS Grid

Complete Free CSS Grid Video Course By WesBos β€“ https://cssgrid.io/

A site that teaches you CSS Grid with examples β€“ https://learncssgrid.com/

Chapter 5: Responsive Web Design

Chapter 6: Learn any CSS preprocessor – sass

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 24 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 25 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 25 » Csspoint101

Chapter 7: Pick up any CSS framework- Bootstrap, Tailwind, etc.

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 31 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 32 » Csspoint101

Documentation of Bootstrap – https://getbootstrap.com/docs/5.0/getting-started/introduction/

Documentation of Tailwind – https://tailwind.com/docs

Chapter 8: Hosting your static site: Netlify or Github,etc

Article on How to host static website by Csspoint101.com β€“ https://csspoint101.com/4-best-ways-to-host-website-for-free/

Bonus Chapters: CSS transitions/Animations

Frontend Project Time

A site on Frontend Projects: https://www.frontendmentor.io/

Javascript

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 42 » Csspoint101

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 43 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 44 » Csspoint101

Chapter 1: Basics of Javascript

Chapter 2: Learn about DOM

Article by W3school on Javascript DOM β€“ https://www.w3schools.com/js/js_htmldom.asp

Chapter 3: Learn about OOP Concept

Chapter 4: Other very important topics-Closures, scope, Hoisting, event bubbling, Event loop, shadow DOM, etc

Article by Bitsofco on Shadow DOM β€“https://bitsofco.de/what-is-the-shadow-dom/

Chapter 5: Learn Async Javascript(Complete)

Chapter 6: Learn ES6 Javascript topics

Chapter 7: Learn about weird parts of javascript

Article by codeburst.io on Weird part of Javascript β€“ https://codeburst.io/javascript-understanding-the-weird-parts-d1d0e7061ebf

Chapter 8: Higher-order functions

Chapter 9: Learn About ES Module system- Import/export

Chapter 10: Learn more about Browser Apis like- Canvas, storage, Video & Audio, etc

Chapter 11: What is version control? and Basics of Git

Article on Introduction to Git –https://www.notion.so/Introduction-to-Git-ac396a0697704709a12b6a0e545db049

Article By Simplilearn on Git vs Github β€“ https://www.simplilearn.com/tutorials/git-tutorial/git-vs-github

Chapter 12: Javascript Practise

A Video course which gives 30 js Project in 30 days – https://javascript30.com/

2500+ Javascript Logical Questions For Practicing – https://edabit.com/challenges/javascript

Bonus Chapters & Resources: Learn GSAP, Learn D3.js, Projects to do in JS, Design for developers, Developer Resources, etc

Complete video course on design for developers by Designcode- https://designcode.io/ui-design-for-developers

Project ideas by smartcoder – https://thesmartcoder.dev/9-awesome-projects-you-can-build-with-vanilla-javascript/

Category: Tooling(frontend)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 75 » Csspoint101

Topic 1:Module Bundlers

Topic 2: Linters and Formatters

Topic 3: Learn about package managers(npm or yarn)

Picking Up JS Framework

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 81 » Csspoint101

Route 1: React.js (Resources)

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 82 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 83 » Csspoint101

Route 2: Vue.js(Resources)

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 84 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 85 » Csspoint101

Route 3: Angular.js (Resources)

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 88 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 89 » Csspoint101

Progressive Web App

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 90 » Csspoint101

PWA Full Course

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 94 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 95 » Csspoint101

Web Security

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 96 » Csspoint101

Article by Cisco on different types of attacks- https://www.cisco.com/c/en_in/products/security/common-cyberattacks.html

Type Checkers

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 101 » Csspoint101

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 102 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 103 » Csspoint101

Learn typescript(Resources)

Learn State Management

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 106 » Csspoint101

Article on What and Why State Management on dev.tohttps://dev.to/abdurrkhalid333/what-is-state-management-and-why-you-should-learn-it-3kai

React Route: Learn Redux(Resources)

Vue Route: Learn VueX(Resources)

Angular Route: Learn NgRx or RxJs(Resources)

Server-Side Rendering

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 110 » Csspoint101

Article on What is SSR – https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/

React Route: Learn Next.js(Resources)

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 112 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 113 » Csspoint101

Complete Free Video Course on Next.js- https://masteringnextjs.com/

Vue Route: Learn Nuxt.js(Resources)

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 118 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 119 » Csspoint101

Angular Route: Learn Universal(Resources)

  GraphQL

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 123 » Csspoint101

Topic 1: Learn GraphQL(Resources)

Topic 2: Learn Apollo for more power(Resources)

Static Site Generation and JamStack

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 132 » Csspoint101

Article on What is Headless CMS- https://www.storyblok.com/tp/headless-cms-explained

React Route: Learn Gatsby.js or Next.js(Resources)

Paid Alternative

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 134 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 112 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 113 » Csspoint101

Vue Route: Learn Nuxt.js or Gridsome(Resources)

Paid Alternative(Udemy Course)

How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 140 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 141 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 118 » Csspoint101
How to Learn Frontend Web-Development?πŸ”₯(Complete Roadmap) 119 » Csspoint101

Angular Route: Learn Scully(Resources)

Thanks For Reading this article. If you liked this resource do share it with others❀️