How to Learn Frontend Web-Development?🔥(Complete Roadmap)
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.
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
Download PDF
Basics of Internet
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
Paid Alternative(Udemy Course)
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)
Chapter 7: Pick up any CSS framework- Bootstrap, Tailwind, etc.
Paid Alternative(Udemy Course)
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
Paid Alternative(Udemy Course)
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)
Topic 1:Module Bundlers
Topic 2: Linters and Formatters
Topic 3: Learn about package managers(npm or yarn)
Picking Up JS Framework
Route 1: React.js (Resources)
Paid Alternative(Udemy Course)
Route 2: Vue.js(Resources)
Paid Alternative(Udemy Course)
Route 3: Angular.js (Resources)
Paid Alternative(Udemy Course)
Progressive Web App
PWA Full Course
Web Security
Article by Cisco on different types of attacks- https://www.cisco.com/c/en_in/products/security/common-cyberattacks.html
Type Checkers
Paid Alternative(Udemy Course)
Learn typescript(Resources)
Learn State Management
Article on What and Why State Management on dev.to — https://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
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)
Complete Free Video Course on Next.js- https://masteringnextjs.com/
Vue Route: Learn Nuxt.js(Resources)
Paid Alternative(Udemy Course)
Angular Route: Learn Universal(Resources)
GraphQL
Topic 1: Learn GraphQL(Resources)
Topic 2: Learn Apollo for more power(Resources)
Static Site Generation and JamStack
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
Vue Route: Learn Nuxt.js or Gridsome(Resources)
Paid Alternative(Udemy Course)
Angular Route: Learn Scully(Resources)
Thanks For Reading this article. If you liked this resource do share it with others❤️
