DEV Community

Cover image for 7 useful websites                      
every front-end developer          
should know about
Satyam Pandey
Satyam Pandey

Posted on

7 useful websites every front-end developer should know about

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๐ŸŽถ



Top comments (10)

Collapse
 
tracycss profile image
Jane Tracy ๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป

Great resources. I will check out 30 seconds of code. ๐ŸŒŸ๐Ÿ’ฏ

Collapse
 
satyampandey24 profile image
Satyam Pandey

Thanks ๐Ÿ˜Š

Collapse
 
corde177 profile image
Cordeiro Luรญs

Uma boa fonte para aprimorar os conhecimentos โœŒ๏ธโœŒ๏ธ

Collapse
 
bmkiyv profile image
Michael

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

Collapse
 
satyampandey24 profile image
Satyam Pandey

Thank you ๐Ÿ˜Š

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 • Edited

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 • Edited

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

Collapse
 
dkm94 profile image
dkm94

Very helpful, thanks!