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 fully completed. It has additional explanations and it looks more nice than plain text. The chapters are down in the post.
Let me know If I can improve it in any way !
Enjoy !!
Essential Prequisites
Recommended prequisites
- Git and GitHub
- Problem Solving
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.
1. Internet and Web
A. How does the internet work?
- Internet Explained in 5 Minutes
- How the Internet Works #1 (HTTP)
- How Does the Internet Work #2
- How Does the Internet Work #3
B. What if the internet never existed - What if the Internet Never Existed
C. Networking - Computer Networking Course
2. HTML
A. HTML Basics
B. A Taste of SEO
C. HTML Semantic Elements
3. CSS
A. Basics
B. Master Your Layouts
C. Responsive Design
D. CSS Animations
4. Javascript
A. Basics- Javascript for Haters- Javascript - Bro Code- Javascript - SuperSimpleDev
B. DOM manipulation with Javascript- DOM Manipulation- Event Listeners
C. What the hell is Node.js?- What the Hell is Node.js?
D. Javascript Is Weird- Javascript Is Weird
E. 100 Javascript Concepts- 100 Javascript Concepts
F. What is ECMAScript?- Javascript and ECMAScript- ES6 Modules
5. How to do graphics in JavaScript
A. Canvas- Learn Canvas API- Canvas Particle Animations
B. SVG- SVG in 100 Seconds- Awesome SVG Animation- Beautiful SVG Curves
C. JavaScript + CSS- Animating Text with JavaScript- Professional Scrolling Effect
6. JavaScript Runtimes
7. Package Managers
8. Bundling and Transpilation Tools
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
setTimeoutfor 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
10. Advanced CSS
A. Tailwind CSS
B. UI Libraries
- Bootstrap: Official Site
- Shadcn UI: Official Site
- Bulma: Official Site
C. Sass
11. Advanced JavaScript
A. Asynchronous JavaScript
B. Event Loop and Concurrency
C. Closures
D. Fetch API
12. Testing
Test-Driven Development
13. JavaScript Frameworks of Never-Ending Pain
- "Anything that can be written in JavaScript will eventually be written in JavaScript."
- Comparison in 10 Frameworks
- History of JS Frameworks
A. Established Frameworks
1. React
2. Angular
3. Vue
B. Hot and New
1. Svelte
2. Solid.js
3. Alpine.js
14. Choosing the "Right" Framework
15. Typecheckers
A. TypeScript
B. JSDoc
16. State Management
A. What is State
B. What are Side Effects
C. State in React
D. State in Svelte
17. Advanced Testing
A. Unit and Integration Testing
B. End-to-End Testing
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.
19. Basics of APIs
20. Performance
A. Measuring Performance
-
Lighthouse
-
Profiling
B. Improving Performance
-
Optimize Assets
-
Lazy Loading
-
Web Workers
-
Caching
-
Use a CDN
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 which can vastly improve performance in some specific cases
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
21. Ways to Render a Webpage
A. Static Websites
B. Single Page Applications (SPA)
C. Server Side Rendering (SSR)
D. Server Side Generation (SSG) - explained in videos above
E. Hydration - explained in videos above
22. SEO
23. Picking a Meta Framework
- Meta frameworks can offer extra power and features over base frameworks like Svelte, React, etc.
24. Deployment and Hosting
- Most platforms offer easy deployment via GitHub repositories.
A. Vercel
B. Netlify
C. GitHub Pages
28. Interesting Libraries
A. D3js
B. Threejs
C. Animejs
D. Chart.js
29. What's Next?
- Build a project, prepare for job interviews, or learn new complementary skills.
Topics to Be Added
A. Application Storage
B. Security
C. Progressive Web Apps
D. ESLint and Prettier
E. CI/CD
F. Ruby on Rails
G. Meteorjs
Top comments (0)