A hopefully ever-growing list of web-development related challenges
-
- 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.
-
- If you do want to create a framework/language specific challenge, try to focus on challenges that are unique to that framework/language.
-
- Avoid "learn XYZ" style challenges - focus on challenges that can be DONE or shown in a git repo.
-
- 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.
- Api
- Auth and Service
- CMS
- CSS
- Database
- Environments and Server
- Git
- JavaScript
- Misc
- Mobile/Hybrid
- PHP
- Task Runners
- 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.
- Traditional form-based identifier/password.
- Traditional form-based Identifier/password w/remember-me feature.
- Implement JWT auth.
- SSO.
- Password-less auth.
- Auth via social network accounts.
- Implement an OAuth2 server and a fake service and a fake app to make use of it.
- Adding user registration.
- Set up WordPress and create a custom theme Tutorial
- Set up Drupal and create a custom theme Tutorial
- 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 pure CSS parallax scrolling effect
- 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.
- Try to create a project using Laravel.