DEV Community

Cover image for 10 Projects to master Frontend & Web Development

10 Projects to master Frontend & Web Development

Adrian | Founder of BigDevSoon on July 27, 2024

Introduction Learning by hands-on code from day 1 is one of the coolest methods of getting into coding, each time you move a small step,...
Collapse
 
tomasdevs profile image
Tomas Stveracek

Great selection of projects to enhance frontend skills! πŸš€

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Awesome, glad to hear you like it! πŸ™‡

Collapse
 
anasizhere profile image
Anas Khan

While they are maybe good for beginners to have hands on but they are not worth it to add to the resume imo.

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

IMO depends how many cool, unique features you add to them and e.g. cover with e2e testing, units, integration tests, etc. Imagine extending todo app to be realtime app with sign in system where people can share their lists, collaborate in groups, you get the idea. I agree that the β€žbasic version” of these projects might be too little for resume but adding a unique extension can overcome that gap and make it resume worthy.

Collapse
 
anasizhere profile image
Anas Khan

We are talking about resumes right? We won't be mentioning the features that we added to the project. It would be still a Todo list on the resume.

Hope you get my point.

Thread Thread
 
bigsondev profile image
Adrian | Founder of BigDevSoon • Edited

We could, throwing a title and a link to the project only without any additional details seems a bit sus in the resume anyways. Adding quick summary + highlighting unique features, e.g. β€žUsed websockets (socket.io) for real-time collaboration” or mentioning tech. stack which is in demand gives totally different impression than just writing β€žtodo app”, I think we should stop tunnel visioning, emphasizing on what you built can give better results as when recruiter looks up the resume for example they could look for tech. stack you used for a project, so yeah even todo app could stand out. Hope you get my point and just to add up on this, I’ve been a tech. recruiter in many companies so all of this are valid points, trust me. πŸ˜€

Collapse
 
oyefolucodewizard profile image
Oyefolu Toyyib Adeyemi

Good timing, this is what I've been looking for. Thanks πŸ‘.

Collapse
 
paulsanjay81 profile image
Sanjay Paul

Hey Adrian! This list of projects is awesome! I love how each project covers a different aspect of frontend development while keeping things fun and engaging. I’m especially excited about the Pokedex and Music Player ideasβ€”those sound like great ways to level up my skills and add some cool features to my portfolio. Thanks for sharing these and the helpful resources with us.

Collapse
 
axorax profile image
Axorax

Great post! Can tell it took a lot of time and effort to make!

Collapse
 
utsav_at_work profile image
Utsav Tayde

I am assuming many people must be doing these same projects as beginners which makes them very common. So, does it really help my resume to stand out?

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

I’ve seen tons of β€žtodo apps” projects on resumes that were executed poorly but just a few that had a modern in demand tech. stack, tests coverage, smart boilerplate, good README (talking about GH repo in general) and of course the UX/UI of it, RWD, it’s super easy to tell how much effort one puts in their projects, market is tough and sure you can try standing out by building a super unique, niche product/project but if it’s still executed poorly it will make no difference at all. Again, it’s tough but if you execute well, no bugs, perfect it, good documentation, a sharp eye of a recruiter can catch these details IMO. I’m not saying to keep all these projects in resumes as you can just practice on them, add your unique variation and then put something else on your resume but if it’s done well, that will def. help to stand out, does that make sense?

Collapse
 
utsav_at_work profile image
Utsav Tayde

Yeah... It does. Thanks!

Collapse
 
kagayo profile image
Joffrey Kagayo

Thank you.

Collapse
 
danwe_basga_90b02c4bc5d30 profile image
Danwe Basga

Cool. How about a real estate web app like Zillow or RedFin?

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Nice idea, will add it to the list for future projects!

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

And yet another set of 10 projects πŸš€ My fav. is Pokedex, it is such a cool project!

Collapse
 
i-sultan0 profile image
Sultan Akhter

Nice set of projects, really liked the last one.

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Glad to hear that!

Collapse
 
cristiansbardelotto profile image
Cristian Sbardelotto

The last one is such a great and different idea!

Collapse
 
serhiyandryeyev profile image
Serhiy

great list, thnx!

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Awesome, you are welcome, sir!

Collapse
 
uttam_py profile image
Uttam Sharma

These projects are amazing to enhance frontend skills.

Collapse
 
jerry_conakry_a633e482b9b profile image
Jerry Conakry

Nice one ,am grateful

Collapse
 
zeyrarararara profile image
zehra hindioğlu

While improving myself in Frontend & Web Development, I actively used some projects similar to these. A great practical example πŸš€

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Awesome! Improving by building projects is indeed a great way to boost your skills!

Collapse
 
javav profile image
Javav

tnk u for sharing

Collapse
 
brianwebb087 profile image
Brian Webber

Amazing Post, Great examples!

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Awesome!

Collapse
 
vivekmeena_04 profile image
Vivek Kumar Meena

Thank you

Collapse
 
hellohailie profile image
HelloHailie

awesome!! thankyou!

Collapse
 
aksh2902 profile image
Akshay

Could you please tell me
To make these listed projects what exactly should we know like

Html
tailwind css
js
react
api and?

Collapse
 
bigsondev profile image
Adrian | Founder of BigDevSoon

Hmm, tech. stack is quite flexible. I’d browse job offers you want to apply for right now and compare, list top 10 technologies to learn. However if you want to build your tech. stack about what you mentioned maybe add Astro/Next.js to it, some component library on top of tailwind css or popular ones like daisyui/chakra ui and some rest/graphQL with a provider maybe like Supabase. Also TypeScript for sure, testing Cypress/Playwright, no need to do it all at once tho. Hope that helps.

Collapse
 
richeek45 profile image
richeek45

This is really good list. Specially the code editor and character generator is something I am looking forward to build.