DEV Community

Cover image for Projects with high-quality designs to practice your HTML, CSS, JS... skills

Posted on • Updated on

Projects with high-quality designs to practice your HTML, CSS, JS... skills

Hi folks!

After my last post about Knowledge Pills, you might think "What else would he prepare for us?" 👀

It turns out, I (ex Lead Frontend Developer) + UX/UI Designer are hard-working on the new Projects section. These will be perfect to practice and improve your skills. We're trying to provide high-quality designs after a technical review, there are some tips on how to start, recommended technologies, user stories, and more...

Our goal is to reach around 15 projects and sort them in difficulty level order, each of the projects should teach some real-world concepts and after completing all of them, you should have a strong Full-stack (Frontend/Backend) understanding of the modern technologies in your pocket.

Current projects:

Future projects (Hopefully we'll have most of them in March 😅)

  • movie search app with details page based on IMDB API
  • weather app based on some weather API
  • quiz app
  • level editor for e.g. Mario or any platformer game
  • real-time chat app
  • blog (multilanguage, etc.)
  • e-commerce store
  • mobile app (probably some game, or learning app)
  • portfolio (connecting all the previous projects)

And now the important part:
There are no tutorials for this, I included sections on how to start, recommended technologies but you can do it as you want, modify, upgrade design, add more features, mix technologies. It's just that design is high-quality and you can learn "real-world experience" as you would be working for a real company. As an e.g. Frontend Developer you often get a design (or sometimes need to create it on your own) and work around it.

I might introduce video series building these projects with my own solutions, I don't want to limit anyone of you, for now, take it as a real challenge.

Remember that learning by building projects is one of the most efficient ways you can boost your skills, take projects that scare you off, and overcome them.

And yes, learning to code is hard, you'll want to quit, survive and one day everything will "click" and that's when you'll start enjoying it to the max.

Once all the projects are there, I'll create a separate, more in-depth post introducing each of them and mentioning what you can learn from it, which technologies to use, etc.

Maybe more ideas will come out (feel free to throw one or two).

Happy coding!

I'm thinking about creating YT video series - building projects from my website, step-by-step, modern technologies, best coding practices with a thorough explanation.

If you enjoy the content and like the idea, Buy me a pizza.
Let's reach that goal together. 😊

Thanks for all the support!

Get in touch: Mentorship | Twitter | LinkedIn

Top comments (6)

thrtn85dev profile image
RaShunda Lanier

Added to my list of projects! Thanks!

ayoazeez26 profile image

Thank you for this!!!!

ngamsomset profile image
Brian Ngamsom

Sounds fun if have friends to build these stuff together!!

tebogonomnqa profile image
Tebogo Nomnqa

This is the kinda thing I was looking for. Thanks.

doug_horne profile image
Douglas Horne

Thanks for sharing!

migdall profile image
Jesus Noland

Following. These designs are great!