Now that I've been working with front-end web frameworks professionally for over 2 years, I can confidently say that I mostly know what I'm doing.
Through this journey I've come across many useful resources and websites that have been extremely valuable to my success.
Here is a list of useful resources that I recommend every front-end developer has bookmarked (especially for those new in the space 😊):
⒈ CSS-Tricks
This website has all things CSS, including articles, videos, and my favorite, the guides. Every time I'm designing UI, and forget how flexbox or grid works, I regularly come back to the guides on the subjects that provide fantastic visuals and simple explanations.
Always comes in handy.
⒉ cssreference.io
The name says what it is, but ccsreference.io isn't your old, boring documentation. They get straight to the point by showing many CSS properties in a neat and clean format that's easy on the eyes.
Each CSS property is given numerous examples right beside them to help you efficiently get the information you came for.
What else do you need from reference docs?
⒊ Coolors
Liven up your personal website with a unique and alluring color scheme. This website has grown ever since I started using it, but the main feature I use is creating your own palette (see above).
Experiment with random colors to find the combination that you like best and then use the provided hex colors to implement them in your own projects. Not only is this useful when working with front-end apps, but any time you're designing and styling anything.
⒋ Unsplash
We've all been there. You got to the point where you have all the scaffolding done for your app and you need to start adding content. It's easy to add "Lorem ipsum..." for text, but for images, you have to go through the process of Googling for images ensuring they're the correct size, free, ecetera.
Unsplash helps you by providing high-quality, "freely-usable" images that are easy to add to any project or blog (like this one 😀). When downloading images you can also choose the size (small, medium, large) to fit your need.
Amazing resource for every front-end app 💯.
⒌ Alligator.io
Alligator.io was a recent find for me. It's like a front-end technical blog with many contributors. The topics include React, Angular, Vue, CSS, JavaScript, etc.
Stay up-to-date on current technology trends along with guides and tutorials to level-up your front-end skills. Definitely worth a bookmark.
⒍ Awesome
What? A Github repo? Okay, calm down and explore the rest of the README to see the priceless resources this repo provides.
This is the end-all-be-all in resource lists. Basically, it is an endless, community-curated list of resources. And it isn't just one repo.
Here you can find other repos where people have their own topical "awesome" lists ranging from Nodejs and Python to ones about interview questions and design.
I shouldn't say this, but rather than searching through blogs like this (which I greatly appreciate btw 🙂), check out "awesome" because it has been curated over for years by many, many kind and knowledgable people
⒎ Brand Palettes
Brand Palettes is a database of brands and their colors. That's pretty much it. Nonetheless, it is an cool resource to have in your back pocket.
⒏ Documentation! 📄📄📄
To be honest, from all of the online material I have cycled through, there is (usually) no substitute for the actual documentation of whatever technology you're using.
For any technology you use (i.e. a framework, library, etc.), take some time and actually read their documentation. It's usually not too extensive and you will discover things about the product that you've never noticed before. Doing this will help you re-think your current, future, and past projects because of the ability to leverage a feature you never knew existed.
I've read through React, Angular, and React-Query docs (just to name a few) and continue to do so with other tools. Just trust me. You won't regret it.
Note: Some docs are great and some are terrible. Some are too complex and some are too simple. But, it is usually the most up-to-date and accurate information you can get.
It's very easy to read the docs and still not understand a topic. That's why I like using the docs as a roadmap for learning. Once I hit a topic I don't fully comprehend, I use other online resources like videos and articles to fill in the gaps. Then when I return to the docs, I get that "aha" moment we all love.
Conclusion
There are endless amounts of useful resources out there, so if you have any recommendations, let everyone know in the comments. I would love to add a few more bookmarks myself.
Oldest comments (39)
Nice tips, I didn't know some of those, so I will definitely check them out! Thanks 🙌
Appreciate it. Glad I could add some value 😁
Thanks. These really help
Awesome, glad to help!
Javascript.info is also great one
Priceless
Great curator!!!!
Appreciate it 💯
Thanks for sharing that realy helps
Another great alternative to Unsplash is Pexels.
Sweet. Thanks!
Dev.to 😝
Also install "daily.dev" extension in browser. On every new tab, you will see nice interesting articles.
Dev.to is pretty cool I guess 😏
Def gonna try daily.dev. Thanks!
Greaat ! Thanks
maybe, you'll find some help on our tools too.
Colorsandfonts.com
wickedbackgrounds.com
for Tailwind users
wickedblocks.dev
Sweet, thanks man! Gonna take a look at those.
welcome!
Great post. I really enjoyed it.
Thanks!
devdocs.io is super helpful when working with multiple languages and not wanting to have a ton of tabs open just for docs
Thanks!
Great thanks!
Also, what was that website where you can find many of these vector illustrations?
The title should be, "Bookmark these Websites (and this post) Now Only to Never Use the Bookmark!" JK, that's just usually what happens to my closet of bookmarks.
Although, some of the references and tools/apps are really worth re-visiting constantly, like the CSS tricks flexbox guide.
😂 I feel like that happens to all of us. Glad to add to that long list of bookmarks
Cool stuff, thanks