100+ websites to bookmark for your next dev/web project 👩‍💻
Tags: javascript, webdev, react, tutorial
Published: 2020-03-26 15:03:21

After some good [websites for UI design](https://dev.to/vaibhavkhulbe/bookmark-these-tools-websites-for-your-next-ui-ux-project-right-now-4132), I do have a huge collection of developer resources. I've been bookmarking these from the last 2-3 years and I hope they'll be useful. Whether you're just starting to code or if you just want to learn something new online, this list has it all. 

This time I've decided to break them down in categories as it will be difficult for everyone to go through 100 links one after another. Most of these are geared towards web development. 🌐

_Note: if you're reading this in future, find any link broken, then let me know in the comments or via [Twitter](https://twitter.com/vaibhav_khulbe). I want to keep this updated. Also, **bold** ones are my favourites._

---

![Excited GIF](https://media.giphy.com/media/rVbAzUUSUC6dO/giphy.gif) 
<figcaption>Let's jump in!🤩</figcaption>

---

## 🔖 Websites for Programming

1. [JetBrains Academy](https://hi.hyperskill.org/) 
2. **[Learn X in Y minutes](https://learnxinyminutes.com/)** 
3. **[30 seconds of code](https://www.30secondsofcode.org/) (_PWA_)**
4. [The Modern JavaScript Tutorial](https://javascript.info/)

## 🔖 Cheatsheets

1. [Cheatography: Programming Cheat Sheets](https://cheatography.com/programming/) 
2. **[Devhints](https://devhints.io/)**
3. **[OverAPI](http://overapi.com/)**
4. [📚 Linux commands manuals](https://manualsrepo.com/brands/linux/commands)

## 🔖 Open Source tools

1. [Google Open Source](https://opensource.google.com/)
2. **[Contribute.dev](https://contribute.dev/)**

## 🔖 Blogs and Articles

1. [Codementor](https://www.codementor.io/)
2. **[20 Top Frontend Developers Tools in 2020](https://medium.com/@shanikanishadhi1992/20-top-frontend-developers-tools-in-2020-78eeb1b2da5a)**
3. **[CSS Layout Tutorial, Step by Step](https://daveceddia.com/implement-a-design-with-css/)**
4. [Developer School](https://developer.school/)
5. [Flutter Awesome](https://flutterawesome.com/)
6. **[Upmostly](https://upmostly.com/)**
7. [React Libraries in 2020](https://www.robinwieruch.de/react-libraries)
8. [Flutter Clutter](https://www.flutterclutter.dev/). Thanks [@flutterclutter](https://dev.to/flutterclutter) for the suggestion.


## 🔖 Websites on UI and Design 
<center>Here's something I wrote earlier you UI designers...</center>

{% link https://dev.to/vaibhavkhulbe/bookmark-these-tools-websites-for-your-next-ui-ux-project-right-now-4132 %}

1. [Design Systems for Developers](https://www.learnstorybook.com/design-systems-for-developers/)
2. **[Creative Tim](https://www.creative-tim.com/)**
3. [HTMLstream](https://htmlstream.com/)
4. [HTMLTEMPLATES.CO](https://htmltemplates.co/)
5. [Cruip](https://cruip.com/)

## 🔖 Online courses/tutorials

1. [Laracasts](https://laracasts.com/)
2. [Codecourse](https://codecourse.com/) 
3. **[Vue Mastery](https://www.vuemastery.com/) (_PWA_)**
4. [Google Play Academy for App Success](https://playacademy.exceedlms.com/student/catalog)
5. **[GitHub Learning Lab](https://lab.github.com/)**
6. **[Qwiklabs](https://www.qwiklabs.com/)**
7. **[JavaScript 30](https://javascript30.com/)**
8. [Flutter Crash Course](https://fluttercrashcourse.com/)
9. [Chris Courses](https://www.chriscourses.com/)
10. **[Google Codelabs](https://codelabs.developers.google.com/)**
11. [Google Developers: Technical Writing](https://developers.google.com/tech-writing) _**(PWA)**_
12. **[Codrops](https://tympanus.net/codrops/)**
13. [Next.tech](https://next.tech/)
14. **[Level Up Tutorials](https://www.leveluptutorials.com/)**
15. [Flutter Tutorial by Cybdom Tech](https://cybdom.tech/)
16. **[GoRails](https://gorails.com/)**
17. [newline by FullStack](https://www.newline.co/#)
18. [Design+Code](https://designcode.io/)
19. **[How to GraphQL](https://www.howtographql.com/)**
20. [Thinkster](https://thinkster.io/)
21. **[egghead.io](https://egghead.io/)**
22. [Pusher Tutorials](https://pusher.com/tutorials)
23. **[Scrimba](https://scrimba.com/)**
24. **[What The Flexbox?!](https://flexbox.io/)**
25. [CSS Animation](https://cssanimation.rocks/)
26. **[Educative](https://www.educative.io/)**
27. [5 free Pluralsight courses](https://learn.pluralsight.com/resource/free-course/free-weekly-course)
28. [FlutterLearn](https://flutterlearn.com/)
29. **[Frontend Masters](https://frontendmasters.com/)**
30. [App Academy Open](https://open.appacademy.io/)

## 🔖 Coding Challenges

1. **[CodinGame](https://www.codingame.com/)**
2. [#100DaysOfCode](http://100daysofcode.com/)
3. **[Codewars](http://codewars.com/)**

## 🔖 Libraries/Frameworks

1. **[Glorious Demo](https://glorious.codes/demo)**
2. [docz](https://www.docz.site/)
3. [Slate Docs](https://docs.slatejs.org/)
4. [Magic Animations CSS 3](https://www.minimamente.com/project/magic/)
5. **[instant.page](https://instant.page/)**
6. [Awesome React](https://react.libhunt.com/)

## 🔖 Tools

1. **[Carbon](https://carbon.now.sh/) (_PWA_)**
2. [Android Starters](http://androidstarters.com/)
3. [Grow with Google](https://grow.google/)
4. [Rect Toolbox](http://react-toolbox.io/#/)
5. [Free Developer Software & Services - Visual Studio](https://www.visualstudio.com/free-developer-offers/)
6. **[GraphQL Editor](https://graphqleditor.com/)**
7. [Tiny Helpers](https://tiny-helpers.dev/)
8. [Neumorphism.io](https://neumorphism.io/) _**(PWA)**_
9. [Todo MVC](http://todomvc.com/)
10. **[.dev](https://get.dev/)**
11. [CSS Layout](https://csslayout.io/)
12. **[Make a smooth shadow, friend](https://brumm.af/shadows)**
13. [BrowserStack](https://www.browserstack.com/)
14. [UI Interactions](https://raphaelfabeni.com/ui-interactions/)
15. [CSSWAND](https://www.csswand.dev/)
16. [CSSeffectsSnippets](https://emilkowalski.github.io/css-effects-snippets/)
17. [webgems.io](https://webgems.io/)
18. [Screenzy](https://screenzy.io/) _**(PWA)**_

## 🔖 Misc

1. [devSwag](https://devswag.io/)
2. [Class Central](https://www.class-central.com/)
3. [Hackr.io](https://hackr.io/) _**(PWA)**_
4. [Applied CS Skills | Google For Education](https://appliedcsskills.withgoogle.com/)
5. **[Eloquent JavaScript](https://eloquentjavascript.net/)**
6. [TypeOfNaN JavaScript Quizzes](https://quiz.typeofnan.dev/) _**(PWA)**_
7. **[DevDocs API Documentation](https://devdocs.io/)**
8. [LearnAwesome.org](https://learnawesome.org/)
9. [Namecheap x Codecademy](https://codecademy.namecheap.com/)
10. **[roadmap.sh](https://roadmap.sh/)**
11. [Hero35](https://hero35.com/)
12. [Free Frontend](https://freefrontend.com/)
13. [CodeMyUI](https://codemyui.com/)
14. [Road to React](https://roadtoreact.com/)
15. **[Google Digital Unlocked](https://learndigital.withgoogle.com/digitalunlocked)**
16. [Git Explorer](https://gitexplorer.com/)
17. **[Hashnode](https://hashnode.com/)**
18. [Google Tech Dev Guide](https://techdevguide.withgoogle.com/)
19. [React Resources](https://reactresources.com/)
20. **[Reactiflux](https://www.reactiflux.com/)**
21. [API List](https://apilist.fun/)

### 🔖 And of course, the [DEV Community](https://dev.to/) (if you haven't bookmarked it already 🌝

![Work Done GIF](https://media.giphy.com/media/FACfMgP1N9mlG/giphy.gif)
<figcaption>My work is done here, and I can dance now 🕺</figcaption>

---

_Special mention to the [Frontend Mentor](https://www.frontendmentor.io/) website, they have really cool challenges and community!_

I hope you liked my collection of developer resources. If you have some good websites to bookmark, drop them down in comments. Maybe I do something similar for careers/jobs! (up next...👀). 

I hope you all stay safe in the current scenario, another great website to bookmark is **_[WHO's COVID - 19 website](https://www.who.int/emergencies/diseases/novel-coronavirus-2019)_**.

---

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Never shy away from documentation your code! Here are some super helpful tips for C#: <a href="https://t.co/HGwGzkUbcC">https://t.co/HGwGzkUbcC</a><br><br>Image source: <a href="https://t.co/kLPnTeZq8o">https://t.co/kLPnTeZq8o</a><a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Csharp?src=hash&amp;ref_src=twsrc%5Etfw">#Csharp</a> <a href="https://twitter.com/hashtag/Programming?src=hash&amp;ref_src=twsrc%5Etfw">#Programming</a> <a href="https://t.co/h0EueiGGeO">pic.twitter.com/h0EueiGGeO</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1242869865305780224?ref_src=twsrc%5Etfw">March 25, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.