DEV Community

loading...
Cover image for 8 Projects to Build to Master Your Front-End Skills πŸ₯‡πŸ†

8 Projects to Build to Master Your Front-End Skills πŸ₯‡πŸ†

Madza
Discussions. πŸ’¬ Tools. πŸ›  Resources. πŸ“š All things productivity. πŸŽ―πŸš€πŸ’―
Originally published at madza.dev ・5 min read

I've always believed that the best way to learn is by doing. Recruiters prefer practical projects over theoretical knowledge, as well.

Over the span of a year, I created 8 web app and game clones. I decided to share them, so community can get some inspiration to build as well.

In order to explore and compare how various front end solutions work, I tried to use different stacks, varying from Vanilla HTML to React, NextJS and Svelte.

For each project a link to deployed project as well as the source code will be provided. Give them a 🌟 on my GitHub if you like.


Calculator

enter image description here

πŸ’» Live project / πŸ”— Source on GitHub

First I wanted to create some practical app that each of us use in our daily routines. A calculator seemed to be a nice fit.

It has come in handy from time to time.

Features include:

  1. Add, subtract, multiply, divide
  2. Support decimal values
  3. Calculate percentages
  4. Invert the values
  5. Reset functionality
  6. Format larger numbers
  7. Output resize based on length

The project is written in React.

Weather App

enter link description here

πŸ’» Live project / πŸ”— Source on GitHub

With this next app my aim was to be able to check the weather conditions across the world. I used Openweather API to fetch data from their site.

To make it a bit appealing to the eye, I decided to combine it with some icon graphics that correspond to the conditions displayed.

Features include:

  1. Search functionality
  2. Metric vs Imperial system
  3. Current local time and date
  4. Temperatures and humidity
  5. Wind speed and direction
  6. Sunrise and sunset times

The project is written in NextJS.

Icons are taken from Flaticon.

Breakout

enter image description here

πŸ’» Live project / πŸ”— Source on GitHub

Breakout is an arcade game originally developed and published by Atari.

In Breakout, the goal is to destroy all the bricks at the top. A ball bounces off the top and two sides of the screen. When a brick is hit, the ball bounces back and the brick is destroyed.

The player loses a turn when the ball touches the bottom of the screen; to prevent this from happening, the player has a horizontally movable paddle to bounce the ball upward, keeping it in play.

Features include:

  1. Moving paddle + ball
  2. Bricks generation
  3. Collision detection
  4. Score keeping
  5. Level system
  6. Lives tracking
  7. Game over / Reset

The project is written in Svelte.

2048

enter image description here

πŸ’» Live project / πŸ”— Source on GitHub

2048 is a single-player sliding tile puzzle game initially written by Italian web developer Gabriele Cirulli in 2014.

It's played on a plain 4Γ—4 grid, with numbered tiles that slide when a player moves them using the four arrow keys. Every turn, a new tile randomly appears in an empty spot on the board.

The objective of the game is to slide numbered tiles on a grid to combine them to create a tile with the number 2048.

Features include:

  1. Slide tiles on X and Y axis
  2. Sum tile values on collision
  3. Color scheme for specific values
  4. Score keeping
  5. Best score memory
  6. Winner detection
  7. Game over / Reset

The project is written in Svelte.

Memory Game

enter image description here

πŸ’» Live project / πŸ”— Source on GitHub

Memory games comes in different forms and variations.

I decided to go with traditional approach, where users have to remember the positions of the cards and open two exact images sequentially to score points. Once all the cards are opened user is victorious.

I used Unsplash API to fetch images from their site.

Features include:

  1. Moves tracking
  2. Match percentage
  3. Win state detection
  4. Reset functionality

The project is written in Svelte.

Tic Tac Toe

enter link description here

πŸ’» Live project / πŸ”— Source on GitHub

Tic-Tac-Toe is a very popular two-player game, where users take turns marking 'X'es or 'O's in a 3Γ—3 grid. It's been played in different environments starting from classical pen and paper to many UI-different versions online.

The player who succeeds in placing three of their marks in a diagonal, horizontal, or vertical row is the winner.

  1. Built-in moves calculation
  2. Winner detection
  3. Reset functionality

The project is written in Svelte.

Rock Paper Scissors

enter image description here

πŸ’» Live project / πŸ”— Source on GitHub

Rock-paper-scissors originated in China and spread with increased contact with East Asia, while developing different variants in signs over time.

A player who decides to play rock will beat another player who has chosen scissors, but will lose to one who has played paper; a play of paper will lose to a play of scissors. If both players choose the same shape, it's a tie.

Features include:

  1. Round tracking
  2. Score keeping
  3. Choice display
  4. Computer selection
  5. Winner detection
  6. Reset functionality

The project is written in React.

Icons are taken from Icons8.

Landing Page

enter link description here

πŸ’» Live project / πŸ”— Source on GitHub

This landing page was created as a temporary placeholder for my personal domain while I was working on my portfolio. It's designed keeping simplicity in mind for both setup and UI.

Since I no longer host it on my personal domain, I decided to make a template from it, so other devs looking for a landing site could benefit as well.

I also made a tutorial on how to create it from a scratch.

Features include:

  1. Info about the dev
  2. Icons linking to social media
  3. Interactive hover effects

The project is written in HTML and CSS.

Icons are taken from Icons8.


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!
For more projects like these, check out my portfolio.

Discussion (55)

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 Author

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 Author

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

Thanks for reporting πŸ‘πŸ˜‰
I will take a closer look and fix it accordingly πŸ˜‰

Collapse
madza profile image
Madza Author

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 Author

Youre welcome πŸ™πŸ’–

Collapse
madza profile image
Madza Author

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 Author

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 Author

Awesome to hear πŸ‘πŸ˜‰

Collapse
michaelprimo profile image
Michael Primo

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

Collapse
madza profile image
Madza Author

Thanks a lot, glad you liked them πŸ™πŸ’–

Collapse
dicethedev profile image
Blessing Samuel

Thank you man!

Collapse
madza profile image
Madza Author

You are welcome! πŸ™πŸ’–

Collapse
dicethedev profile image
Blessing Samuel

I will be going with the weather APP

Thread Thread
madza profile image
Madza Author

It's actually the last one i made from all of these πŸ˜‰

Collapse
juanfabiorey profile image
juanfabiorey

Thank you!

Collapse
madza profile image
Madza Author

You are welcome πŸ™πŸ’–

Collapse
herberthk profile image
herberthk

Thank you for sharing

Collapse
madza profile image
Madza Author

My pleasure πŸ™πŸ’–

Collapse
hghandy profile image
HABIB ALIYU USMAN

Really Cool project

Collapse
madza profile image
Madza Author

Thanks a lot πŸ™πŸ’–

Collapse
josemyr1993 profile image
Josemyr SebastiΓ£o • Edited

I'm in, and many thanks;

Collapse
madza profile image
Madza Author

Happy to inspire people πŸ™πŸ’–

Collapse
hibeekay profile image
hibeekay1261

Thanks for this, they are amazing

Thread Thread
madza profile image
Madza Author

Thanks a lot πŸ˜‰

Collapse
paulayo93 profile image
Paul Oloyede

Great work!

Collapse
madza profile image
Madza Author

Thanks a lot πŸ™πŸ’–

Collapse
amtoya profile image
Amit Kulkarni

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

Collapse
madza profile image
Madza Author

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 Author

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 Author

You are welcome πŸ™πŸ’–

Collapse
shrihankp profile image
Shrihan Kumar Padhy

No To-do App, disappointed πŸ˜‚

Collapse
madza profile image
Madza Author

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

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 Author

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 Author

Thanks a lot πŸ™πŸ’–

Collapse
obaino82 profile image
Obaino82

Pretty good.

Collapse
madza profile image
Madza Author

Thanks a lot πŸ™πŸ’–

Collapse
iamhtmldeveloper profile image
Amol Bhandare

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

Collapse
madza profile image
Madza Author

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 Author

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 .