Web Dev for 2022 ??

Web Dev for 2022 ??

### Here's the roadmap ###
Basics of the internet:
The OSI model
The HTTP Protocol
The DNS Protocol

HTML (https://developer.mozilla.org/en-US/docs/Web/HTML/Element):
Tags, attributes and values
Main html tag
The head tag and document metadata
The body tag
Content sectioning
Text content
Inline text semantics
Image and multimedia
Embedded content
SVG and MathML
Scripting
Table content
Forms
Interactive elements
Web Components
Tip: Install the WebHint extension in VS Code to lint your HTML (https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint)

CSS:
Style rules: selectors, properties, and values
CSS variables
The box model
Layout: grid, flex, and float
Stacking contexts and the z-index property
Typography
Animations
Media queries

JS:
Syntax and programming
The Document Object Model (DOM)
Shadow DOM
DOM manipulation
Fetch API
ES5 vs ES6
Hoisting
Bubbling
Prototypes

TypeScript

Git and Github

Security:
HTTPS
CORS

Node:
File System (fs) API

NPM: Learn basic commands (install, uninstall, list, run)

ESLint (install in VS Code or your editor of preference)

React:
Create React App
JSX
Functional Components
useState
useEffect
useCallback
useRef
useMemo
useReducer
useContext
Custom hooks
Error boundaries

React's friends:
React Router
React Hook Form
Redux
Axios (it's better than JS's native fetch API)
Styled Components

Testing:
Jest
React-testing-library
Cypress
Cucumber

Server-side frameworks:
Express (to build APIs)
Remix (to build full-blown apps)

Communication Methodologies:
REST (https://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf)
GraphQL (https://graphql.org)

Databases:
MongoDB


It's also important to dominate your code editor, particularly VS Code, which is an amazing editor, and have it automate as much of your work as it can, integrate tools to accelerate workflows and lint your code to ensure you're writing 100% clean HTML, CSS, JS, and TS all the time. Check it out here: https://www.andrecasal.com/master-vs-code/

That's it, I hope you enjoy this roadmap. If you have any questions, please leave them in the comments and I'll get back to you.