Learning Frontend

1. JavaScript Fundamentals

1.1 Basic Syntax and Language Constructs

• Resources:MDN Web Docs — the main guide for JavaScript by Mozilla.
• Book: You Don’t Know JS: Up & Going (Kyle Simpson) — an introductory book helpful for understanding the basics.
• Course: JavaScript Basics on freeCodeCamp — a great start to grasp the fundamentals of the language.

1.2 Working with the DOM

• Resources:JavaScript.info: Working with the DOM — lessons on manipulating HTML through JavaScript.
• Course: JavaScript DOM Manipulation on Scrimba — an interactive course on DOM manipulation.

1.3 Practice

• Projects: Create a simple calculator, To-Do list, or counter to consolidate your knowledge.
• Platforms:Codewars — solve challenges to practice your skills.
• LeetCode — algorithm challenges (recommended for deepening skills).

2. Advanced JavaScript

2.1 Asynchronous Programming (Promise, async/await)

• Resources:MDN: Asynchronous Functions — detailed explanation with examples.
• Course: Asynchronous JavaScript on Udemy (course in English).

2.2 Closures, Context (this), Prototypes

• Resources:You Don’t Know JS: Scope & Closures — a book on essential concepts.
• JavaScript.info: Prototypes, Inheritance — an in-depth guide.
• Video: Learn JavaScript Closures — a clear explanation of closures by Tech with Tim.

2.3 Working with Modules (import/export)

• Resources:JavaScript Modules (MDN) — documentation on JavaScript modules.
• Project: Build a simple app using modules (e.g., To-Do App).

3. TypeScript Basics

3.1 Introduction to TypeScript

• Resources:TypeScript Documentation — official documentation, the best source to start.
• Course: TypeScript for Beginners by Academind — a complete guide.

3.2 Typing and Interfaces

• Projects:Convert a small JavaScript app to TypeScript (e.g., calculator or To-Do list).

3.3 Practice with Projects

• Project: Create a small app using interfaces and typing (e.g., registration form).

4. HTML and CSS

4.1 HTML and CSS Basics

• Resources:HTML & CSS on MDN — beginner-friendly guides.
• Course: Responsive Web Design on freeCodeCamp — a solid course to learn the fundamentals.

4.2 Layouts with Flexbox and Grid

• Resources:Flexbox Froggy and Grid Garden — interactive games for learning Flexbox and Grid.

4.3 Animations and Responsive Design

• Resources:Video: CSS Animations by Dev Ed.
• Course: CSS on Scrimba — a deep dive into CSS basics.

5. Frameworks and Libraries

5.1 Introduction to React (or Vue)

• Resources:React Official Documentation — a great starting point for React.
• Course: React + Redux - Guide (for Beginners) on freeCodeCamp — good for understanding React basics.

5.2 State Management and Lifecycle

• Project: Build a To-Do list or shopping list app to practice state management.

6. Tools and Workflow

6.1 Build Tools (Webpack, Vite)

• Resources:Course: Webpack Crash Course by Academind — a crash course on Webpack basics.
• Video: Vite 2.0 by Fireship — an introduction to Vite.

6.2 Version Control and Git

• Course: Git by Atlassian — free guide to Git basics.

7. Practice and Projects

• Projects for Consolidation:Portfolio — create a personal portfolio website.
• Chat Application — try building a simple chat room.
• News or Blog Site — a simple site with news or blog content to practice content creation and styling.

This roadmap should help you structure your learning and progressively build your skills in each area. Starting with the basics, you can move on to more complex projects, and the resources provided will deepen your understanding along the way!