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. Accessibility
2. Api
3. Auth and Service
4. CMS
5. CSS
6. Database
7. Environments and Server
8. Git
9. JavaScript
10. Misc
11. Mobile/Hybrid
12. PHP
13. Task Runners
14. Terminal / Shell

Challenges

Accessibility

• Use a screen reader to test your pages
  • Using NVDA to Evaluate Web Accessibility
  • Using VoiceOver to Evaluate Web Accessibility

API

• Build a REST API to obtain information about movies, directors, and actors, as well as add their favorites of each, to a personal list.
• Build a SOAP API that would let you store someone's email - such as for allowing a newsletter signup.
• 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 through its API.
• Create a webapp using a weather API and an image API like flickr to display images based on the weather.
• Use the Spotify API to search for a particular song or artist and create a webpage with details on that particular song/artist.
• Create a custom-styled map using the Google Maps 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.
• Incorporate email confirmation and forgotten password functionality.

CMS

• Set up WordPress and create a custom theme ~ Developing a WordPress Theme from Scratch
• Set up Drupal and create a custom theme ~ Drupal Theming Guide

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 ~ Responsive Dropdown Navigation Bar
• Create a responsive website by using CSS media queries.
• 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.
• Create a basic CSS3 animation which uses opacity, transform and keyframes.
• Try a preprocessor like LESS, SASS or Stylus.
• Create a responsive grid with flexbox ~ Easiest Flex Grid Ever
• Create a basic website using Bootstrap
• Create a basic website using Foundation
• Create a pure CSS parallax scrolling effect

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
• Create a Bootstrap web application and link it to your server. http://getbootstrap.com/
• Create a simple Node.js application and host it on your server.
• Create and run a Docker image that would let you host a Django site.
• Deploy using a Docker image on services such as DigitalOcean or AWS ECS.

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. ~ Getting Started with Git
• Squash different Git commits together
• Try creating a pull request on another repository at the command line. You never know what good stuff could happen...

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.
• Validate form data on the client-side.
• Build a date-picker plugin.
• 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.
• Build a plugin that provides a popup window functionality.
• Redo the exercises using jQuery.
• Create a navigation bar that tracks your scrolling activity and indicates which section of the page you're viewing.
• Create a pomodoro timer with start/stop/reset functionality.

Misc

• Build a chrome extension that contains a content script which modifies the Facebook appearance.
• Build a chrome extension which provides a possibility of adding bookmarks with a form on the newtab page.
• 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 link/URL lengthener (making it much longer) with funny/meme/themed words in the URL, ex. Star Wars, Space Jam, etc.
• Build a simple portfolio website to showcase your work.

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.
• Use the PHP password API to safely generate a password hash, verify it, and check if it needs to be rehashed due to a stronger work-factor.
• 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. ~ Getting Started with Grunt and Sass
• Use Gulp to compile Sass into CSS, minify, and autoprefix. ~ Gulp for Beginners
• Use npm scripts to compile Sass into CSS, minify and autoprefix
• Setup LiveReload with either Grunt or Gulp.

Terminal / Shell

• Write a shell script that copies files from one location to another.
• Write a shell script that allows you to google a search term from the command line.
• Write a shell script that prints a unicorn in ASCII characters.