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πŸ”₯🀘🏽🐢

Top comments (40)

Collapse
 
blaubrink profile image
blaubrink

Another great alternative to Unsplash is Pexels.

Collapse
 
jburroughs profile image
Jordan Burroughs

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

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

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

πŸ˜‚ 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
 
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

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

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

Love it. Thanks

Collapse
 
iamchiranjeevin profile image
Chiranjeevi

Thank you!

Collapse
 
harrykayneezy profile image
Harry K.

πŸ”₯

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

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
 
5th profile image
Marius

the only thing I'll be bookmarking is this awesome post πŸ˜ŽπŸ‘Œ

Collapse
 
jburroughs profile image
Jordan Burroughs

😎

Collapse
 
riperfish profile image
RiperFish

Cool stuff, thanks

Collapse
 
oludayodav profile image
oludayodav

Nice one.....

Find and follow new tags! πŸ€” Did you know? Β  DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags