Frontend development roadmap (visual support + resources)
Tags: programming, webdev, learning, frontend
Published: 2023-10-14 12:08:29

Hi all. I've tried below to compile a list of all the videos/resource I used when learning frontend development ( I learned mostly through videos ), and give them a structure. I really struggled to find high-quality resources and making sense of all this mess so I hope this post will come to your aid if you fell like I did.

I've also used this list to create a roadmap with a tool I've been working on with a few friends to help structure everything in a visually appealing way. This is the [Frontend roadmap](https://navigolearn.com/roadmap/frontend-development-29) fully completed. It has additional explanations and it looks more nice than plain text. The chapters are down in the post.

&#x200B;

Let me know If I can improve it in any way !

Enjoy !!

**Essential Prequisites**

* [Basics of computer science](https://www.youtube.com/watch?v=8mAITcNt710)

**Recommended prequisites**

* Git and GitHub
   * [Git by Fireship](https://www.youtube.com/watch?v=HkdAHXoRtos)
   * [Git by FreeCodeCamp](https://www.youtube.com/watch?v=RGOj5yH7evk&t=0s)
* Problem Solving
   * [Problem Solving by Fireship](https://www.youtube.com/watch?v=UFc-RPbq8kg)
   * [Problem Solving by Tech with Tim](https://www.youtube.com/watch?v=r4TgqWbKRtA)

**0. How to learn web development and not lose your mind** Web development is notoriously complicated to get started with, having a very complicated ecosystem. You should master the core that being JavaScript, HTML, CSS, and a web framework, and if you continue to be curious, the rest will come along, for now, you should only know about most of the stuff that "they exist". I highly recommend going through all of the videos/resources and code along or at least be focused and understand everything and WHY it is done the way it is.

&#x200B;

## 1. Internet and Web

**A. How does the internet work?**

* [Internet Explained in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)
* [How the Internet Works #1 (HTTP)](https://www.youtube.com/watch?v=wW2A5SZ3GkI&list=PL0yztVlNIsg6o9LnrSwJdJetwWV2ZpCLj&index=2)
* [How Does the Internet Work #2](https://www.youtube.com/watch?v=0QI6I6APomE&list=PL0yztVlNIsg6o9LnrSwJdJetwWV2ZpCLj&index=3)
* [How Does the Internet Work #3](https://www.youtube.com/watch?v=QYXAxXjaKws&list=PL0yztVlNIsg6o9LnrSwJdJetwWV2ZpCLj&index=4)

B. What if the internet never existed - [What if the Internet Never Existed](https://www.youtube.com/watch?v=tszFFafk8pA)

C. Networking - [Computer Networking Course](https://www.youtube.com/watch?v=IPvYjXCsTg8)

&#x200B;

## 2. HTML

**A. HTML Basics**

* [HTML Course](https://www.youtube.com/watch?v=HD13eq_Pmp8)
* [HTML in 100 Seconds](https://www.youtube.com/watch?v=ok-plXXHlWw)

**B. A Taste of SEO**

* [SEO Basics](https://www.youtube.com/watch?v=JSm4aQl4w_U)

**C. HTML Semantic Elements**

* [HTML Semantic Elements](https://www.youtube.com/watch?v=bOUhq46fd5g)

&#x200B;

## 3. CSS

**A. Basics**

* [Bro Code CSS](https://www.youtube.com/watch?v=wRNinF7YQqQ)

**B. Master Your Layouts**

* [Secret to CSS Layouts](https://www.youtube.com/watch?v=vHuSz4fRM88)
* [The Joy of CSS Grid](https://www.youtube.com/watch?v=705XCEruZFs)
* [CSS Flexbox in 100 Seconds](https://www.youtube.com/watch?v=K24lUqcT0Ms)
* [Learn CSS Flexbox](https://www.youtube.com/watch?v=FTlczfR82mQ&list=PLDyQo7g0_nsU2O7gEdh7cAgamyh0xZumZ&index=7)

**C. Responsive Design**

* [Media Queries in 7 Minutes](https://www.youtube.com/watch?v=yU7jJ3NbPdA&t=0s)
* [How to Make Responsive Design](https://www.youtube.com/watch?v=ZYV6dYtz4HA)
* [Master Media Queries](https://www.youtube.com/watch?v=K24lUqcT0Ms)

**D. CSS Animations**

* [Learn CSS Animations](https://www.youtube.com/watch?v=SgmNxE9lWcY)

&#x200B;

## 4. Javascript

A. **Basics**\- [Javascript for Haters](https://www.youtube.com/watch?v=aXOChLn5ZdQ)\- [Javascript - Bro Code](https://www.youtube.com/watch?v=8dWL3wF_OMw)\- [Javascript - SuperSimpleDev](https://www.youtube.com/watch?v=SBmSRK3feww)

B. **DOM manipulation with Javascript**\- [DOM Manipulation](https://www.youtube.com/watch?v=y17RuWkWdn8)\- [Event Listeners](https://www.youtube.com/watch?v=XF1_MlZ5l6M)

C. **What the hell is Node.js?**\- [What the Hell is Node.js?](https://www.youtube.com/watch?v=ENrzD9HAZK4)

D. **Javascript Is Weird**\- [Javascript Is Weird](https://www.youtube.com/watch?v=sRWE5tnaxlI)

E. **100 Javascript Concepts**\- [100 Javascript Concepts](https://www.youtube.com/watch?v=lkIFF4maKMU&t=0s)

F. **What is ECMAScript?**\- [Javascript and ECMAScript](https://www.youtube.com/watch?v=nAdxWX7s3PY)\- [ES6 Modules](https://www.youtube.com/watch?v=cRHQNNcYf6s)

&#x200B;

## 5. How to do graphics in JavaScript

A. **Canvas**\- [Learn Canvas API](https://www.youtube.com/watch?v=gm1QtePAYTM)\- [Canvas Particle Animations](https://www.youtube.com/watch?v=vAJEHf92tV0)

B. **SVG**\- [SVG in 100 Seconds](https://www.youtube.com/watch?v=emFMHH2Bfvo)\- [Awesome SVG Animation](https://www.youtube.com/watch?v=UTHgr6NLeEw)\- [Beautiful SVG Curves](https://www.youtube.com/watch?v=lPJVi797Uy0)

C. **JavaScript + CSS**\- [Animating Text with JavaScript](https://www.youtube.com/watch?v=GUEB9FogoP8)\- [Professional Scrolling Effect](https://www.youtube.com/watch?v=C_JKlr4WKKs)

&#x200B;

## 6. JavaScript Runtimes

* [Node.js Explained](https://www.youtube.com/watch?v=XQT6XiJt4DE)
* [Deno](https://www.youtube.com/watch?v=F0G9lZ7gecE)
* [Bun (It's Buntime)](https://www.youtube.com/watch?v=dWqNgzZwVJQ)

&#x200B;

## 7. Package Managers

* [What is npm?](https://www.youtube.com/watch?v=P3aKRdUyr0s)
* [Why I Switched to pnpm?](https://www.youtube.com/watch?v=d1E31WPR70g)

&#x200B;

## 8. Bundling and Transpilation Tools
  - [Module Bundlers Explained](https://www.youtube.com/watch?v=5IG4UmULyoA)
  - [What is Babel?](https://babeljs.io/docs)
  - [Vite](https://www.youtube.com/watch?v=KCrXgy8qtjM)
  - [Frontend Development Setup](https://www.youtube.com/watch?v=IZGNcSuwBZs)

&#x200B;

## Project Ideas:

**1. The Div Race**
  - Create a website with two racing divs: one controlled by an evil wizard (accelerates by 10 pixels per sec) and the other by you (move by 50 pixels per sec).
  - Use buttons to control your div and reset the wizard's div.
  - Goal: Win the race.
  - Tip: Use recursive `setTimeout` for the wizard's functionality.

**2. Playlist Saving App**
  - Build a web app for managing playlists with titles and links.
  - Add, remove, edit entries and view them.
  - Entries are clickable links.

**3. Sorting Algorithm Visualizer**
  - Implement a sorting algorithm visualizer.
  - Choose one from a list of algorithms or implement your own.
  - [More Details](https://www.youtube.com/watch?v=n4t_-NjY_Sg?si=rRpS_2_GXwKShVYO&t=178)

&#x200B;

## 10. Advanced CSS

**A. Tailwind CSS**
- [Video Tutorial](https://www.youtube.com/watch?v=mr15Xzb1Ook)

**B. UI Libraries**
- **Bootstrap**: [Official Site](https://getbootstrap.com/)
- **Shadcn UI**: [Official Site](https://ui.shadcn.com/)
- **Bulma**: [Official Site](https://bulma.io/)

**C. Sass**
- [Explainer Video](https://www.youtube.com/watch?v=akDIJa0AP5c)

&#x200B;

## 11. Advanced JavaScript

**A. Asynchronous JavaScript**
- [Primary Explanation](https://www.youtube.com/watch?v=1Z7FjG--F20)
- [Alternative Explanation](https://www.youtube.com/watch?v=vn3tm0quoqE)

**B. Event Loop and Concurrency**
- [Watch Here](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

**C. Closures**
- [Learn Here](https://www.youtube.com/watch?v=vKJpN5FAeF4)

**D. Fetch API**
- [Introduction](https://www.youtube.com/watch?v=drK6mdA9d_M)
- [Using Real API](https://www.youtube.com/watch?v=zUcc4vW-jsI)

&#x200B;

## 12. Testing

**Test-Driven Development**
- [TDD explained](https://www.youtube.com/watch?v=Jv2uxzhPFl4)

&#x200B;

## 13. JavaScript Frameworks of Never-Ending Pain

- "Anything that can be written in JavaScript will eventually be written in JavaScript."
- [Comparison in 10 Frameworks](https://www.youtube.com/watch?v=cuHDQhDhvPE)
- [History of JS Frameworks](https://www.youtube.com/watch?v=5EsLj3JOdE0)

### A. Established Frameworks

**1. React**
- [Quick Overview](https://www.youtube.com/watch?v=Tn6-PIqc4UM)
- [Beginner Course](https://www.youtube.com/watch?v=OFHAIpw2oZI&list=PLDyQo7g0_nsVHmyZZpVJyFn5ojlboVEhE&index=1)
- [Complete Course](https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d)
- [Hooks Explained](https://www.youtube.com/watch?v=TNhaISOUy6Q)

**2. Angular**
- [Watch Video](https://www.youtube.com/watch?v=3dHNOWTI7H8)

**3. Vue**
- [Watch Video](https://www.youtube.com/watch?v=qZXt1Aom3Cs)

### B. Hot and New

**1. Svelte**
- [Quick Overview](https://www.youtube.com/watch?v=rv3Yq-B8qp4)
- [Complete Course](https://www.youtube.com/watch?v=zojEMeQGGHs&list=PL4cUxeGkcC9hlbrVO_2QFVVhPhlZmz7tO)
- [React vs. Svelte](https://www.youtube.com/watch?v=MnpuK0MK4yo)

**2. Solid.js**
- [Watch Video](https://www.youtube.com/watch?v=uPXn9S31o7Q&list=PL4cUxeGkcC9gU_GvFygZFu0aBysPilkbB)

**3. Alpine.js**
- [Watch Video](https://www.youtube.com/watch?v=r5iWCtfltso)

&#x200B;

## 14. Choosing the "Right" Framework
- [Watch Video](https://www.youtube.com/watch?v=S7X6fLbdwlc)
&#x200B;

## 15. Typecheckers

**A. TypeScript**
- [TypeScript vs JSDoc](https://www.youtube.com/watch?v=pj8SoTZbCTE)
- [TypeScript Course](https://www.youtube.com/watch?v=2pZmKW9-I_k&list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI&index=1)
- [TypeScript and React](https://www.youtube.com/watch?v=kq6IhAZVNh8)

**B. JSDoc**
- [JSDoc Course](https://www.youtube.com/watch?v=YK-GurROGIg)

&#x200B;

## 16. State Management

**A. What is State**
- [Watch Video](https://www.youtube.com/watch?v=g8-Xrpl_Uhk&t)

**B. What are Side Effects**
- [Watch Video](https://www.youtube.com/watch?v=4IIWib5MZKg)

**C. State in React**
- [Watch Video](https://www.youtube.com/watch?v=CVpUuw9XSjY)

**D. State in Svelte**
- [Watch Video](https://www.youtube.com/watch?v=TIFuMRJT89A)

&#x200B;

## 17. Advanced Testing

- [Testing Types](https://www.youtube.com/watch?v=4-_0aTlkqK0)
- [When to Test](https://www.youtube.com/watch?v=isI1c0eGSZ0)

**A. Unit and Integration Testing**
- [Vitest](https://www.youtube.com/watch?v=7f-71kYhK00&t=0s)
- [Jest](https://www.youtube.com/watch?v=FgnxcUQ5vho)

**B. End-to-End Testing**
- [Playwright](https://playwright.dev/docs/intro)
- [Cypress](https://www.youtube.com/watch?v=BQqzfHQkREo)

&#x200B;

## Project Ideas

**Easy: Personal Blog**
- Create a personal blog website with navigable multiple blogs.
- Features: Add new blogs, edit existing ones, add/remove blocks of text and images.

**Hard: Path Visualizer Algorithm**
- Visualize pathing algorithms based on Clement's video.
- Features: Put walls, implement one algorithm, and create animations.
  1. [Clement's Video](https://youtu.be/n4t_-NjY_Sg?si=rRpS_2_GXwKShVYO&t=178)

---

&#x200B;

## 19. Basics of APIs

- [How APIs Work](https://www.youtube.com/watch?v=-mN3VyJuCjM)
- [What is a REST API](https://www.youtube.com/watch?v=lsMQRaeKNDk)
- [GraphQL](https://www.youtube.com/watch?v=eIQh02xuVw4)
- [Authentication](https://www.youtube.com/watch?v=UBUNrFtufWo)
- [Databases](https://www.youtube.com/watch?v=W2Z7fbCLSTw)

&#x200B;

## 20. Performance

- [General Performance Guide](https://www.youtube.com/watch?v=0fONene3OIAo)
  
### A. Measuring Performance

1. **Lighthouse**
    - [Unlighthouse](https://github.com/harlan-zw/unlighthouse)
    - [Lighthouse Video](https://www.youtube.com/watch?v=VyaHwvPWuZU)
  
2. **Profiling**
    - [Browser Dev Tools Tips](https://www.youtube.com/watch?v=TcTSqhpm80Y)
    - [Chrome Dev Tools](https://youtu.be/gTVpBbFWry8?si=wSPHKr5TqH1Xy93f)
    - [Network Tab](https://www.youtube.com/watch?v=LBgfSwX4GDI)
    - [Optimizing Website](https://www.youtube.com/watch?v=6m31FmsqXAo)
    - [Performance Tab](https://www.youtube.com/watch?v=LGT4Qe7v0So)
    - [Memory Tab](https://www.youtube.com/watch?v=fvfqnFYXF_8)

### B. Improving Performance
  
1. **Optimize Assets**
    - [JavaScript Bundle](https://www.youtube.com/watch?v=kwUfeWe7DCw)
    - [Images](https://youtube.com/shorts/3lFNSLDsjdQ?si=LF6XPL8T4wduwjwr)
    - [PurgeCss](https://purgecss.com)
  
2. **Lazy Loading**
    - [Images](https://www.youtube.com/watch?v=hJ7Rg1821Q0)
    - [Next.js](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading)
  
3. **Web Workers**
    - [Video](https://www.youtube.com/watch?v=Gcp7triXFjg)
  
4. **Caching**
    - [Explained](https://www.youtube.com/watch?v=dGAgxozNWFE)
  
5. **Use a CDN**
    - [Video](https://www.youtube.com/watch?v=RI9np1LWzqw)

6. **Research Frameworks and Tools** - Make sure to do your research on your current javascript framework and find out if it has a superset (eg React ->Nextjs, Svelte -> Sveltekit, Vue->Nuxtjs). They often come with many improvments and optimizations out of the box. There are also tools like [Partytown](https://partytown.builder.io/) which can vastly improve performance in some specific cases

7. **Ultimate Tip**: Understand and adapt generic optimizations for specific issues in your app. There will be no silver bullet, you will most likely have to apply a combination of all optimizations listed above, so don't take them as the end of possibilities, just use them as building blocks



&#x200B;

## 21. Ways to Render a Webpage

- [10 Ways to render a webpage](https://www.youtube.com/watch?v=Dkx5ydvtpCA)
- [Comparison](https://www.youtube.com/watch?v=kUs-fH1k-aM)

**A. Static Websites**
  - [Static vs Dynamic](https://www.youtube.com/watch?v=_wFJj94kSTU)
  
**B. Single Page Applications (SPA)**
  - [Single vs Multi Page](https://www.youtube.com/watch?v=me5lS00Nj1k)
  
**C. Server Side Rendering (SSR)**
  - [Video](https://www.youtube.com/watch?v=ObrSuDYMl1s)

**D. Server Side Generation (SSG) - explained in videos above**

**E. Hydration - explained in videos above**

&#x200B;

## 22. SEO

- [SEO Video](https://www.youtube.com/watch?v=-B58GgsehKQ)

&#x200B;

## 23. Picking a Meta Framework

- Meta frameworks can offer extra power and features over base frameworks like Svelte, React, etc.

&#x200B;

## 24. Deployment and Hosting

- Most platforms offer easy deployment via GitHub repositories.

### A. Vercel

- [Vercel](https://vercel.com/)

### B. Netlify

- [Netlify](https://www.netlify.com/)

### C. GitHub Pages

- [GitHub Pages](https://pages.github.com/)

&#x200B;

## 28. Interesting Libraries

### A. D3js

- [D3js](https://d3js.org/)

### B. Threejs

- [Threejs](https://threejs.org/)

### C. Animejs

- [Animejs](https://animejs.com/)

### D. Chart.js

- [Chart.js](https://www.chartjs.org/)

&#x200B;

## 29. What's Next?

- Build a project, prepare for job interviews, or learn new complementary skills.

&#x200B;

## Topics to Be Added

**A. Application Storage**

- [Video](https://www.youtube.com/watch?v=GihQAC1I39Q)

**B. Security**

- [OWASP Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Third_Party_Javascript_Management_Cheat_Sheet.html)

**C. Progressive Web Apps**

**D. ESLint and Prettier**

**E. CI/CD**

**F. Ruby on Rails**

**G. Meteorjs**