The hosts of Shop Talk show podcast (Chris Coyier and Dave Rupert) get asked a lot of questions about how to learn web development. Their mantra is "just build websites"; there's even a soundbite for it. Getting your hands dirty with some web projects and filling in the gaps in your knowledge along the way is a beautiful way of doing things.
But what if you don't know what kind of website to "just build"? The following is a brainstormed list of different projects you can give yourself to practice your web design and development chops. Feel free to submit a PR (see contribution guidelines) to add ideas to the list, or share the side projects you've made.
- Help a friend's new business / hobby / resume / wedding
- Create a fan site (and maybe an old-school web forum) for something you love
- Build a gallery of photos you've taken on vacation
- Try to rebuild a page of a favorite site without looking at their code
- Follow @first_tmrs_only to get notified about
first-timers-onlyissues on Github! - Look at everybody's code!!!
- Build a sustainable, pro-bono site for a non-profit in your area
- Code for America (you can also help fix issues on existing projects)
- Women on Call
- Catch a Fire
- Volunteer Match
- Find code-for-good groups on Meetup
- Find a local issue that's important to you, and make a brochure site that supports your stance
- Rebuild a previous project using a CMS or coding language you're curious about
- Make a game powered by web tech (Maybe even participate in a game jam)
- Try to replicate an "IRL" visual effect using only CSS
- Explore generative art
- Challenge yourself to make a site under a certain kb limit
- Identify a need you have in your daily life and make a web app that addresses it
- Imagine what your favorite fictional character's website would look like
- Explore web features on Can I Use and build a site with web features you've never heard of and/or used before
- Showcase a personal collection: yours or someone else's
- Research your genealogy and build a tree
- Gather personal data and use a chart/visualization library to present it--or come up with your own unique visualizations
- Retool an existing site to load 10% faster (or set another performance benchmark and go for it)
- Create a custom "start page" for new tabs in your browser. Perhaps use APIs to fetch information that's tailored to your interests.
- Make a beautiful website using only text, no images
- Tinker with an old site to make it more accessible to people with various abilities and technical setups
- Style some free themes for a popular blogging service
- Finally share your poetry / banjo covers / hidden talent
- Reinvent the wheel: make a calculator, a personal finances web app, a time tracking app...
- Practice making style guides by building one for an existing site. You might find yourself reducing current styles or refactoring duplicative code...
- Style a site using 3 different approaches to CSS architecture and see which one felt best
- Use the same basic process to vet new frameworks or content management systems
- Reimagine a favorite painting, sculpture, installation, etc. as web art
- Solve the same problem in 10 different ways
- Take your oldest trick in the book and try it a new way
- Make a fan site for a quirky feature of your home town
- Start a for-your-eyes-only journal/diary
- Manipulate an image with CSS in 25 different ways
- Display your system fonts in a more useful way than default apps
- Make a JS-powered web chat for your friends
- Invent a secret alias/alternate life, and make a web presence for this fictional you
- Try to replicate magazine layouts on the web using no JavaScript
- Draft a library of reusable components, functions, etc. for your language(s) of choice
- Come up with the weirdest possible non-malicious website and post flyers/stickers for it around town
- Give your friends a handy place to find instructions for house-sitting/pet-sitting/plant-watering. Ensure that users have to be authenticated in some way to access it
- Create a guide to your city, with various filters (type of activity, expense, food reqs, etc.)
- Design a website that would be usable on a 100px wide device
- Vigorously test in a browser you've never heard of before
- Keep track of your bucket list or a specific goal with a fancy website. Inspiration: Doris Yee's Bucket List, Jessica Lord's Vermeer Goals
- Take a walk in a neighborhood you don't frequent; make something inspired by what you see
- Build the least performant website you can muster
- Teach people something new about a topic you know a lot about
- Display favorite quotes or wisdom in a unique way
- Write a page in HTML with your monitor turned off
- Create an experience navigable only with a keyboard
- Catalog every piece of clothing in your closet, plant in your garden, or spice in your kitchen, and make the collection filterable. The site should remember the user's last set of filters.
- Teach a small child their colors, numbers, letters, shapes with a touch-friendly, interactive website
- Choose an API on the Programmable Web directory and make something with it
- Choose a book in the public domain and make a site where a user could read it, make notes and highlights, etc.
- Think of a person in your life; build a site they'd love
- ...now build a site they'd abhor
- Create a complex work of emoji art
- Limit yourself to a palette of black-and-a-color, or white-and-a-color
- Choose another restraint and create web art inspired by it
- Make a time calculator (Guidelines)
- Make a unit converter (Guidelines)
- Recreate your favorite movie or concert poster as a responsive website
- Make a time clock web app (Guidelines)
- Make any variety of calculators (Guidelines)
- Go on an adventure and document it an interesting way. Inspiration: Hum Creative's Guide to the Enchantments
- Create a custom 404 page
- Create a random number generator for picking lottery numbers (Guidelines)
- Go to the new repo page on Github. Make something inspired by the randomly-generated repo name they give you
- Recreate the title sequence of a favorite show or movie using CSS. (Example: Stranger Things)
- A site with a historic or futuristic User Interface (or any other theme accordingly).