DEV Community

arking115
arking115

Posted on

Frontend development roadmap (visual support + resources)

#programming #webdev #learning #frontend

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

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?

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 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

​

10. Advanced CSS

A. Tailwind CSS

B. UI Libraries

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

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.
    1. Clement's Video

​

19. Basics of APIs

​

20. Performance

A. Measuring Performance

  1. Lighthouse

  2. Profiling

B. Improving Performance

  1. Optimize Assets

  2. Lazy Loading

  3. Web Workers

  4. Caching

  5. Use a CDN

  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 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

​

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)