DEV Community

Cover image for 8 Projects to Build to Master Your Front-End Skills 🥇🏆

8 Projects to Build to Master Your Front-End Skills 🥇🏆

Madza on August 05, 2021

I've always believed that the best way to learn is by doing. Recruiters prefer practical projects over theoretical knowledge, as well. Over the sp...
Collapse
 
planktonfun profile image
PAULO JOSE Q CASTRO • Edited

I'm at the point where you take a look at the picture animation, and already know how its done, then have a head ache later of how much time you'll spend making it responsive.

Collapse
 
madza profile image
Madza

I usually code desktop-first, that's why I need to fix some of them for that too 😀😀Should probably swith to mobile-first in the future 😉

Collapse
 
rezahussain profile image
Syed Ali Reza Hussain

Ahh, not being the only one makes me feel so good

Collapse
 
madza profile image
Madza

We are all into this tohether 😀😀

Collapse
 
dionnestratton profile image
Dionne Stratton

I can't wait to give these a go! However... the memory match breaks after a bit. I was having fun playing when it got stuck on "no match" and would unflip my first flipped card when I clicked a second, leaving the second flipped until I clicked another never giving me credit for a match. Even reloading the page only fixed it for a couple guesses. I hope that made sense.

Collapse
 
madza profile image
Madza • Edited

Thanks for reporting 👍😉
I will take a closer look and fix it accordingly 😉

Collapse
 
madza profile image
Madza

Should be fixed now 😉

Collapse
 
mriduldey profile image
Mridul Dey • Edited

Very nice Projects for learning and beautiful UI, I have created my own version of memory game too ;).
mriduldey.github.io/flipflop/
If you are interested check this out

You can found the code in my GitHub repo

Collapse
 
suntong profile image
suntong

Yeah, awesome for training visual memory.

Just I found the logic have loopholes, and there will be single card remain flipped forever.

Collapse
 
mriduldey profile image
Mridul Dey

Ya you are right, I have seen it too. I need to fix that. Thank you for notifying it ☺️.

Thread Thread
 
madza profile image
Madza

Youre welcome 🙏💖

Collapse
 
madza profile image
Madza

Thats an awesome one for training visual memory 👍
You should make the game itself as wide as the time-tracking bar above, so it is easier to see and remember 😉

Collapse
 
mriduldey profile image
Mridul Dey • Edited

Thanks for watching Madza. I will keep it in mind. Although giving the whole time will be little more but defenetly I need to improve the time algorithom according to the number of tiles. Currently it is almost impossible to solve more than 4 * 4 tiles board.

Collapse
 
edobasky profile image
edobasky

A quick question.....when you take on these projects......do yu build them from scratch on your own or you follow up on other people's project to build ,then later you try building on your own?..thanks

Collapse
 
madza profile image
Madza

Each one is built from scratch 😉 I believe that the best way to learn is to try to do it by yourself 😉 It might take you 10x more time, but the process of tackling the problems independently is worth it as you learn from trial and error and develop the critical thinking 😉

Collapse
 
dicethedev profile image
Blessing Samuel

Thank you man!

Collapse
 
madza profile image
Madza

You are welcome! 🙏💖

Collapse
 
dicethedev profile image
Blessing Samuel

I will be going with the weather APP

Thread Thread
 
madza profile image
Madza

It's actually the last one i made from all of these 😉

Collapse
 
michaelprimo profile image
Michael Primo

Good projects! GG :) I made something too for my website!

Collapse
 
madza profile image
Madza

Thanks a lot, glad you liked them 🙏💖

Collapse
 
avinashvagh profile image
Avinash Vagh

Nice stuff !!👌🔥

Collapse
 
madza profile image
Madza

Awesome to hear 👍😉

Collapse
 
shrihankp profile image
Shrihan

No To-do App, disappointed 😂

Collapse
 
madza profile image
Madza

Crossed my mind couple of times 😀😀

Collapse
 
juanfabiorey profile image
juanfabiorey

Thank you!

Collapse
 
madza profile image
Madza

You are welcome 🙏💖

Collapse
 
herberthk profile image
herberthk

Thank you for sharing

Collapse
 
madza profile image
Madza

My pleasure 🙏💖

Collapse
 
hghandy profile image
HABIB ALIYU USMAN

Really Cool project

Collapse
 
madza profile image
Madza

Thanks a lot 🙏💖

Collapse
 
josemyr1993 profile image
Josemyr Sebastião • Edited

I'm in, and many thanks;

Collapse
 
madza profile image
Madza

Happy to inspire people 🙏💖

Collapse
 
hibeekay profile image
hibeekay1261

Thanks for this, they are amazing

Thread Thread
 
madza profile image
Madza

Thanks a lot 😉

Collapse
 
paulayo93 profile image
Paul Oloyede

Great work!

Collapse
 
madza profile image
Madza

Thanks a lot 🙏💖

Collapse
 
amtoya profile image
Amit Kulkarni

Nice work Madza. Looking forward to give it a go 😊

Collapse
 
madza profile image
Madza

Thanks a lot 🙏💖 Best of luck with everything 😉

Collapse
 
mujanati13 profile image
Mohamed Janati

we wanna resours for learn node js

Collapse
 
madza profile image
Madza

Might do some in the future 😉
Closest one I currently have is chat app, it's also open source so feel free to check out if you like 😉

Collapse
 
michelleann815 profile image
Michelle Ann Terrazas

Thank you for the awesome ideas! I'll keep this list in mind when I think about making my own solo projects :)

Collapse
 
madza profile image
Madza

You are welcome 🙏💖

Collapse
 
sokirill profile image
Kirill

Love it man! Did you also make tutorials how to create the games and other projects?

Collapse
 
madza profile image
Madza

Not yet, tho I might consider it in the future 😉👍

Collapse
 
rezahussain profile image
Syed Ali Reza Hussain

This was a really nice read.

Collapse
 
madza profile image
Madza

Thanks a lot 🙏💖

Collapse
 
obaino82 profile image
Obaino82

Pretty good.

Collapse
 
madza profile image
Madza

Thanks a lot 🙏💖

Collapse
 
iamhtmldeveloper profile image
Amol Bhandare

Nice work..... and thank you sharing your knowledge with us

Collapse
 
madza profile image
Madza

Awesome you liked it 🙏💖
I believe we are all learning by sharing 👍

Collapse
 
invincible1388 profile image
Vilash Varghese

None of the projects mentions any form implementation.

Collapse
 
madza profile image
Madza

I might do some tutorials in the future 😉
Thanks for the recommendation! 🙏💖

Collapse
 
micahbala profile image
Micah Bala

Nice projects to help strengthen your frontend skills, I have done the memory game with vanilla JS, will convert it to react, and consider doing the weather app.

Collapse
 
hat52 profile image
Hamza Ali

Ahhh nice .. will give them a shot .