Topics are sorted according to www.roadmap.sh Web Developer Roadmap.
Resources for major web development topics in different formats. Choose according to your learning style.
You can find free downloads of some Paid courses on freecoursesite.com. Use an ad blocker.
| Type | Free/Paid | Name | Link | Recommended |
|---|---|---|---|---|
| YouTube | Free | HTML Crash Course For Absolute Beginners | https://www.youtube.com/watch?v=UB1O30fR-EE | |
| Course | Free | Responsive Web Design | https://www.freecodecamp.org/learn/responsive-web-design/ | ✅ |
| Type | Free/Paid | Name | Link | Recommended |
|---|---|---|---|---|
| YouTube | Free | CSS Crash Course For Absolute Beginners | https://www.youtube.com/watch?v=yfoY53QXEnI | |
| Course | Free | Responsive Web Design | https://www.freecodecamp.org/learn/responsive-web-design/ | ✅ |
| Type | Free/Paid | Name | Link | Recommended |
|---|---|---|---|---|
| YouTube | Free | Traversy Media - Vanilla JavaScript | https://www.youtube.com/playlist?list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX | |
| Course | Free | JavaScript Algorithms and Data Structures | https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ | ✅ |
| Text | Free | The Modern JavaScript Tutorial | https://javascript.info/ | |
| Text | Free | Eloquent JavaScript | https://eloquentjavascript.net/ | ✅ |
| Course | Paid | Modern JavaScript From The Beginning | https://www.udemy.com/course/modern-javascript-from-the-beginning/ | |
| Course | Paid | JavaScript - The Complete Guide 2021 (Beginner + Advanced) | https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/ | |
| Text | Paid | JavaScript: The Definitive Guide | https://www.oreilly.com/library/view/javascript-the-definitive/9781491952016/ |
Study Guides: https://github.com/womenwhocodedc/front-end-community
| Type | Free/Paid | Name | Link | Recommended |
|---|---|---|---|---|
| Text | Free | React Tutorial | https://reactjs.org/tutorial/tutorial.html | |
| Course | Free | Front End Development Libraries | https://www.freecodecamp.org/learn/front-end-libraries/ | ✅ |
| Course | Paid | React Front to Back | https://www.udemy.com/course/modern-react-front-to-back/ | ✅ |
- Google Home Page
- News article webpage (Optional: in CSS Holy Grail Layout)
- Google Forms Clone
- Make just user interface copy of any website you like.
- Think you can make a better looking DMS?
- freecodecamp's projects at https://www.freecodecamp.org/learn/responsive-web-design/
One way to practice JavaScript basics is to solve puzzle / problems using it. Yes, JavaScript is slower language, but it's fast enough for easy questions.
- Hackerrank's 10 days of JavaScript and JavaScript series (Basic, Intermediate, Advanced)
- Chrome's offline dragon game (type chrome://dino/ in a new tab to play it)
- Quiz - Take responses and calculate result.
- freecodecamp's projects at https://www.freecodecamp.org/learn/responsive-web-design/
- Ideas: https://github.com/strongdan/beginner-js-projects
- More Ideas: https://github.com/bradtraversy/vanillawebprojects
- There's more than enough ideas: https://github.com/bradtraversy/50projects50days
- Infinity: https://vishal-raj-1.github.io/Awesome-JavaScript-Projects/projects.html
- Daily Challenges: https://www.reddit.com/r/dailyprogrammer/