DEV Community

Cover image for 19 Valuable GitHub Repositories for Beginner Developers πŸ“šβœ¨
Madza
Madza

Posted on • Updated on • Originally published at madza.hashnode.dev

19 Valuable GitHub Repositories for Beginner Developers πŸ“šβœ¨

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+

GitHub logo 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+

GitHub logo kamranahmedse / developer-roadmap

Roadmap to becoming a developer in 2022

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+

GitHub logo 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+

GitHub logo 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+

GitHub logo 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+

GitHub logo 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+

GitHub logo google / WebFundamentals

Best practices for modern web development

Some of the best practices for modern web development, provided by Google developers.

8. airbnb

⭐ GitHub stars 120k+

GitHub logo airbnb / javascript

JavaScript Style Guide

One of the best Style Guides out there.

9. clean-code-javascript

⭐ GitHub stars 64k+

GitHub logo 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+

GitHub logo 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+

GitHub logo samdutton / simpl

Simplest possible examples of HTML, CSS and Javascript:

Simplest possible examples of HTML, CSS, and Javascript.

12. realworld

⭐ GitHub stars 64k+

GitHub logo 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+

GitHub logo 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+

GitHub logo 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+

GitHub logo 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+

GitHub logo yangshun / tech-interview-handbook

πŸ’― Curated interview preparation materials for busy 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+

GitHub logo 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+

GitHub logo EbookFoundation / free-programming-books

πŸ“š Freely available programming books

Freely available programming books.

19. front-end-collection

⭐ GitHub stars 1k+

GitHub logo cheatsheet1999 / FrontEndCollection

Notes for Front-end Software Engineers. Covers common data structure and algorithms, basic web concepts, HTML & CSS & Javascript.

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.

Discussion (75)

Collapse
anitaparmar26 profile image
anitaparmar26

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/
https://dashui.codescandy.com/

Collapse
alguercode profile image
alguerocode

this website is useful for this topic: masterjs.vercel.app/
is great resource collection for javascript

Collapse
madza profile image
Madza Author

Thank you so much for sharing! πŸ‘βœ¨

Collapse
spiderpig86 profile image
Stanley Lim • Edited on

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

Collapse
madza profile image
Madza Author

This is a great addition πŸ‘ Thanks πŸ™β€

Collapse
sanketss84 profile image
Sanket Sonvane • Edited on

My one favorite is the Awesome Repo
github.com/sindresorhus/awesome
It's like the one ring to rule them all. ✌🏻

Collapse
madza profile image
Madza Author

That was is a vast ocean of resources βœ¨πŸ‘

Collapse
z2lai profile image
z2lai

That links to a list of all the Awesome Lists, each Awesome List contains links to all awesome resources.

Thread Thread
madza profile image
Madza Author

Excatly, it's like the root of all the resources πŸ˜€πŸ˜€

Collapse
spaquet profile image
Stephane Paquet

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.

Collapse
madza profile image
Madza Author

Thanks for sharing πŸ‘πŸ’―

Collapse
imjituchauhan profile image
Jitu Chauhan • Edited on

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.
Geeks UI - React Bootstrap based theme for developer and design agency.

Collapse
greek34 profile image
greek • Edited on

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.

Collapse
madza profile image
Madza Author

It's amazing, thank you! πŸ™β€

Collapse
j471n profile image
Jatin Sharma

This is wonderful πŸ”₯πŸ”₯

Collapse
madza profile image
Madza Author

Means so much, thanks! πŸ™β€

Collapse
enbonnet profile image
Ender Bonnet

I have a repository full of Frontend-Tools
github.com/enBonnet/Frontend-Tools

Collapse
madza profile image
Madza Author

This is a valuable addition! ✨
Good job on it and thanks for sharing! πŸ’―πŸ‘

Collapse
enbonnet profile image
Ender Bonnet

Thank you to group all those resources together

Thread Thread
madza profile image
Madza Author

It's my pleasure! πŸ™β€

Collapse
iwanttoachievesomething profile image
Techislife

πŸ‘ŒπŸ‘πŸ‘

Collapse
madza profile image
Madza Author

Thanks a lot, happy to help! πŸ’―πŸ‘

Collapse
yash1307cse profile image
Yash Chaudhari

Thank u so much

Collapse
madza profile image
Madza Author

My pleasure πŸ‘πŸ’―

Collapse
addictedk0126 profile image
Arshad Khan

It's really helpful πŸ˜‰

Collapse
madza profile image
Madza Author

Thanks! πŸ˜‰πŸ˜Š

Collapse
dhanushnehru profile image
Dhanush N

Thank you for this list

A GitHub repo for curated list of Node Js Resources πŸ‘‡

github.com/DhanushNehru/Ultimate-N...

Collapse
madza profile image
Madza Author

Thanks a lot for the input πŸ™β€

Collapse
lynnlangit profile image
Lynn Langit

readers might find my 'learning cloud' Repo useful --> github.com/lynnlangit/learning-cloud

Collapse
madza profile image
Madza Author

Thanks for sharing it πŸ™β€

Collapse
eje_sunay profile image
Eje Sunay

Thank you so much, much love, i wish i saw this when i was starting, i know its gonna still be helpful thousands time.

Collapse
madza profile image
Madza Author

Means a world, thanks! πŸ‘πŸ˜‰

Collapse
graciellesampaio profile image
Gracielle Sampaio

Thank you so much!! was after a repository to study javascript!

Collapse
madza profile image
Madza Author

Glad it helped, thanks! πŸ™β€

Collapse
walterwf profile image
Walter

Thanks, excellent contribution.

Collapse
madza profile image
Madza Author

Tried my best, thanks! πŸ™β€

Collapse
pavankulkarni profile image
Pavan Kulkarni

Valuable content for new developers , Thank you Mr Madza for sharing .

Collapse
madza profile image
Madza Author

My pleasure, you are always welcome! πŸ™β€

Collapse
algodame profile image
Chiamaka Ojiyi

Valuable πŸ”₯. Thanks for sharing!

Collapse
madza profile image
Madza Author

You are always welcome! πŸ™β€

Collapse
thunderstroke profile image
Levin

useful article.
Thanks

Collapse
madza profile image
Madza Author

Glad to hear that! πŸ’―πŸ‘

Collapse
lob profile image
Lob

Fantastic resource, thank you!

Collapse
madza profile image
Madza Author

My pleasure! πŸ™β€

Collapse
sadanandpai profile image
Sadanand Akshay Pai
Collapse
madza profile image
Madza Author

Thank you for your addition! πŸ‘βœ¨

Collapse
z2lai profile image
z2lai

Impeccable collection, you have most of my top picks in here!

Collapse
madza profile image
Madza Author

Thanks a lot, appreciated πŸ™β€

Collapse
hossain888 profile image
Hossain Ahmad

Amazing resources. Thanks a ton for sharing such good post. ❀️

Collapse
madza profile image
Madza Author

Makes me feel amazing to help others, thanks βœ¨πŸ‘

Collapse
majorth profile image
Todd H

Thanks for the resources!

Collapse
madza profile image
Madza Author

Happy to help! πŸ™β€

Collapse
rocampocastro604 profile image
Ricardo Ocampo

Excellent post, thanks πŸ‘

Collapse
madza profile image
Madza Author

You are always welcome, thanks! πŸ™β€

Collapse
sravanstg profile image
Sravan

Thank you! This is very helpfulπŸ‘ŒπŸ‘Œ

Collapse
madza profile image
Madza Author

My pleasure, thanks πŸ™β€

Collapse
artlevandoski profile image
Arthur E. Levandoski

Thank you so much for this collection!

Collapse
madza profile image
Madza Author

Always my pleasure! πŸ™β€

Collapse
netnarega profile image
narega net

Great content. thank you for sharing.

Collapse
madza profile image
Madza Author

Thanks a lot, its my pleasure! πŸ™β€

Collapse
miketech profile image
Mike

Thank you MadzaπŸ€©πŸš€

Collapse
madza profile image
Madza Author

My pleasure πŸ™β€