Original Roadmap Video

1. Learn Computer Science: 50 Hrs maximum
• Use Harvard Course: just first few sections
• Important Sections: Algorithmic, History of CS, Compiling, Abstraction, BigO notation, efficiency, sorting algorithms
2. Learn a little overview: about 2 Hrs
3. Learn HTML/CSS: 100 Hrs
• Mozilla Developer Network
• Might be out of date(Book: HTML & CSS: Design and Build Web Sites by Jon Duckett)
• Crash courses on YouTube are only good as refreshers
4. Process
1. Learn the basics from book/MDN
2. Find components from favorite websites, learning to build them with just HTML/CSS
3. Make a list of all the components you want to build
4. Learn Layouts, Positioning, Flexbox, Grid, Box Model, Specificty
5. Learn Resonsive Design, Fluid Design, Media Queries
6. Learn Typography, Fluid Typography, Responsive Typography (Don't take too much time on typography)
7. As you learn, build 2 or 3 things with that concept.
8. Repeat: From the components you've learned to make, create some project from scratch without the tutorial.
5. When to move on from HTML/CSS
• At least 12 projects w/o Javascript
• At least 5-10 single and multi-page websites
• Comfortable with CSS flex, grid, media queries, etc.
• Should be able to make navbar from scratch in 15 mins.
6. Git/GitHub/Command Line: 10-20 Hrs
1. Git Documentation (Youtube)
2. CMD LINE Documentation (Youtube)
3. UPLOAD EVERYTHING TO GITHUB
7. JavaScript: 400 Hrs
8. Resources
• Book: Eloquent Javascript
• Book: You don't know Javascript
• MDN Documentation
• Look at blogs/articles for specifics
• Do these things:
• 1. Solve Algorithmic Challenges (Leetcode)
• 2. Build Projects
• Don't Quit! Spend some time on these problems.
9. Process
1. Start with book. (Listed above)
2. Create something new with each concept (like in html/css)
3. Make the projects look good(go back through projects and make it better)
10. Key Concepts
• Javascript Basics (data types, functions, loops, etc.)
• Make common micro projects
• Ajax, Promises, Async Await, es6+ (problem solving)
• Prototypal inheritance, OOP, difference between them
• Pure functions, functional programming, design patterns
• GO THROUGH A BOOK
11. Larger projects
• Look at websites that are already built and make a mini clone with major functionallity.
• An eCommerce site like Amazon
• Forum site like Reddit
• Social Media site
• Music Player app like Spotify
• Large means more complex, not in the amount of pages/components.
12. Don't touch frameworks
• Build at least 10 projects using pure JS
• Don't use jquery, react, angular, vue before ready. It will slow your progress!
• Learn design patterns (Constructor, Module, Prototype, Factory, Observer, Facade, Adapter,etc.
• Just learn 3 to 5 of these design patterns.
13. When to move on
• Build at least 8-10 micro projects
• Solve at least 50-100 programming algorithms (Easy to intermediate)
• Understand Javascript fundamentals well
• Understand few of the common design patterns and why they're important, how they help
• Don't make it work, make it right
• Learn Webpack
14. Find a job, you can do tutoring online
15. NodeJS, Express and Mongo: 100 Hrs
• A Javascript runtime
• Allows you to write JS outside of browser, more than just web apps(browser)
• It allows JS to be used in everything outside the web browser such as mobile devices or other things.
• Must learn this back-end in order to better at front-end
16. Resources
• Learn to build API
• API vs Rest API difference
• MDN documentation
• Express(framework), databases(mongo)
• make a todo list app with DB in back end
• build 5-10 things that takes data from front-end to back-end
17. React: 100 Hrs
• Stick with this one framework
• Helps build faster
• Learn why this can help
• Should be easy(if not it's a pure JS problem)
18. When to move on
• Implement react into build JS projects you did before
19. Finally time for front-end web dev jobs
• Show off best projects in portfolio
• Maximize your UX design by seeing the best from others (sites like behance and dribble)
• Let all your hard work give you confidence.
20. Portfolio of Work
• 10+ Micro Projects
• 1-2 Large Projects
• Case studies of one or two of your projects(document thought process)
• 100+ algorithmic challenges solved
21. Job Applications
• Brute Force Method: 20 jobs a day (Just apply to as many as possible even if not fully qualified)
• Sophisticated Monkey Method: Select 3-5 companies that you would love to work for. Send a message on LinkedIn to someone that works there. Try to stand out in some way.
22. While applying, keep learning
• Learn SASS, BEM (Should take 2 days)
• Learn a new language
• Build projects
• Security, Performance, SSR
• Check out GatsbyJS (serverless)
23. Conclusion
• 800-1000 Hrs total
• Sleep at least 7 hrs a day
• Don't rush the learning
• Have fun
• Don't use social media/disable notifications for texts if it's too much.
• Find like-minded people
• Keep a good enviornment