Education
Technology
programming
Internet
Programming Languages
Web Development
Testing
Web Security
DNS
Frontend Development
Domain Name
Version Control
HTTP
Browsers
Hosting
Server Side Rendering
There are a lot of languages, frameworks and libraries such as java, python, javascript which easily confuses a beginner as where to start?
Having a structured approach can leverage your learning by a lot, so follow this path β
Most detailed frontend web developer roadmapπ§΅
Having a structured approach can leverage your learning by a lot, so follow this path β
Most detailed frontend web developer roadmapπ§΅
Topics to learn
β’ Internet
β’ HTML
β’ CSS
β’ JavaScript
β’ Framework (React/ Angular/ Vue)
β’ CSS Framework
β’ Version Control
β’ Web Security
β’ Module Bundlers
β’ Web components
β’ Server Side Rendering
β’ Testing your Apps
β’ WASM
β’ Static Site Generators
β’ PWAs (Optional)
β’ Internet
β’ HTML
β’ CSS
β’ JavaScript
β’ Framework (React/ Angular/ Vue)
β’ CSS Framework
β’ Version Control
β’ Web Security
β’ Module Bundlers
β’ Web components
β’ Server Side Rendering
β’ Testing your Apps
β’ WASM
β’ Static Site Generators
β’ PWAs (Optional)
Internet
- How the internet works?
- DNS and how it works?
- What is HTTP?
- What is Domain Name?
- Browsers and how they work?
- What is hosting?
A basic understanding of the above topics is crucial as it can help you to have a better understanding of future concepts!
- How the internet works?
- DNS and how it works?
- What is HTTP?
- What is Domain Name?
- Browsers and how they work?
- What is hosting?
A basic understanding of the above topics is crucial as it can help you to have a better understanding of future concepts!
HTML
- Learn the basics
- Writing Semantic HTML
- Forms and Validations
- SEO Basics, Accessibility (anytime in future)
Html is the backbone of the web and you can't make webpages without it, so don't skip any of these topics as it might confuse you for future topics
- Learn the basics
- Writing Semantic HTML
- Forms and Validations
- SEO Basics, Accessibility (anytime in future)
Html is the backbone of the web and you can't make webpages without it, so don't skip any of these topics as it might confuse you for future topics
CSS
- Learn the basics
- Conventions
- Responsive design, Media Queries
- Positioning
- Floats
- Display
- Box Model
- CSS Grid
- Flex
CSS turns plain old web pages into fancier ones, it is basically a styling language and the syntax might feel weird at first
- Learn the basics
- Conventions
- Responsive design, Media Queries
- Positioning
- Floats
- Display
- Box Model
- CSS Grid
- Flex
CSS turns plain old web pages into fancier ones, it is basically a styling language and the syntax might feel weird at first
Javascript
- Syntax
- Strings, arrays, objects
- DOM Manipulation
- Learn Fetch API / Ajax
- ES6+ and modular JavaScript
- Hoisting, Event Bubbling, Scope,
Prototype, Shadow DOM, strict,
While learning JS you might get stuck but don't give up and take your time
- Syntax
- Strings, arrays, objects
- DOM Manipulation
- Learn Fetch API / Ajax
- ES6+ and modular JavaScript
- Hoisting, Event Bubbling, Scope,
Prototype, Shadow DOM, strict,
While learning JS you might get stuck but don't give up and take your time
CSS Frameworks
- Tailwind CSS
- Bootstrap
- Bulma
βπ»CSS first frameworks which don't come with javascript components by default
- Chakra UI
- Material UI
βπ»JS based and better to use with your framework based JavaScript applications.
- Tailwind CSS
- Bootstrap
- Bulma
βπ»CSS first frameworks which don't come with javascript components by default
- Chakra UI
- Material UI
βπ»JS based and better to use with your framework based JavaScript applications.
Pick a Framework
React
β Redux
β MobX
Angular
β RxJS
β NgRx
Vue.js
β Vuex
These frameworks and libraries will help you make your UI more faster and more clean, and frameworks and libraries on topic of these will help you to quickly create and customize
React
β Redux
β MobX
Angular
β RxJS
β NgRx
Vue.js
β Vuex
These frameworks and libraries will help you make your UI more faster and more clean, and frameworks and libraries on topic of these will help you to quickly create and customize
Version Control Systems
- What are they and why you should use one?
- Repo hosting services
- Understand the concepts
- Basic Usage of Git, GitHub
- Create account and Learn to use GitHub
Learning git will help you to save code progress and contribute to open source
- What are they and why you should use one?
- Repo hosting services
- Understand the concepts
- Basic Usage of Git, GitHub
- Create account and Learn to use GitHub
Learning git will help you to save code progress and contribute to open source
Web Security Knowledge
- HTTPS
- CORS
- Content security policy
- OSWAP security risks
Get atleast a basic knowledge of all of these ππ»
Package Managers
β NPM or
β YARN
npm and yarn both are fine, pick one or learn both, there is not much difference.
- HTTPS
- CORS
- Content security policy
- OSWAP security risks
Get atleast a basic knowledge of all of these ππ»
Package Managers
β NPM or
β YARN
npm and yarn both are fine, pick one or learn both, there is not much difference.
Module Bundlers
- Rollup
- Parcel
- Vite
- Webpack
- esbuild
It helps you manage the dependency relationship of your code, it will load modules in dependency order for you. It helps you to load your assets in dependency order, image asset, css asset, etc
- Rollup
- Parcel
- Vite
- Webpack
- esbuild
It helps you manage the dependency relationship of your code, it will load modules in dependency order for you. It helps you to load your assets in dependency order, image asset, css asset, etc
Web Components
- HTML Templates
- Custom Elements
- Shadow DOM
It is a suite of different technologies allowing you to create reusable custom elements with their functionality separated away from the rest of your code so that you could use them in your web apps.
- HTML Templates
- Custom Elements
- Shadow DOM
It is a suite of different technologies allowing you to create reusable custom elements with their functionality separated away from the rest of your code so that you could use them in your web apps.
Server Side Rendering (SSR)
- React
β Next.js (preferred)
β After.js
- Angular
β Universal
- Vue
β Nuxt.js
SSR is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser
- React
β Next.js (preferred)
β After.js
- Angular
β Universal
- Vue
β Nuxt.js
SSR is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser
Static Site Generators
- Next.js
- GatsbyJS
- Nuxt.js
- Ionic
- Vuepress
- Hugo
- Jekyll
Static site generator is a tool that generates a full static HTML website based on raw data and a set of templates, it automates the task of coding individual HTML pages
- Next.js
- GatsbyJS
- Nuxt.js
- Ionic
- Vuepress
- Hugo
- Jekyll
Static site generator is a tool that generates a full static HTML website based on raw data and a set of templates, it automates the task of coding individual HTML pages
Testing your Apps
- Jest
- Radix UI
- react-testing-library
- Cypress
Learn the difference between Unit, Integration, and Functional tests and learn how to write them
- Jest
- Radix UI
- react-testing-library
- Cypress
Learn the difference between Unit, Integration, and Functional tests and learn how to write them
Web Assembly
It is the binary instructions generated from
higher level languages such as Go, C, C++ or Rust. It is faster than JavaScript has already shipped in the major browsers
It is the binary instructions generated from
higher level languages such as Go, C, C++ or Rust. It is faster than JavaScript has already shipped in the major browsers
Progressive Web Apps
- Storage
- web sockets
- Service Workers
- Locations
- Payment
- Credentials
βπ»Learn the different APIs used in PWAs
PWAs are web apps developed using specific technologies and standard patterns to allow them to work on both web and native app
- Storage
- web sockets
- Service Workers
- Locations
- Payment
- Credentials
βπ»Learn the different APIs used in PWAs
PWAs are web apps developed using specific technologies and standard patterns to allow them to work on both web and native app
That's all for this thread!
To know more about web dev, follow these people:
@VittoStack
@oliverjumpertz
@csaba_kissi
@saviomartin7
@IAyeshaSahar
@KhanAbbas201
@coderlens
@parik36
Learned something ? -
β Don't forget to like, comment and retweet the first tweet!
To know more about web dev, follow these people:
@VittoStack
@oliverjumpertz
@csaba_kissi
@saviomartin7
@IAyeshaSahar
@KhanAbbas201
@coderlens
@parik36
Learned something ? -
β Don't forget to like, comment and retweet the first tweet!
Loading suggestions...