How to manage your bookmarks! (Resources 2/3)

Photo by  Ben White  on  Unsplash

Photo by Ben White on Unsplash

This the follow-up post to my Resources 1/3 post.

The aim is to provide you guys with valuable links to use in your coding-learning activities.

In the first post we covered the basics and essentials, sort of the "101" links you should always have open in a tab somewhere. If you don't know yet, here's how to "pin" a browser tab so that your link stays open no matter what.

By now, if you haven't done so, I'd encourage you to start organizing your bookmarks into categories.

Personally, here's how I do. 

Part 1

The first set of folders I have in my bookmarks is sorted by languages:

  • HTML
  • CSS
  • JavaScript / jQuery
  • React

Inside each "language folder" I have the following sub-folders:

  • Documentation/Docs

This is where I keep important links such as MDN pages on specific methods or prototyping for JS, or references to sections of the Facebook React Github docs for React.JS.

I started with a single 'Docs' folder to keep all my important MDN links together but it quickly became too crowded and I could not tell apart one from the other so now I like to separate those by language. It makes more sense. You'll often be stuck on a script while building a function, thinking "damn how does that .map() method works already?" so you might event want to have like 'Functions' sub-sub-folder if you find yourself browsing that a lot.
Remember that a bookmark should only be one if the relevant page takes more than 2/3 sec to be Googled. :)

The second subfolder I have in each language foder is

  • Articles

There are tons of great articles out there on the direction each environment is taking, how JS is evolving into ES7? How React is changing the way we 'think' and 'organize' our code? Which version of Angular will finally be stable and consistent (aha)? This is where you can keep track of the major changes hitting the front-end ecosystem.

Best practice in my opinion is to keep that one at the bottom of your languages folders so that they're not visually competing with the useful stuff you'll be searching when you work but be sure it's accessible as it's still nice to keep an overview on how things are evolving out there.

  • Tutorials

Tutorials are great, especially if you're a visual learner like me, I can read something 10 times without grabbing it really, but if I can try on my own or see someone doing it live, it helps a lot!

Since YouTube doesn't really have a great way to organize and manage your playlists (creating subfolders in YouTube would soooooo great 😍), I often have to dog past vegan recipes and Bowie concerts to get my hands on that specific "React + Firebase Tutorial"...

A little Space Oddity in the back doesn't do any harm still 🚀

Part 2

Moving on now, the second set I have is all my learning resources.

  • Learning resources

This one of course will depend on how you learn online, which sites you use if you use any. Among many others, I keep the following ones bookmarked:

  • Teamtreehouse
  • FreeCodeCamp ❤️
  • Udemy
  • CodeSchool
  • Udacity
  • CodeAcademy

Some such as FCC or TT will have a dedicated forum/blogging section so sometimes, some of those links can be moved into the afore-mentioned 'Tutorials' or 'Articles' folders based on your individual needs and/or preference.

I also like to keep my Gitter help chat rooms from FCC bookmarked there. I use Slack at work and keep my personal bookmarks separate from my work-ones (Thank you Google Chrome).


Part 3

This is probably the largest section. I started creating a Resources folder with everything in it but found myself having to go through the all thing just for a specific font so I like to have the following now:

  • Fonts

This is such and important resource. A good font will often make the difference between a bad-looking page and a great one. Building a page with the default browser font is a crime. Seriously.

You don't have to be a designer or anything to pick a great font. In most cases, using Lato or Roboto from Google Fonts is already a great improvement over a default font. If you can spend some time on that aspect though, please do. Your projects will look more complete and potential employers will see that you're not only a code-generator. 🤓

Here are some links I keep in my 'Fonts' folder:

  • Google Fonts: Free and essential, easy to use too.
  •  Helps you identify a specific font using a URL or an image file.
  • DaFont: Free fonts.
  • LostType Co-Op: If you're looking for something a bit more hype and trendy. Those fonts are paid ones but 100% of the price goes into the designer's pocket. ✊🏻
  • Letterhead Fonts: Rare and unique old typefaces.
  • Futuracha Pro: ... that's my personal addition to the list. A font that evolves as you type it...

More great font-links here, here and here.

  • Colors

This is such and important resource. A good color will often make the difference between a bad-looking page and a great one. Building a page with a "darkslategrey" or a "hotpink" background-color is a crime. Seriously. 🤔

Here are my top links for picking gorgeous palettes for my projects:

  •  Helps you visualize how colors work in CSS. You can pick a color and tweak its different settings.
  • Flat UI Color Picker: The name is quite self-explanatory. This web app will help you pick a color depending on various shades.
  • Color-Hex: That one's always open in a pinned tab. So useful! Provides you with a wide range of color palettes. Pretty neat if you want to replicate popular websites.
  • Flat Colors: Like Color-Hex, Flat-Colors can help you pick a color palette when you're lacking inspiration on a project.
  • HTML Color Names: Even though they should not be used extensively; HTML built-in colors can help for a quick fix when prototyping a page.

  • LOL Colors: Because I'm a big fan of McKenzie Child, I can only recommend you check out his color palette tool!


  • Images / Photos

This is such and important resource. A good ...

Ok, I think you get the point.

Here are my favorite sites for free pictures and photos:

  • Unsplash: Great site with tons of not only free to use visuals but some photos are simply stunning.
  • Pexels: Probably a step down in terms of quality compared to Unsplash but the quantity is there.
  • Vexels: Same as Pexels but for vector graphics.
  • Shutterstock: Although the best picks are obviously paid, Shutterstock has some free pics too.
  • Pixabay: Some sorting needed but good overall resource.
  • Canva: Canva deserves to be at the very top of your bookmark list. It's an online graphic editing tool that allows to create custom-size graphic elements (banners, buttons, frames, info graphics, etc.) and export those onto your computer. How neat is that. Huge time-saver if you have a precise idea in mind.
  • Material Design Icons: Great resources for icons.
  • Font Awesome: Another great resource for icons. Easy to use and endlessly scalable in terms of resolution. Those will always look great and will give q consistent look to your social icons and menus. They're releasing v5 which seems to be packed with tons of new stuff!
  • Material Design Guidelines:  Not to be mistaken with the font link above. This is packed with Google's own recommendations and tools to get familiar with the material UI elements and layouts Android introduced.


  • Github Repos

Your repositories and other's should be kept at hand to be quickly consulted. I keep each repo alongside the corresponding Github page to check/share. 

  • Editor/Utilities

Many useful links on the Internet for front-end developers:

  • Placeholder: This tool will generate a placeholder image with the size of your choice. Pretty useful when prototyping. I personally have those inserted inside Bootstrap-styled cards to quickly flesh out a layout.
  • Lorempixel: This will generate an image with the given specs.
  • Unsplash.It: Unsplash (see above) has its own placeholder generator.

For more placeholders, check out this great link.

Some other great links:

  • Babel Compiler:  If you're learning React like me now, you will spend a copious of time on this one. It will allow you to understand ES6 / JSX syntax more clearly.
  • Type Terms: Type Terms is the perfect tool for designers to learn the basics of typographic terminology. If you are new to typography or here to refresh your memory, then Type Terms is perfect for you.
  • Know it all: How much do you know? Check it out. 🤓
  • Motherfucking Website: ....
  • Responsive Web Design Patterns: A collection of patterns and modules for responsive designs.
  • CodeBeautify: Huge list of online tools to test your code.

That's about it!

Let me know what you think in the comment section.