Hello everyone! Today, I’ve got 5 websites that every frontend developer, and even other programmers, should know about. These are the sites I personally use everyday, and I think you’ll love them too. So, let’s dive in!

By the way, if you're a visual reader, you can also watch the YouTube video I made.

1. MDN Web Docs

🔗 Link: https://developer.mozilla.org/en-US/

Let’s start with MDN Web Docs. I think for frontend developers, MDN Web Docs is one of the best resources out there in terms of documentation.

MDN covers basically pretty much everything in web technologies, including HTML, CSS, and JavaScript.

💡 Fun Fact: Even VS Code uses MDN as a reference for code suggestions.

Oh, btw, Do you know what does MDN stand for? It’s the Mozilla Developer Network. Yep, the same company that created the Firefox browser. 🦊

2. Carbon

🔗 Link: https://carbon.now.sh/

Now, we’ve covered the documentation, let’s talk about writing beautiful code. Ever wanted to share a piece of code you’re proud of on a social media or your blog, but it looks ugly? Don’t worry! Because Carbon is here to fix it. 🎨

Carbon lets generate beautiful images of your code. In this website, you can tweak pretty much everything - the theme, background, font, spacing and etc.

It’s a great tool to make your code look shiny on social media.

3. CanIUse.com

🔗 Link: https://caniuse.com/

Ever come across a new CSS feature, only to find out that it works on your computer, but not your phone or vice verse. This is where caniuse.com can be very useful. Basically, it helps you check what browsers support this new feature. 🔍

I remember waiting for ages for the full support for Flexbox’s gap property and now it’s supported in almost 95% of browsers.

Next time, you see a new feature, always make sure to check it in this website before using it in your projects.

4. Realtime Colors

🔗 Link: https://www.realtimecolors.com/

Now, let’s talk about design. Before starting a new project, it’s important to choose colors carefully. Otherwise, it can ruin the user experience. With Realtime Colors, you can visualize color palettes in real-time and see how they’d look on a website. 🎨

You can either choose a color palette you have in mind or just keep pressing the Spacebar until you find the one you like. Once done, you can copy the colors or download it into your computer. Definitely a great tool!

5. Favicon.io

🔗 Link: https://favicon.io/

Last but not least, let’s not forget about little details—like your site’s favicon! You know, that tiny logo that appears in the browser tab. With Favicon.io, you can generate those tiny logos from simple text, an image, or even an emoji. It’s quick, easy, and a great way to personalize your website. 👨🏻‍💻

And there you have it. If you have other websites you use on a daily basis, feel free to write them in the comments. Who knows, I might make a video/post about them in the future! 💬