I have often been asked what resources would I recommend for beginners looking to step their foot into the web development career. I often refer to GitHub as a great place to start.
I decided to compile some of the best repositories I know. I wish I knew them when I started myself, so treat them as a valuable shortcut to speed up your learning path.
This article is obviously oriented on beginners, though I'm sure some of the more experienced developers might learn a thing or two from these, too.
To help you to navigate I have arranged them via categories, starting from basics to courses, handbooks, best practices, projects, interviews, and resources.
Fundamentals ⚡
1. how-web-works
⭐ GitHub stars 4k+
vasanthk
/
how-web-works
What happens behind the scenes when we type www.google.com in a browser?
What happens behind the scenes when we type www.google.com in a browser?
2. developer-roadmap
⭐ GitHub stars 187k+
kamranahmedse
/
developer-roadmap
Interactive roadmaps, guides and other educational content to help developers grow in their careers.
This is probably the best and most complete roadmap, that will help you to grasp the bigger picture of the development landscape, its main technologies, and the recommended sequence of learning things.
Courses 👨🏫
3. web-dev-for-beginners
⭐ GitHub stars 41k+
microsoft
/
Web-Dev-For-Beginners
24 Lessons, 12 Weeks, Get Started as a Web Developer
Quality 12-week, 24-lesson course about JavaScript, CSS, and HTML basics. Each lesson includes pre-and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment, and more.
4. javascript-30
⭐ GitHub stars 18k+
wesbos
/
JavaScript30
30 Day Vanilla JS Challenge
Starter Files + Completed solutions for the JavaScript 30 Day Challenge by Wes Bos.
Handbooks 📚
5. developer-handbook
⭐ GitHub stars 1k+
apptension
/
developer-handbook
An opinionated guide on how to become a professional Web/Mobile App Developer.
An opinionated guide on how to become a professional Web/Mobile App Developer.
6. spellbook-of-modern-webdev
⭐ GitHub stars 14k+
dexteryy
/
spellbook-of-modern-webdev
A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development.
Best Practices 💯
7. web-fundamentals
⭐ GitHub stars 12k+
google
/
WebFundamentals
Former git repo for WebFundamentals on developers.google.com
Some of the best practices for modern web development, provided by Google developers.
8. airbnb
⭐ GitHub stars 120k+
airbnb
/
javascript
JavaScript Style Guide
One of the best Style Guides out there.
9. clean-code-javascript
⭐ GitHub stars 64k+
ryanmcdermott
/
clean-code-javascript
🛁 Clean Code concepts adapted for JavaScript
Software engineering principles, from Robert C. Martin's book "Clean Code", adapted for JavaScript. A guide to producing readable, reusable, and refactorable software in JavaScript.
10. system-design-primer
⭐ GitHub stars 164k+
donnemartin
/
system-design-primer
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
Projects 📂
11. simpl
⭐ GitHub stars 4k+
Simplest possible examples of HTML, CSS, and Javascript.
12. realworld
⭐ GitHub stars 64k+
gothinkster
/
realworld
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Realworld allows you to choose any frontend (React, Vue, & more) and any backend (Node, Django, & more) and see how they power real-world, beautifully designed full-stack apps.
13. build-your-own-x
⭐ GitHub stars 133k+
codecrafters-io
/
build-your-own-x
Master programming by recreating your favorite technologies from scratch.
Build your own (insert technology here).
Interviews 💼
14. coding-interview-university
⭐ GitHub stars 211k+
jwasham
/
coding-interview-university
A complete computer science study plan to become a software engineer.
A complete computer science study plan to become a software engineer.
15. front-end-interview-handbook
⭐ GitHub stars 32k+
yangshun
/
front-end-interview-handbook
⚡️ Front End interview preparation materials for busy engineers
Front End interview preparation materials for busy engineers.
16. tech-interview-handbook
⭐ GitHub stars 66k+
yangshun
/
tech-interview-handbook
💯 Curated coding interview preparation materials for busy software engineers
Curated interview preparation materials for busy engineers. For a better reading experience, check out techinterviewhandbook.org.
Also, check out Grind 75 - a tool to generate coding interview study plans based on preparation time left.
Resources 💾
17. design-resources-for-developers
⭐ GitHub stars 36k+
bradtraversy
/
design-resources-for-developers
Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
A curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools, and much more.
18. free-programming-books
⭐ GitHub stars 223k+
EbookFoundation
/
free-programming-books
📚 Freely available programming books
Freely available programming books.
19. front-end-collection
⭐ GitHub stars 1k+
cheatsheet1999
/
FrontEndCollection
Notes for Fullstack Software Engineers. Covers common data structure and algorithms, web concepts, Javascript / TypeScript, React, and more!
Notes for Front-end Software Engineers. Covers common data structure and algorithms, basic web concepts, HTML & CSS & Javascript.
Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!
If these resources helped, connect me on Twitter, LinkedIn and GitHub!
Visit my Blog for more articles like this.
Top comments (75)
Thank you for sharing wonderful GitHub Repo for beginner.
here we have amazing admin dashboard template using bootstrap 5
Free GitHub repo: dashui.codescandy.com/
this website is useful for this topic: masterjs.vercel.app/
is great resource collection for javascript
Thank you so much for sharing! 👍✨
My one favorite is the Awesome Repo
github.com/sindresorhus/awesome
It's like the one ring to rule them all. ✌🏻
That was is a vast ocean of resources ✨👍
That links to a list of all the Awesome Lists, each Awesome List contains links to all awesome resources.
Excatly, it's like the root of all the resources 😀😀
Self plug: I've been working on an easy to pick up CSS framework called Cirrus. Great for beginners who want to learn more about developing UIs quickly. github.com/Spiderpig86/Cirrus
This is a great addition 👍 Thanks 🙏❤
As many apps are sending emails I would like to add the following one to the list github.com/spaquet/docker-alpine-m...
It's mailcatcher running in a docker image. As the image is built on top of Alpine Linux its footprint is very small.
Thanks for sharing 👍💯
Thank you for sharing this amazing list of beginner developer github repo.
We also as beginner build our first theme based on react bootstrap. Geeks UI.
hy I am visiting your website daily , As I am suffering from bronchitis problem so I am treating my problem form Sandhya hospital they provide Bronchitis Treatment in delhi .A difficulty in breathing is termed as Shwas Roga in Ayurveda. For the purpose of description, Ayurveda classifies the specific difficulties in breathing into 5 different types.
I have been reading your blogs for a long time and your blogs are so amazing I would like to tell you that I am a Webhosting provider and blog writer also I have written many blogs on my website go and read once a while.write for us software . I have written blog on the same topic do read and share with your friends.
It's amazing, thank you! 🙏❤
This is wonderful 🔥🔥
Means so much, thanks! 🙏❤
I have a repository full of Frontend-Tools
github.com/enBonnet/Frontend-Tools
This is a valuable addition! ✨
Good job on it and thanks for sharing! 💯👍
Thank you to group all those resources together
It's my pleasure! 🙏❤
Some comments may only be visible to logged-in visitors. Sign in to view all comments.