The Complete Full-Stack Engineer Roadmap
Learn everything you need to build any SAAS product in a very organized, ordered, and self-paced learning roadmap based on experience!
👉  Index
Path 1: HTML Basics
The best course to learn HTML and CSS. Also, take it to learn the best way to write semantic HTML (which is important).
The most advanced course on CSS. One of the most important skills is CSS. It's sad to see people never learn it properly.
Semantic HTML is really important for accessibility and SEO reasons.
A blog about web standards and performance.
Path 2: CSS
For staying up-to-date with CSS. This is where you will find the best CSS authors and bloggers.
In the old days there was no defined way of making grid systems, floats and table layouts were hacking techniques to create layout. Now we have great layout solutions which is Flexbox and CSS Grid.
A convention for naming classes. Great for any frontend project.
Writing your CSS with Sass pre-processor will make so much difference in your development workflow. I highly recommend it.
Let's say you are building a design system or a huge project. you need an architecture to increase maintainability and your code quality overall. This is the best resource for HTML/CSS (only) projects.
This is a helpful survey that shows the current state of CSS ecosystem. Every year I read surveys + case studies for any technology (write the name of the technology with case study keyword in google).
Web browsers have the ability to display stunning CSS animations and transitions. Learn how you can use CSS Animations and Transitions to enhance your web applications with powerful, information-rich motion and color.
Official CSS docs for reference.
Tips and tricks for CSS. If you are curious.
They discuss what Google Fonts are exactly, how to use them effectively, and what’s new.
How to create sites which respond to the needs and capabilities of the device they are viewed on. Critical subject for any frontend engineer.
Path 3: UI/UX Basics
This book covers the most important skills in UI Design, in a very easy language. I read this book twice. Read it and practice every exercise you see in the book.
One of the best workshops about UI Design for devs.
Typography is crucial for brands. it invokes certain feelings. This workshop is a great overview of typography.
This video explains the essentials of motion design or animation in general. Motion design makes an important impact on the user experience.
Buttons is a very common component in UIs. In this article you will know how to design buttons with good user experience principles.
Contrast in colors and text is a very important thing in UI Design.
This is a helpful lecture about web typography and the good CSS implementation of typography.
Collection of resources for UI/UX.
Contrast in colors and text is a very critical skill in UI Design. Just open Dirbbble and notice the contrast in colors, font sizes, and all the visual hierarchy in any site.
Collection of resources for UI/UX.
Tools to learn UI Design concepts.
Collections of UI Design resources. Explore it from time to time.
Another helpful collection of resources.
Path 4: JavaScript
You need to learn JavaScript very well before going to a framework/library like React or Vue. This course is really deep. go through it with You Don't Know JS book.
Digging deeper into the language features such as prototypal inheritance, type system, engine, abstract syntax tree, closures, and scope.
Solid understanding of callbacks and higher-order functions, closure, asynchronous javaScript, and object-oriented JavaScript is what makes you extremely good in JavaScript.
Large survey about the JavaScript ecosystem.
Performance plays a major role in the success of any product. High-performing sites engage and retain users better than low-performing ones.
Path 5: React
The web development industry is moving more towered a component-oriented way of developing user interfaces. This article will shows you how to think of components.
This is the best course to learn React.
Collection of resources about React.
A great blog about React. from a core React dev.
State management is THE most important and hard skill in frontend. Grasp the concept very well. Think of any possible data that can be a state.
Path 6: Git
Path 7: Rendering on the Web
One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be a difficult, since there are a number of different ways to build a website.
Server-side rendering is getting more and more traction thanks to React and its built-in server-side hydration feature.
Path 8: Nodejs
A good course. but never take alone.
Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Fully updated April 2019
In programming, modules are self-contained units of functionality that can be shared and reused across projects.
Great lecture of CORS, JSON, and the Web in general.
Event Emitters are a critical part of nodejs design.
Path 9: Creating Restful APIs
REST is acronym for Representational State Transfer. It is architectural style for distributed hypermedia systems and was first presented by Roy Fielding in 2000 in his famous dissertation.
A great docs on how to design your APIs. in a great details
Another good article on how to design REST APIs
A great article about how to do error handling for your API. A very important thing in practice
Path 10: Authentication
This lecture describes web authentication in details.
JWT now is the most common method of authentication. At least understand it.
Another good article on how to design REST APIs
The fundamentals of user authentication in modern web applications and websites.
Crash course about HTTP. Really useful, or read about the 'application layer' in any basic networking book.