WebDevChallenge

A hopefully ever-growing list of web-development related challenges

Guidelines for writing challenges

1. Don't be too vague, but don't be too specific. Make the challenge itself specific and measurable, but try not to impose a language or framework.
1. If you do want to create a framework/language specific challenge, try to focus on challenges that are unique to that framework/language.
1. Avoid "learn XYZ" style challenges - focus on challenges that can be DONE or shown in a git repo.
1. Favor challenges that will teach a new, useful skill that is relevant to web development, or skills that teach devs how to solve real web dev problems. The challenge can be a fun, meaningless exercise, but its purpose should be to expose the developer to skills that are applicable to daily web dev tasks.

Build a REST API for something.
Build a SOAP API for something.
Add API authentication.
Add API request throttling.
Add API versioning.
Document your API.
Display a Facebook feed on a page through its API.
Display a Twitter feed on a page through its API.
Create a web app that lets authenticated users post tweets to your Twitter account.
Build a Reddit bot that follows you around and gives you random compliments when you post.
Display LinkedIn work experience on a page trough its API.

Draw Homer Simpson using nothing but CSS.
Create a sprite sheet of Simpsons character components and create your own FrankenSimpson from it.
Vertically center a div.
Create a responsive three column equal height layout divided by 1px borders/dividers.
Create a sticky header.
Create a sticky footer.
Collapse a navigation bar to a hamburger menu when you're using any mobile device Tutorial
Do the same, as the above, but only for the iPhone 6 Plus.
Try a preprocessor like LESS, SASS or Stylus.
Create a responsive grid with flexbox Tutorial
Create a basic website using Bootstrap
Create a basic website using Foundation

Create a normalized database for storing comments and authors. Using that database, display the comments with authors, without incurring N+1 queries to do it.
Create an app that stores users, movies, lets users favorite movies, tag movies with common tags, and tag movies with their own user-created tags.
Use the entity-attribute-value pattern to create an app that lets you define and store any arbitrary characteristics about any video game.
Replicate Reddit's comment system in as much detail as possible using the adjacency list pattern.
Do the above, but with the closure table pattern.
Do the above, but with the nested set pattern.
Write a SQL query that removes all duplicate records from a table.

Create a Vagrant box that would let you host a new Rails site.
Create a Vagrant box that would let you host a new Wordpress site.
Create a Vagrant box that would let you host a new Django site.
Set up your own DigitalOcean server and provision it to host one of the three sites above.
Set up public/private SSH keys for that server.
Set up a local MAMP environment Tutorial
Set up virtual hosts so each site can have its own local domain Tutorial

Set up two different GitHub accounts, and learn how to SSH different projects with different accounts.
Use command line to push a Git repository from a local environment to a live server. Tutorial

Create an image slider that accepts any number of slides and changes them every 5 seconds.
Create a sticky element that doesn't attach to the top of the screen until you scroll to its position.
AJAX submit a form, validate it server-side, and display those validation errors.
Redo the exercises using jQuery

Build a chrome extension that shows WHOIS information about the domain you're on
Build a scraper that aggregates all the hash tags and their links from Twitter's home page. Hint - requires you to be authenticated.
Build a link shortener

Create a Ionic project using http://www.ionicframework.com/
Build the hybrid app on the Android platform, resulting in a .APK file of your app.
Build the hybrid app on the iOS platform, resulting in a .IPA file of your app.