Frontend Learning Path

1. HTML, CSS, and JavaScript Fundamentals

• HTML

  • Basics overview
  • Image element and attributes , Playlist
  • Forms and input elements and attributes
  • HTML entities, character encoding, and metadata elements.
  • Semantic HTML5 elements like <main>, <nav>, and <article>.
  • Principles of web accessibility and creating accessible HTML.

• CSS

  • CSS basics
  • CSS Selectors and this
  • Layout techniques: Flexbox, Grid and Grid Practice Course
  • Responsive web design and media queries.
  • CSS pre-processors: Sass Basics 
  • Practice Courses Full Practice Course  , MasterClass Video

• JavaScript

  • Javascript basics 
  • Modern Javascript
  • Error handling and debugging techniques  and best practices
  • Client-side Storages
  • Practice Course

2. Building Responsive Layouts

• CSS Frameworks

  • Currently we are using Tailwind CSS 
  • Interactive course
  • Video series “Designing with Tailwind CSS”

3. Web and Internet Basics

• HTTP/HTTPS
• Web basics
• Browsers
• DNS

4. Webpack Basics

• Webpack Introduction
• Loaders and Plugins
• Module Federation

5. Introduction to Build Tools (Vite)

• Vite Official Website

6. Introduction to TypeScript

• TypeScript Fundamentals
• Official Docs

1. Vue.js

• Vue.js Fundamentals

  • Official Docs
  • Crash Course
  • Vue Devtools for debugging and inspecting Vue applications

• Vue Router

  • Vue Router Documentation
  • Setting up client-side routing in Vue.js 
  • Nested routes, route parameters, and route guards.
  • Navigation and programmatic routing.
  • Advanced Vue Router features and dynamic routing

• State Management with Pinia

  • Centralized state management with Pinai  , Video

• Server Communication

  • Handling asynchronous actions with Promises and async/await 
  • Handling Errors with Nuxt

2. Getting Started with Nuxt.js

• Nuxt.js Basics

  • Nuxt.js Official
  • Exploring Nuxt.js project structure 
  • Asset handling: Working with static files and assets 
  • Global CSS and scoped CSS in Vue components 
  • ServerMiddleware for custom API endpoints and server-side logic

3. Building Reusable Components

• Component Composition

  • Composite and nested components in Vue.js. Topic

• Component Libraries

  • Using and creating Vue.js component libraries.
  • Publishing and sharing components with the community 
  • Vue 3 Composition API for building composable and reusable logic

4. Security in Front-End Development

• Web Security Fundamentals

  • Understanding security threats and best practices in web development
  • Common security vulnerabilities, such as Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF)

5. Version Control

• Udacity Version Control Course

1. Server-Side Rendering (SSR) with Nuxt.js

• Advanced SSR Techniques

  • SSR vs SSG
  • SSR 
  • Nuxt 3 Rendering Mode

• Nuxt.js Features

  • Serverless mode for cost-effective, serverless deployment

2. Building Scalable Applications

• Code Organization

  • Large-scale project structure and module organization. , article
  • Code splitting and lazy loading for optimal performance.
  • Extending Webpack configurations and optimizing builds

• Testing and Debugging

  • Writing unit tests with Jest and Vue Test Utils
  • End-to-end testing with tools like Cypress

3. Advanced TypeScript and Type Safety

• TypeScript Advanced Concepts

  • Advanced Topics