└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # WebDevChallenge 2 | > A hopefully ever-growing list of web-development related challenges 3 | *** 4 | 5 | ## Guidelines for writing challenges 6 | 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. 7 | 8 | 2. If you do want to create a framework/language specific challenge, try to focus on challenges that are unique to that framework/language. 9 | 10 | 3. Avoid "learn XYZ" style challenges - focus on challenges that can be DONE or shown in a Git repo. 11 | 12 | 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. 13 | 14 | ## Table of contents 15 | 1. [Accessibility](#accessibility) 16 | 2. [Api](#api) 17 | 3. [Auth and Service](#auth-and-sessions) 18 | 4. [CMS](#cms) 19 | 5. [CSS](#css) 20 | 6. [Database](#database) 21 | 7. [Environments and Server](#environments-and-servers) 22 | 8. [Git](#git) 23 | 9. [JavaScript](#javascript) 24 | 10. [Misc](#misc) 25 | 11. [Mobile/Hybrid](#mobilehybrid) 26 | 12. [PHP](#php) 27 | 13. [Task Runners](#task-runners) 28 | 14. [Terminal / Shell](#terminal--shell) 29 | 30 | ## Challenges 31 | 32 | ### Accessibility 33 | - [ ] Use a screen reader to test your pages 34 | - [ ] [Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/) 35 | - [ ] [Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/) 36 | 37 | ### API 38 | - [ ] Build a REST API to obtain information about movies, directors, and actors, as well as add their favorites of each, to a personal list. 39 | - [ ] Build a SOAP API that would let you store someone's email - such as for allowing a newsletter signup. 40 | - [ ] Add API authentication. 41 | - [ ] Add API request throttling. 42 | - [ ] Add API versioning. 43 | - [ ] Document your API. 44 | - [ ] Display a Facebook feed on a page through its API. 45 | - [ ] Display a Twitter feed on a page through its API. 46 | - [ ] Create a web app that lets authenticated users post tweets to your Twitter account. 47 | - [ ] Build a Reddit bot that follows you around and gives you random compliments when you post. 48 | - [ ] Display LinkedIn work experience on a page through its API. 49 | - [ ] Create a webapp using a weather API and an image API like flickr to display images based on the weather. 50 | - [ ] Use the Spotify API to search for a particular song or artist and create a webpage with details on that particular song/artist. 51 | - [ ] Create a custom-styled map using the Google Maps API 52 | 53 | ### Auth and Sessions 54 | - [ ] Traditional form-based identifier/password. 55 | - [ ] Traditional form-based Identifier/password w/remember-me feature. 56 | - [ ] Implement JWT auth. 57 | - [ ] SSO. 58 | - [ ] Password-less auth. 59 | - [ ] Auth via social network accounts. 60 | - [ ] Implement an OAuth2 server and a fake service and a fake app to make use of it. 61 | - [ ] Adding user registration. 62 | - [ ] Incorporate email confirmation and forgotten password functionality. 63 | 64 | ### CMS 65 | - [ ] Set up WordPress and create a custom theme ~ [Developing a WordPress Theme from Scratch](http://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/) 66 | - [ ] Set up Drupal and create a custom theme ~ [Drupal Theming Guide](https://www.drupal.org/documentation/theme) 67 | 68 | ### CSS 69 | - [ ] Draw Homer Simpson using nothing but CSS. 70 | - [ ] Create a sprite sheet of Simpsons character components and create your own FrankenSimpson from it. 71 | - [ ] Vertically center a div. 72 | - [ ] Create a responsive three column equal height layout divided by 1px borders/dividers. 73 | - [ ] Create a sticky header. 74 | - [ ] Create a sticky footer. 75 | - [ ] Collapse a navigation bar to a hamburger menu when you're using any mobile device ~ [Responsive Dropdown Navigation Bar](http://www.taniarascia.com/responsive-dropdown-navigation-bar/) 76 | - [ ] Create a responsive website by using CSS media queries. 77 | - [ ] Collapse a navigation bar to a hamburger menu when you're using any mobile device ~ [Tutorial](http://www.taniarascia.com/responsive-dropdown-navigation-bar/) 78 | - [ ] Do the same, as the above, but only for the iPhone 6 Plus. 79 | - [ ] Create a basic CSS3 animation which uses opacity, transform and keyframes. 80 | - [ ] Try a preprocessor like LESS, SASS or Stylus. 81 | - [ ] Create a responsive grid with flexbox ~ [Easiest Flex Grid Ever](http://www.taniarascia.com/easiest-flex-grid-ever/) 82 | - [ ] Create a basic website using Bootstrap 83 | - [ ] Create a basic website using Foundation 84 | - [ ] Create a pure CSS parallax scrolling effect 85 | 86 | ### Database 87 | - [ ] 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. 88 | - [ ] 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. 89 | - [ ] Use the entity-attribute-value pattern to create an app that lets you define and store any arbitrary characteristics about any video game. 90 | - [ ] Replicate Reddit's comment system in as much detail as possible using the adjacency list pattern. 91 | - [ ] Do the above, but with the closure table pattern. 92 | - [ ] Do the above, but with the nested set pattern. 93 | - [ ] Write a SQL query that removes all duplicate records from a table. 94 | 95 | ### Environments and Servers 96 | - [ ] Create a Vagrant box that would let you host a new Rails site. 97 | - [ ] Create a Vagrant box that would let you host a new WordPress site. 98 | - [ ] Create a Vagrant box that would let you host a new Django site. 99 | - [ ] Set up your own DigitalOcean server and provision it to host one of the three sites above. 100 | - [ ] Set up public/private SSH keys for that server. 101 | - [ ] Set up a local MAMP or WAMP environment ~ [MAMP Tutorial](http://www.taniarascia.com/local-environment/), [WAMP Tutorial](https://www.vultr.com/docs/setup-a-wamp-server-on-windows) 102 | - [ ] Set up virtual hosts so each site can have its own local domain ~ [MAMP Tutorial](http://www.taniarascia.com/setting-up-virtual-hosts/), [WAMP Tutorial](https://john-dugan.com/wamp-vhost-setup/) 103 | - [ ] Create a Bootstrap web application and link it to your server. http://getbootstrap.com/ 104 | - [ ] Create a simple Node.js application and host it on your server. 105 | - [ ] Create and run a Docker image that would let you host a Django site. 106 | - [ ] Deploy using a Docker image on services such as DigitalOcean or AWS ECS. 107 | 108 | ### Git 109 | - [ ] Set up two different GitHub accounts, and learn how to SSH different projects with different accounts. 110 | - [ ] Use command line to push a Git repository from a local environment to a live server. ~ [Getting Started with Git](http://www.taniarascia.com/getting-started-with-git/) 111 | - [ ] Squash different Git commits together 112 | - [ ] Try creating a pull request on another repository at the command line. You never know what good stuff could happen... 113 | 114 | ### JavaScript 115 | - [ ] Create an image slider that accepts any number of slides and changes them every 5 seconds. 116 | - [ ] Create a sticky element that doesn't attach to the top of the screen until you scroll to its position. 117 | - [ ] AJAX submit a form, validate it server-side, and display those validation errors. 118 | - [ ] Validate form data on the client-side. 119 | - [ ] Build a date-picker plugin. 120 | - [ ] Create a drag and drop functionality to upload files. 121 | - [ ] Build a tic tac toe game. 122 | - [ ] Build a simple multi-page app using Angular.js. 123 | - [ ] Build a select-box replacement plugin. 124 | - [ ] Build a plugin that provides a popup window functionality. 125 | - [ ] Redo the exercises using jQuery. 126 | - [ ] Create a navigation bar that tracks your scrolling activity and indicates which section of the page you're viewing. 127 | - [ ] Create a pomodoro timer with start/stop/reset functionality. 128 | 129 | ### Misc 130 | - [ ] Build a chrome extension that contains a content script which modifies the Facebook appearance. 131 | - [ ] Build a chrome extension which provides a possibility of adding bookmarks with a form on the newtab page. 132 | - [ ] Build a chrome extension that shows WHOIS information about the domain you're on. 133 | - [ ] Build a scraper that aggregates all the hash tags and their links from Twitter's home page. Hint - requires you to be authenticated. 134 | - [ ] Build a link shortener. 135 | - [ ] Create a link/URL lengthener (making it much longer) with funny/meme/themed words in the URL, ex. Star Wars, Space Jam, etc. 136 | - [ ] Build a simple portfolio website to showcase your work. 137 | 138 | ### Mobile/Hybrid 139 | - [ ] Create a Ionic project using http://www.ionicframework.com/ 140 | - [ ] Build the hybrid app on the Android platform, resulting in a .APK file of your app. 141 | - [ ] Build the hybrid app on the iOS platform, resulting in a .IPA file of your app. 142 | 143 | ### PHP 144 | - [ ] Try to create a project using Laravel. 145 | - [ ] 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. 146 | - [ ] Create basic login system. 147 | - [ ] Create a custom form validation 148 | - [ ] Create a small custom blog system that contains CRUD operations 149 | - [ ] Implement a templating engine (smarty or twig) 150 | 151 | ### Task Runners 152 | - [ ] Use Grunt to compile Sass into CSS, minify, and autoprefix. ~ [Getting Started with Grunt and Sass](http://www.taniarascia.com/getting-started-with-grunt-and-sass/) 153 | - [ ] Use Gulp to compile Sass into CSS, minify, and autoprefix. ~ [Gulp for Beginners](https://css-tricks.com/gulp-for-beginners/) 154 | - [ ] Use [npm scripts](http://substack.net/task_automation_with_npm_run) to compile Sass into CSS, minify and autoprefix 155 | - [ ] Setup LiveReload with either Grunt or Gulp. 156 | 157 | ### Terminal / Shell 158 | - [ ] Write a shell script that copies files from one location to another. 159 | - [ ] Write a shell script that allows you to google a search term from the command line. 160 | - [ ] Write a shell script that prints a unicorn in ASCII characters. 161 | --------------------------------------------------------------------------------