완전한 프런트 엔드 웹 개발 로드맵

https://dev.to/harshaambati/frontend-web-development-roadmap-5ha3

HTML 

1. learn the basics
2. Forms and validations
3. Accessibility
4. SEO
5. Convention and best Practices

Web Components 

• HTML elements
• Custom elements
• Shadow DOM

CSS 

• Learn the basics
• Responsive Design
• Making layouts
  Floats
  Positioning
  Display Box
  Model CSS
  Grid
  FlexBox

CSS Architecture 

• BEM
• OOCS
• SMACSS

CSS Preprocessor 

• Sass
• Postcss
• Less

CSS FrameWorks 

• Bootstrap
• Materialise CSS
• Bulma
• JS Based Framework
• Reactstrap
• Material Ui
• Tailwind CSS
• Chakra UI

Modern CSS 

• Styled Component
• CSS MOdules
• Styled JSX
• Emotion
• Radium
• Glamorous

Javascript 

• Syntax and Basic Construct
• Learn DOM manipulation
• Learn Fetch API/ Ajax
• ES6+
• Modular javascript
• Understand below Concepts
  Closures
  Scope
  Async await
  Prototype
  Event Bubbling
  Shadow DOM
  Hoisting
  Strict... etc * ... And many more

JS Framework 

• React js
  MobX
  ReduX
• Vue js
  VueX
• Angular
  RxJS
  NgR

Type checkers 

• Typescript
• Flow

Progressive Web Apps(PWA) 

• Storage
• web Sockets
• Service Workers
• Location
• Notification
• Device Orientation
• Payments
• Credentials
• Accelerated Mobile pages (AMP)

Perfomance 

• PRPL Pattern
• RAIL Model
• Perfomance
• Metrics
• Using LightHouse
• Using DevTools

Server Side Rendering (SSR) 

• React js
  Next.js
  After.js
  Angular
  Universal
• Vue js
  Nuxt.js

GraphQL

• Apollo
• Relay Modern

Static site generators 

• Next.js
• Gatsby.js
• Nuxt.js
• Vuepress
• jekyll
• Hugo

Mobile Applications 

• ReactNative
• NativeScript
• Flutter
• Ionic

Desktop Applications 

• electron
• Carlo
• Proton Native

Pacakage Managers 

• npm
• Yarn

Test your apps 

• Jest
• React-testing-library
• cypress
• enzyme

Build Tools 

• Linters and formatters
  Prettier
  ESLint
  StandardJS

Module Bundlers 

• Webpack
• Rollup
• Parcel

web security Knowledge 

• Owasp top 10
• CORS
• HTTP
• CSP(Content Security policy)

참고 :-위의 모든 것을 배울 필요는 없습니다 .. 그들 중 일부를 선택하고 마스터

리소스에 대한 유용한 웹 사이트

• Webskills
• WebDev
• Frontendfront