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
ย 
avinashvagh profile image
Avinash Vagh โ€ข

Nice stuff !!๐Ÿ‘Œ๐Ÿ”ฅ

Collapse
ย 
madza profile image
Madza โ€ข

Awesome to hear ๐Ÿ‘๐Ÿ˜‰

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
ย 
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
ย 
contourintegral profile image
โˆฎ โ€ข

No To-do App, disappointed ๐Ÿ˜‚

Collapse
ย 
madza profile image
Madza โ€ข

Crossed my mind couple of times ๐Ÿ˜€๐Ÿ˜€

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
ย 
juanfabiorey profile image
juanfabiorey โ€ข

Thank you!

Collapse
ย 
madza profile image
Madza โ€ข

You are welcome ๐Ÿ™๐Ÿ’–

Collapse
ย 
rezahussain profile image
Syed Ali Reza Hussain โ€ข

This was a really nice read.

Collapse
ย 
madza profile image
Madza โ€ข

Thanks a lot ๐Ÿ™๐Ÿ’–

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
ย 
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
ย 
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
ย 
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
ย 
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
ย 
paulayo93 profile image
Paul Oloyede โ€ข

Great work!

Collapse
ย 
madza profile image
Madza โ€ข

Thanks a lot ๐Ÿ™๐Ÿ’–

Collapse
ย 
hghandy profile image
HABIB ALIYU USMAN โ€ข

Really Cool project

Collapse
ย 
madza profile image
Madza โ€ข

Thanks a lot ๐Ÿ™๐Ÿ’–

Collapse
ย 
herberthk profile image
Kavuma Herbert โ€ข

Thank you for sharing

Collapse
ย 
madza profile image
Madza โ€ข

My pleasure ๐Ÿ™๐Ÿ’–

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 .

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! ๐Ÿ™๐Ÿ’–