DEV Community

Cover image for Bookmark These 8 Front-End Websites Now!
Jordan Burroughs
Jordan Burroughs

Posted on • Updated on

Bookmark These 8 Front-End Websites Now!

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

CSS Tricks Logo

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

css reference logo

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

Coolors Example

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

Unsplash Homepage

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 Logo

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

Awesome Logo

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

Google Brand Palette

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.


Thanks for reading! If you want more tech tips, software stuff, and bussin' blogs, you can throw me a follow on Twitter🔥🤘🏽🐶

Discussion (40)

Collapse
blaubrink profile image
blaubrink

Another great alternative to Unsplash is Pexels.

Collapse
jburroughs profile image
Jordan Burroughs Author

Sweet. Thanks!

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
sumitsood3127 profile image
sumeet sood

Javascript.info is also great one

Collapse
dben0817 profile image
Dean • Edited on

devdocs.io is super helpful when working with multiple languages and not wanting to have a ton of tabs open just for docs

Collapse
jburroughs profile image
Jordan Burroughs Author

Thanks!

Collapse
mike_andreuzza profile image
Michael Andreuzza

maybe, you'll find some help on our tools too.

Colorsandfonts.com
wickedbackgrounds.com

for Tailwind users

wickedblocks.dev

Collapse
jburroughs profile image
Jordan Burroughs Author

Sweet, thanks man! Gonna take a look at those.

Collapse
mike_andreuzza profile image
Michael Andreuzza

welcome!

Collapse
z2lai profile image
z2lai

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.

Collapse
jburroughs profile image
Jordan Burroughs Author

😂 I feel like that happens to all of us. Glad to add to that long list of bookmarks

Collapse
rupesh99201 profile image
Roopesh Singh

Thanks for sharing that realy helps

Collapse
ihtesham_haider profile image
Ihtesham Haider

These all are amazing, but I use devdocs.io for Code references. They has everything...

Collapse
jburroughs profile image
Jordan Burroughs Author

Love it. Thanks

Collapse
raj_sekhar profile image
Raj Sekhar

Dev.to 😝
Also install "daily.dev" extension in browser. On every new tab, you will see nice interesting articles.

Collapse
jburroughs profile image
Jordan Burroughs Author

Dev.to is pretty cool I guess 😏
Def gonna try daily.dev. Thanks!

Collapse
meyermarco profile image
Marco Meyer

Very helpful…

Collapse
iamchiranjeevin profile image
Chiranjeevi

Thank you!

Collapse
harrykayneezy profile image
Hisoka🃏

🔥

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

Nice tips, I didn't know some of those, so I will definitely check them out! Thanks 🙌

Collapse
jburroughs profile image
Jordan Burroughs Author

Appreciate it. Glad I could add some value 😁

Collapse
foxy4096 profile image
Aditya Priyadarshi • Edited on

8 hrs of debugging saves 5 minutes of reading documentation, hehe

BTW nice article 🐱

Collapse
khajin1 profile image
evalPenny

Cool list of front-end websites!

Collapse
5th profile image
Marius

the only thing I'll be bookmarking is this awesome post 😎👌

Collapse
jburroughs profile image
Jordan Burroughs Author

😎

Collapse
riperfish profile image
RiperFish

Cool stuff, thanks

Collapse
oludayodav profile image
oludayodav

Nice one.....

Collapse
ganwani_kamal profile image
kamal ganwani

nice collection

Collapse
sirmong profile image
Klim

Nice compilation. Thank you!

Collapse
coolscratcher profile image
CoolScratcher

Great post. I really enjoyed it.

Collapse
jburroughs profile image
Jordan Burroughs Author

Thanks!

Collapse
agbekofrank profile image
agbekofrank

Great curator!!!!

Collapse
jburroughs profile image
Jordan Burroughs Author

Appreciate it 💯

Collapse
said_mounaim profile image
Said Mounaim

Greaat ! Thanks

Collapse
ifierygod profile image
Goran Kortjie

Priceless

Collapse
adeleye116 profile image
Ahmed Original ⚪

Thanks. These really help

Collapse
jburroughs profile image
Jordan Burroughs Author

Awesome, glad to help!

Collapse
ch3ckmat3 profile image
Sohail Iqbal

Great thanks!

Also, what was that website where you can find many of these vector illustrations?

Collapse
levi2ki profile image
Andrew Makarov

Awesome is awesome🤩🤩 Thanks!

Collapse
eldiablo profile image
yamba

merci frère sang