Mastering Frontend

Learn What is Frontend and Backend?

How to learn efficiently?

• Create a daily routine.
• Prepare a timetable.
• Spend time on doing some Projects. Don't just learn the concepts.

1. Introduction

What is Internet?

• How does the Internet work?
• What is HTTP?
• What is DNS? | How DNS works

2. Frontend Basics

2.1. HTML

• W3Schools: Learn HTML
• HTML For Beginners

2.2. CSS

• W3Schools
• Learn Intermediate CSS
• Responsive Web Design - Media Queries

2.3. JavaScript

• W3Schools
• The Modern JavaScript Tutorial
• You Don't Know JS Yet
• Modern JavaScript

Some more useful links:

• SEO Basics
• 8 Must-Know SEO Best Practices For Developers
• Learn and Practice Flexbox
• Learn CSS Grid
• Responsive Web Design
• Learn Responsive Design
• Absolute, Relative, Fixed Positioning: How Do They Differ?
• DOM Manipulation
• JavaScript HTML DOM
• Fetch API
• JavaScript Concepts
  • Hoisting
  • Bubbling and capturing
  • Var, Let, and Const – What's the Difference?

3. Frontend Intermediate

3.1. Package Manager

• NPM
• Yarn

3.2. React

• Introduction JSX
• React Component
• State and Props
• Adding Styles
• Functional and Class components
• Virtual DOM
• React Hooks
• Custom Hooks
• Context API
• Routing
• Server-Side Rendering
• State Management Library Zustand, Recoil

3.3. UI Libraries for Styling

• TailwindCSS
• MUI
• Chakra UI
• Styled Components

3.4. Frameworks

• NextJS
• Vue
• Svelte

3.5. API Calls

• Axios
• React-Query
• SWR

3.6. Learn TypeScript

4. Frontend Advance

• Advancing React Hooks
• React Development Tools
• Error Boundaries
• Higher Order Components
• Optimization
  • Code Splitting
  • Caching
• Testing
  • Cypress
  • Playwright

Courses

1. The Complete 2023 Web Development Bootcamp by Angela Yu
2. Frontend Web Developer 21-Hour Bootcamp
3. React Course - Beginner's Tutorial for React JavaScript Library [2022]