loading...
Cover image for 7 useful websites                      
every front-end developer          
should know about

7 useful websites every front-end developer should know about

satyampandey24 profile image Satyam Pandey ・3 min read

There are many websites on the internet for web developers but today I am going to show you some of my favorite and the best websites for the developers.

Let's get started🔥

1️⃣ Theodinproject

Alt Text

This is my personal favourite website in terms of learning web development. The Odin Project is open source and is the best for beginners or those who have tried other resources without success, who want to work as a web developer, do freelancing work, build a startup or learn to build a website. This site surely helps you to gain knowledge as it provides some great projects. The Odin project is more of a directory for learning than a real class. It tries to find and organize the best free resources around the net into an easy-to-follow curriculum for learning web development.

2️⃣ DEV Community

Alt Text
I consider my self very lucky that I have found this awesome dev-community website. Here one can read, write and explore the content and it is a great source for learning new things from different developers out there across the globe. So, this very useful website for all the developers.

3️⃣ CSS-tricks

Alt Text

Definitely check out this website because you can get lots of tweaks and tricks about the cascading style sheet(CSS). There are a whole bunch of articles, videos and books are available on their site. This is a great learning platform but its prerequisite is that one should atleast have the basic knowledge of CSS as it's better suited to someone who has already been introduced to CSS and is looking for more info on a specific topic or wants to discover new concepts.

4️⃣ 30secondsofcode

Alt Text

This website provides short code snippets for all your development needs and makes work easier in very less time. You can search by name, tag, language or using a snippet's description. It has Over 400+ code snippets. Just start typing a term and see what comes up. Click on each snippet card to view the whole snippet including code, explanation and examples. You can also use the button on the right side of a snippet card to copy the code to the clipboard.

5️⃣ Frontendmentor

Alt Text

Frontend Mentor is a must for those who are looking to practice and enhance their frontend skills. You'll get cool challenges to improve your skills. It's not only a great resource to learn real-life development skills but also to connect and network with other developers from around the world and to reviews your code and give meaningful feedback. The community is helpful and resourceful. There are lots of projects where you can showcase your talent by participating in many challenges and improve your development skills.

6️⃣ Codemyui

Alt Text

This website is very simple and it provides some awesome snippets which you can use in your projects. CodeMyUI is a really cool repository for CSS snippets, HTML elements and Javascript snippets. All the sections categorize with different UI designs and contain all bunch of different web elements and snippets.

7️⃣ Shortcuts

Alt Text

Shortcuts.design is a small website that lists every shortcut a designer ever wants to know, all design apps in one place, and in a simple and clear way. It's very useful for new designers to quickly charge their workflow, when you switched to a new design tool or when you just want a reference for repeating actions! I use this website very frequent as it eases my workflow and I recommend you all to give a glance to this site.

Let's end here

I have given you a brief idea about the above-mentioned sites but you can go through each site and explore and you will not regret after spending your valuable time there.

Hope you enjoy it🙇

THANK YOU!!😊

Hi there 👋

  • 😄 Shift the ctrl to us, we will alt the world.
  • 👨‍💻 Frontend Developer | UI&UX
  • 🌱 I’m currently learning react.js (javascript framework)
  • 🔭 Hard worker who likes blogging💻, Travelling🗺️, and music🎶



Discussion

pic
Editor guide
Collapse
tracycss profile image
Jane Tracy 👩🏽‍💻

Great resources. I will check out 30 seconds of code. 🌟💯

Collapse
satyampandey24 profile image
Satyam Pandey Author

Thanks 😊

Collapse
bmkiyv profile image
Michael

If you want to play, you can check codecombat.com/

Collapse
corde177 profile image
Cordeiro Luís

Uma boa fonte para aprimorar os conhecimentos ✌️✌️

Collapse
designeranna1 profile image
Designer Anna

Nice collection.
Plz, tell me about the GitHub Card you added at the end of your article.
How can one add it to their DEV article?

Collapse
satyampandey24 profile image
Satyam Pandey Author

Thanks :) You can check out liquid tags as it let you to add rich content such as Tweets, YT videos, GitHub repos and many more.

Collapse
designeranna1 profile image
Designer Anna

Thanks...!
Do you have an article on Liquid tags?

Thread Thread
satyampandey24 profile image
Satyam Pandey Author

No, but you can check out article Changelog: Github Repo & Glitch Liquid Tags by Jess Lee

Collapse
redlotusdesignz profile image
Diana Chin

This is a wonderful list of resources. Thanks for sharing!

Collapse
satyampandey24 profile image
Satyam Pandey Author

Thank you 😊

Collapse
lincarters profile image
Lin Carters

Brilliant, hadn't come across most of these before. Thank you.

Collapse
dkm94 profile image
dkm94

Very helpful, thanks!