DEV Community

Cover image for Resources to help you practice web development
Cess
Cess

Posted on • Updated on • Originally published at cesscode.hashnode.dev

Resources to help you practice web development

Hello everyone! πŸ’™

I remember once reading somewhere that the best way to be good at web development is to always practice. To practice, you need challenges and ideas for side projects.

In this blog post, I have compiled a list of websites. These websites will provide challenges and ideas for us to practice web development.

let's get started πŸ’ƒ

1.
FrontendMentor

Solve real-world HTML, CSS, and JavaScript challenges whilst working on professional designs. Build projects, review code, and help each other get better.

Once you've completed your project, you can submit it for review and criticism. You can also review the works of other developers.

frame_chrome_mac_dark (4).png

Link to Frontendmentor website [https://www.frontendmentor.io]

2.
Codewel

Improve your HTML and CSS skills by practicing on real design templates.

Once you've completed your project, submit it to receive feedback on your solutions.

frame_chrome_mac_dark.png

Link to Codewell website [https://www.codewell.cc]

3.
Coderbyte

Helps you improve your coding with Algorithm, front-end, back-end, and database challenges. It also provides real-world interview kits to help you prepare.

frame_chrome_mac_dark (2).png

Link to Coderbyte website [https://coderbyte.com]

4.
Freecodecamp

FreeCodeCamp is an online learning platform that helps you learn and build projects.

frame_chrome_mac_dark (1).png

Link to Freecodecamp website [https://www.freecodecamp.org]

5.
Codepen

Weekly challenges for building things to level up your talents. Enroll in them and get picked and featured on the homepage.

frame_chrome_mac_dark (3).png

Link to codepen website [https://codepen.io/challenges]

6.
JavaScript30

30 Day Vanilla JS Coding Challenge. Build 30 things in 30 days with 30 tutorials.

frame_chrome_mac_dark (5).png

Link to Javascript30 website [https://javascript30.com]

7.
JavaScript Quiz

Check your knowledge by having fun with javascript questions. Detailed explanations included.

frame_chrome_mac_dark (6).png

Link to Javascript quiz website [https://javascriptquiz.com]

8.
Devchallenges

Enroll in awesome challenges and boost your skills by solving and building websites.

frame_chrome_mac_dark (7).png

Link to Devchallenges website [https://devchallenges.io]

9.
Codewars

Improve your development skills by training with your peers using coding challenges.

frame_chrome_mac_dark (8).png

Link to Codewars website [https://www.codewars.com]

10.
frontendpractice

Take your frontend skills to the next level by recreating real websites.

frame_chrome_mac_dark (9).png

Link to frontend practice website [https://www.frontendpractice.com]

11.
Cssbattle

Challenge yourself in building different shapes with CSS and level your skills.

frame_chrome_mac_dark (10).png

Link to CSS battle website [https://cssbattle.dev]

12.
100dayscss

Build something great for 100 days and take your CSS skills to next level. New challenges every day.

frame_chrome_mac_dark (11).png

Link to 100daysCSS website [https://100dayscss.com]

13.
Codementor

Improve your programming skills by working on real-world projects.

frame_chrome_mac_dark.png

Link to Codementor website [https://www.codementor.io/projects]

14.
Daily UI

Daily UI helps you become a better designer in 100 Days by working on different challenges.

Once you've completed your project, you can post it on dribble or Behance for review and criticism.

frame_chrome_mac_dark (1).png

Link to Daily UI website [https://www.dailyui.co]

15.
Codier

Explore and attempt front-end coding challenges.

frame_chrome_mac_dark (2).png

Link to codier website [https://codier.io]

16.
Ace Frontend

Ace Front-end has complete practical coding challenges for web developers. It also contains a well-detailed walk-through of perfect interview solutions.

frame_chrome_mac_dark (3).png

Link to Ace Frontend website [https://www.acefrontend.com]

17.
Exercism

Exercism helps you develop fluency in 55 programming languages. It also provides fun coding exercises that build your understanding of concepts.

frame_chrome_mac_dark (4).png

Link to Exercism website [https://exercism.org]

18.
Fun Javascript

A free series of fun Javascript, HTML & CSS projects.

frame_chrome_mac_dark (5).png

Link to fun Javascript website [https://fun-javascriptprojects.com]

19.
CSS Challenges

CSS challenges help you unleash your CSS Skills.

They have different options: Easy, medium, hard, and insane. Choose your level according to your strength.

frame_chrome_mac_dark.png

Link to CSS Challenges website [https://css-challenges.com]

CONCLUSION

Thank you for reading πŸ’™. If you would like to chat or have any questions drop them in the comments I'm always happy to talk.

If you found this article helpful, please like and share it πŸ’™.

That's all for today! 😁 You reached the end of the article 😍.

Discussion (18)

Collapse
ali_hassan_313 profile image
Ali Hassan

Great 😍

Collapse
cesscode profile image
Cess Author • Edited on

Thanks for Reading. Please like and share with your friends

Collapse
aditya_bachawad profile image
Aditya Bachawad

Thanks For Sharing
I was looking everywhere for this ...really Helpful πŸ’™

Collapse
cesscode profile image
Cess Author

I'm happy you enjoyed reading the article, please share with your friends

Collapse
cesscode profile image
Cess Author

Thanks for Reading. Like and share with your friends

Collapse
jlmurgas profile image
Jose Luis Murgas

You Rock! Thanks!!!!

Collapse
cesscode profile image
Cess Author

Thanks for Reading.. like and share with your friends

Collapse
vishal2369 profile image
Vishal2369

Javascript30's link is wrong.
correct one - javascript30.com/

Collapse
cesscode profile image
Cess Author

It was a mistake from my end.. I have fixed it already.. thanks for Reading ❀️

Collapse
mark_gaski_70a68e6ae41713 profile image
Mark Gaski

Good job !!

Collapse
cesscode profile image
Cess Author

Thanks for Reading mark

Collapse
eugenejerry profile image
Eugene N.I.

Great! Thanx for sharing

Collapse
jenningsf profile image
JenningsF

As a beginner, this is fantastic! πŸ™Œ

Collapse
cesscode profile image
Cess Author

Yeah... Thanks for Reading... Share with your friends ❀️

Collapse
send2abhishek profile image
send2abhishek

Great resources you have mentioned, thanks

Collapse
cesscode profile image
Cess Author

Thanks for Reading. Please like and share with your friends

Collapse
khalid_dev profile image
Khalid Mastor

Cool πŸ‘πŸΌ