Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for 5 Refreshing Project Ideas for Web Devs
Wade Zimmerman
Wade Zimmerman

Posted on • Edited on • Originally published atdevmap.org

     

5 Refreshing Project Ideas for Web Devs

It seems like many project ideas online are stale or for beginners only. This can be problematic for developers who are looking for a quick project to put in their resume or test their skills.

The goal of this list is to provide project ideas that are half way unique, challenging, and fresh.

1. Responsive Tournament Bracket

This web app would provide a modern and user friendly experience for visualizing tournaments. Ideally, an app like this should handle high scoring matches, long team names, and team branding. Users should be able to quickly glance at the UI to see how a team navigated the tournament. Who did they beat, when was the match, and what was their original placement?

Skills

  • Sorting lists
  • Data structures
  • Dynamic Content

Courtesy of Dribble - Tournament Bracket


2. Timeline Infographic

Develop a web app which documents a series of historic events. Ideally dates are separated evenly and make use of infinite scrolling. For example, scrolling back to 1980's is quick but scrolling back to the age of the dinosaurs is tedious. Meanwhile, the interface should be engaging. The app should provide filters and make use of different gestures.

Skills

  • Gestures
  • Infinite scrolling
  • Animations
  • Interactivity

Courtesy of Dribble - Timeline


3. Virtual Business Card

Rather than handing out business cards or putting a bunch of links in your resume, develop a single page app which is the equivalent of a business card. Provide your contact information, social media links, and short description of what you do. Bonus points if you can print physical business cards which have a QR code linking to your virtual business card.

Skills

  • CSS
  • Marketing
  • Design

Courtesy of Moiz Imran


4. Hashtag Pursuit

Develop a website/bot which finds the shortest path between hashtags. For example, if you have #javascript, how many posts/profiles do you have to go through to reach #dannydevito. Bonus points if you can turn this into a game likehttps://www.thewikigame.com/ or make use of it some other way.

Skills

  • Algorithms
  • Big Data
  • APIs

Hashtag


5. Article Navigator

Provide a browser extension which outlines articles and shows a minimap of the page with scroll features. The idea is to always have an accessible table of contents and quickly view the page structure without scrolling. This would be useful for avoiding pages with heavy ads or little content.

Skills

  • Web Scraping
  • Browser Extensions

Article Navigator Minimap

Conclusion

Hopefully these projects seem interesting to you are help you think of fresh ideas. Please comment additional project ideas or share your creations.

Top comments(13)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
joshistoast profile image
Josh Corbett
Professional maniac and enough caffeine to capsize a horse. Web Developer and designer in Northwest Montana.
  • Location
    Montana
  • Education
    Youtube
  • Work
    Front End Web Develeoper
  • Joined

Finally, an original list of ideas. Thanks!

CollapseExpand
 
sapeol profile image
Sudeep kuchara

Looks like I'm gonna be busy this weekend

CollapseExpand
 
swastikyadav profile image
Swastik Yadav
Software Engineer || Helping you learn to code and land a better job.
  • Location
    The Republic of India
  • Work
    Software Engineer at ChampSoft
  • Joined

Finally a list of project ideas beyond the todo list app 😎

Thanks for sharing this Wade.

CollapseExpand
 
tandiwep profile image
TandiweP
  • Joined

Definitely going to do the responsive tournament bracket. Thanks!

CollapseExpand
 
ronaldohoch profile image
Ronaldo Hoch
Software engineer@Dinamize, Front-end Developer.
  • Location
    Brazil
  • Joined

Heey! Would love to know how to create the lines linking the blocks ><

CollapseExpand
 
thejayhaykid profile image
Jake Hayes
Tech Lead, Writer, Consultant & Freelance Developer
  • Location
    Columbus, OH, USA
  • Education
    The Ohio State University
  • Pronouns
    He/him
  • Work
    Lead Software Engineer at T-CETRA
  • Joined

That's an awesome list. I gotta try a couple of those

CollapseExpand
 
mehemmed77 profile image
Mehemmed
I'm a college student at ADA University. My major is Computer Engineering and minor is Computer Science. I am a enthusiastic full-stack developer
  • Email
  • Location
    Baku, Azerbaijan
  • Education
    I am currently studying in ADA University
  • Pronouns
    He/him
  • Work
    i'm a student
  • Joined

MAN THIS IS A VIOLATION.ORIGINAL.IDEAS.I definetly want to do the second one.that would blast my CSS,Js skills.

CollapseExpand
 
allisongarner profile image
AllisonGarner
I'm a student and my hobby is designing. I'm thriving to create a website for myself and to sell the clothes I design.
  • Location
    Los Angeles, US
  • Work
    Designer
  • Joined

These ideas are actually very unique and actually worth looking into. Thanks.

CollapseExpand
 
ronaldohoch profile image
Ronaldo Hoch
Software engineer@Dinamize, Front-end Developer.
  • Location
    Brazil
  • Joined

Niiice!

Would love to know how to concat elements with a line like the example for Responsive Tournament Bracket.

CollapseExpand
 
faithhvacsteve profile image
Stephen H Veach
I’m a mechanical contractor that has been learning the new web dev ways. Although I’m relatively novice, I learn fast and have been for over a year. I am excited to be able to code like a pro!
  • Location
    Chicago Illinois
  • Education
    Trade school associates
  • Joined

Does anyone here have a neat business card one page app example to show? I’m going to do this option but would like some samples from the community if possible :)

CollapseExpand
 
moizi profile image
Moiz-I
  • Joined

I made my home page of my personal website to sort of be like a business card:moiz.one

CollapseExpand
 
luisferfranco profile image
Luis F. Franco
  • Education
    ITESM CEM
  • Joined

Very nice!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Code by day; blog by night
  • Location
    California
  • Education
    Networking/Software
  • Work
    Self Employed
  • Joined

More fromWade Zimmerman

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp