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.
• 2. If you do want to create a framework/language specific challenge, try to focus on challenges that are unique to that framework/language.
• 3. Avoid "learn XYZ" style challenges - focus on challenges that can be DONE or shown in a git repo.
• 4. 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.

Table of contents

1. Api
2. Auth and Service
3. CMS
4. CSS
5. Database
6. Environments and Server
7. Git
8. JavaScript
9. Misc
10. Mobile/Hybrid
11. PHP
12. Task Runners

---

Challenges

API

• 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.

Auth and Sessions

• 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.

CMS

• Set up WordPress and create a custom theme ~ Tutorial
• Set up Drupal and create a custom theme ~ Tutorial

CSS

• 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 webpage using Bootstrap
• Create a basic webpage using Foundation

Database

• 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.

Environments and Servers

• 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 or WAMP environment ~ MAMP Tutorial, WAMP Tutorial
• Set up virtual hosts so each site can have its own local domain ~ MAMP Tutorial, WAMP Tutorial

Git

• 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
• Squash different Git commits together

JavaScript

• 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
• Create a drag and drop functionality to upload files
• Build a tic tac toe game
• Build a simple multi-page app using Angular.js
• Build a select-box replacement plugin

Misc

• 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

Mobile/Hybrid

• 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.

PHP

• Try to create a project using Laravel.
• Create basic login system.
• Create a custom form validation
• Create a small custom blog system that contains CRUD operations
• Implement a templating engine (smarty or twig)

Task Runners

• Use Grunt to compile Sass into CSS, minify, and autoprefix. ~ Tutorial
• Use Gulp to compile Sass into CSS, minify, and autoprefix. ~ Tutorial