├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md └── docs ├── inspired-projects.md ├── lottery-numbers.md ├── time-calculator.md ├── time-clock.md ├── unit-converter.md └── various-calculators.md /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, caste, color, religion, or sexual 10 | identity and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at community@melanie-richards.com. 63 | All complaints will be reviewed and investigated promptly and fairly. 64 | 65 | All community leaders are obligated to respect the privacy and security of the 66 | reporter of any incident. 67 | 68 | ## Enforcement Guidelines 69 | 70 | Community leaders will follow these Community Impact Guidelines in determining 71 | the consequences for any action they deem in violation of this Code of Conduct: 72 | 73 | ### 1. Correction 74 | 75 | **Community Impact**: Use of inappropriate language or other behavior deemed 76 | unprofessional or unwelcome in the community. 77 | 78 | **Consequence**: A private, written warning from community leaders, providing 79 | clarity around the nature of the violation and an explanation of why the 80 | behavior was inappropriate. A public apology may be requested. 81 | 82 | ### 2. Warning 83 | 84 | **Community Impact**: A violation through a single incident or series of 85 | actions. 86 | 87 | **Consequence**: A warning with consequences for continued behavior. No 88 | interaction with the people involved, including unsolicited interaction with 89 | those enforcing the Code of Conduct, for a specified period of time. This 90 | includes avoiding interactions in community spaces as well as external channels 91 | like social media. Violating these terms may lead to a temporary or permanent 92 | ban. 93 | 94 | ### 3. Temporary Ban 95 | 96 | **Community Impact**: A serious violation of community standards, including 97 | sustained inappropriate behavior. 98 | 99 | **Consequence**: A temporary ban from any sort of interaction or public 100 | communication with the community for a specified period of time. No public or 101 | private interaction with the people involved, including unsolicited interaction 102 | with those enforcing the Code of Conduct, is allowed during this period. 103 | Violating these terms may lead to a permanent ban. 104 | 105 | ### 4. Permanent Ban 106 | 107 | **Community Impact**: Demonstrating a pattern of violation of community 108 | standards, including sustained inappropriate behavior, harassment of an 109 | individual, or aggression toward or disparagement of classes of individuals. 110 | 111 | **Consequence**: A permanent ban from any sort of public interaction within the 112 | community. 113 | 114 | ## Attribution 115 | 116 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 117 | version 2.1, available at 118 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 119 | 120 | Community Impact Guidelines were inspired by 121 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 122 | 123 | For answers to common questions about this code of conduct, see the FAQ at 124 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 125 | [https://www.contributor-covenant.org/translations][translations]. 126 | 127 | [homepage]: https://www.contributor-covenant.org 128 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 129 | [Mozilla CoC]: https://github.com/mozilla/diversity 130 | [FAQ]: https://www.contributor-covenant.org/faq 131 | [translations]: https://www.contributor-covenant.org/translations 132 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | The [Code of Conduct](CODE_OF_CONDUCT.md) applies to all contributions (PRs, issues, comments, etc). Thanks! 4 | 5 | ## Workflow 6 | 7 | 1. Fork the project. 8 | 2. It's up to you whether you'd like to work on your fork's `main` or a feature branch. The latter would probably be more useful if you're submitting an idea that has more in-depth guidelines. 9 | 3. One idea = one commit, please. Write commit messages in the present imperative tense, so that they read as changes to be applied to the repo rather than a diary of changes made ("Add the widget" would be correct, vs. "Added the widget"). 10 | 4. Submit a PR to the `main` branch! 11 | 12 | ### Branch name changes 13 | 14 | The default branch for this project was renamed from `master` to `main`. If you have a fork with the old branch name, you can update your local clone with the following commands: 15 | 16 | ``` 17 | $ git checkout master 18 | $ git branch -m master main 19 | $ git fetch 20 | $ git branch --unset-upstream 21 | $ git branch -u origin/main 22 | $ git symbolic-ref refs/remotes/origin/HEAD refs/remotes/origin/main 23 | ``` 24 | 25 | ## Formatting 26 | 27 | * Follow [this style](https://guides.github.com/features/mastering-markdown/) of Markdown. We're using asterisks instead of dashes for bulleted lists. 28 | * If you add an idea to the list: 29 | * Follow the same imperative grammatical structure: "Do a thing", instead of "A thing" 30 | * If your idea has more in-depth guidelines than a simple sentence, format your idea in the list as `Do a thing ([Guidelines](docs/your-idea.md))`. As shown in this example, the word "Guidelines" links to a markdown file in the `docs/` folder detailing your project idea's guidelines. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Melanie Richards 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Just! Build! Websites! 2 | 3 | The hosts of [Shop Talk show](http://shoptalkshow.com/) podcast (Chris Coyier and Dave Rupert) get asked a lot of questions about how to learn web development. Their mantra is "just build websites"; [there's even a soundbite for it](http://shoptalkshow.com/mantra/). Getting your hands dirty with some web projects and filling in the gaps in your knowledge along the way is a beautiful way of doing things. 4 | 5 | But what if you don't know what kind of website to "just build"? The following is a brainstormed list of different projects you can give yourself to practice your web design and development chops. Feel free to submit a PR (see [contribution guidelines](CONTRIBUTING.md)) to add ideas to the list, or share the side projects you've made. 6 | 7 | [Projects inspired by the list](docs/inspired-projects.md) 8 | 9 | ## Ideas for web design + dev projects 10 | 11 | * Help a friend's new business / hobby / resume / wedding 12 | * Create a fan site (and maybe an old-school web forum) for something you love 13 | * Build a gallery of photos you've taken on vacation 14 | * Try to rebuild a page of a favorite site without looking at their code 15 | * Follow [@first_tmrs_only](https://twitter.com/first_tmrs_only) to get notified about [`first-timers-only` issues](http://www.firsttimersonly.com/) on Github! 16 | * Look at everybody's code!!! 17 | * Build a sustainable, pro-bono site for a non-profit in your area 18 | * [Code for America](http://www.codeforamerica.org/) (you can also help [fix issues on existing projects](https://www.codeforamerica.org/geeks/civicissues)) 19 | * [Women on Call](https://www.womenoncall.org/) 20 | * [Catch a Fire](https://www.catchafire.org/) 21 | * [Volunteer Match](https://www.volunteermatch.org/) 22 | * Find code-for-good groups on [Meetup](http://meetup.com) 23 | * Find a local issue that's important to you, and make a brochure site that supports your stance 24 | * Rebuild a previous project using a CMS or coding language you're curious about 25 | * Make a game powered by web tech (Maybe even participate in a [game jam](http://www.indiegamejams.com/)) 26 | * Try to replicate an "IRL" visual effect using only CSS 27 | * Explore generative art 28 | * Challenge yourself to make a site under a certain kb limit 29 | * Identify a need you have in your daily life and make a web app that addresses it 30 | * Imagine what your favorite fictional character's website would look like 31 | * Explore web features on [Can I Use](http://caniuse.com/) and build a site with web features you've never heard of and/or used before 32 | * Showcase a personal collection: yours or someone else's 33 | * Research your genealogy and build a tree 34 | * Gather personal data and use a chart/visualization library to present it--or come up with your own unique visualizations 35 | * Retool an existing site to load 10% faster (or set another performance benchmark and go for it) 36 | * Create a custom "start page" for new tabs in your browser. Perhaps use APIs to fetch information that's tailored to your interests. 37 | * Make a beautiful website using only text, no images 38 | * Tinker with an old site to make it more accessible to people with various abilities and technical setups 39 | * Style some free themes for a popular blogging service 40 | * Finally share your poetry / banjo covers / hidden talent 41 | * Reinvent the wheel: make a calculator, a personal finances web app, a time tracking app... 42 | * Practice making [style guides](http://styleguides.io/examples.html) by building one for an existing site. You might find yourself reducing current styles or refactoring duplicative code... 43 | * Style a site using 3 different approaches to CSS architecture and see which one felt best 44 | * Use the same basic process to vet new frameworks or content management systems 45 | * Reimagine a favorite painting, sculpture, installation, etc. as web art 46 | * Solve the same problem in 10 different ways 47 | * Take your oldest trick in the book and try it a new way 48 | * Make a fan site for a quirky feature of your home town 49 | * Start a for-your-eyes-only journal/diary 50 | * Manipulate an image with CSS in 25 different ways 51 | * Display your system fonts in a more useful way than default apps 52 | * Make a JS-powered web chat for your friends 53 | * Invent a secret alias/alternate life, and make a web presence for this fictional you 54 | * Try to replicate magazine layouts on the web using no JavaScript 55 | * Draft a library of reusable components, functions, etc. for your language(s) of choice 56 | * Come up with the weirdest possible non-malicious website and post flyers/stickers for it around town 57 | * Give your friends a handy place to find instructions for house-sitting/pet-sitting/plant-watering. Ensure that users have to be authenticated in some way to access it 58 | * Create a guide to your city, with various filters (type of activity, expense, food reqs, etc.) 59 | * Design a website that would be usable on a 100px wide device 60 | * Vigorously test in a browser you've never heard of before 61 | * Keep track of your bucket list or a specific goal with a fancy website. Inspiration: Doris Yee's [Bucket List](http://www.yeedor.com/bucket-list/), Jessica Lord's [Vermeer Goals](http://jlord.us/vermeer/) 62 | * Take a walk in a neighborhood you don't frequent; make something inspired by what you see 63 | * Build the least performant website you can muster 64 | * Teach people something new about a topic you know a lot about 65 | * Display favorite quotes or wisdom in a unique way 66 | * Write a page in HTML with your monitor turned off 67 | * Create an experience navigable only with a keyboard 68 | * Catalog every piece of clothing in your closet, plant in your garden, or spice in your kitchen, and make the collection filterable. The site should remember the user's last set of filters. 69 | * Teach a small child their colors, numbers, letters, shapes with a touch-friendly, interactive website 70 | * Choose an API on the [Programmable Web](http://www.programmableweb.com/apis/directory) directory and make something with it 71 | * Choose a book in the public domain and make a site where a user could read it, make notes and highlights, etc. 72 | * Think of a person in your life; build a site they'd love 73 | * ...now build a site they'd abhor 74 | * Create a complex work of emoji art 75 | * Limit yourself to a palette of black-and-a-color, or white-and-a-color 76 | * Choose another restraint and create web art inspired by it 77 | * Make a time calculator ([Guidelines](docs/time-calculator.md)) 78 | * Make a unit converter ([Guidelines](docs/unit-converter.md)) 79 | * Recreate your favorite movie or concert poster as a responsive website 80 | * Make a time clock web app ([Guidelines](docs/time-clock.md)) 81 | * Make any variety of calculators ([Guidelines](docs/various-calculators.md)) 82 | * Go on an adventure and document it an interesting way. Inspiration: Hum Creative's [Guide to the Enchantments](http://enchantments.guide/) 83 | * Create a custom 404 page 84 | * Create a random number generator for picking lottery numbers ([Guidelines](docs/lottery-numbers.md)) 85 | * Go to the [new repo page](https://github.com/new) on Github. Make something inspired by the randomly-generated repo name they give you 86 | * Recreate the title sequence of a favorite show or movie using CSS. (Example: [Stranger Things](https://github.com/wbobeirne/stranger-things)) 87 | * A site with a historic or futuristic User Interface (or any other theme accordingly). 88 | * Participate in [Weird Web October](https://weirdweboctober.website) 89 | -------------------------------------------------------------------------------- /docs/inspired-projects.md: -------------------------------------------------------------------------------- 1 | # Projects inspired by the idea list 2 | 3 | To add your project here, start a new row in the table below with the correct values and submit a PR (your name can be linked to your personal website or a social media profile, but the link is not required). The project must be inspired by an idea on the main list. 4 | 5 | Please read through the [contribution guidelines](../CONTRIBUTING.md) before submitting. 6 | 7 | | Project | Inspired by | Author | 8 | | ------------------------------------ |---------------------------------------------| -------------------------------| 9 | | [Your cool title](http://example.com)| Name of the idea you were inspired by | [Your name](http://example.com)| -------------------------------------------------------------------------------- /docs/lottery-numbers.md: -------------------------------------------------------------------------------- 1 | # Random number generator for picking lottery numbers 2 | 3 | ## Interface 4 | * Input field 5 | * "Generate" button 6 | * For multiple lotteries on the page, allow the user to select which lottery to generate numbers for. 7 | 8 | ## Details 9 | * Enter the number of lottery numbers needed and press the Generate button. 10 | * For lotteries where the order of the numbers doesn't matter, output the numbers in ascending numerical order. 11 | * Validate all entries! 12 | 13 | ## Example 14 | Daily3 Lottery would output "Your Daily3 Lottery numbers are 7, 2, and 8." 15 | Powerball Lottery would output "Your Powerball Lottery numbers are 1, 29, 30, 43, 55 and Powerball 11." -------------------------------------------------------------------------------- /docs/time-calculator.md: -------------------------------------------------------------------------------- 1 | # Make a time calculator 2 | 3 | ## Interface 4 | Display the current time ticking away, updating every second like a clock
5 | Input fields for days, hours, minutes and seconds
6 | Enter button 7 | 8 | ## Details 9 | Enter your data and press enter to calculate when the time will be. 10 | 11 | ## Example 12 | User enters 4 days, 17 hours, 12 minutes and 0 seconds and presses enter. The screen will display “In 4 days, 17 hours, 12 minutes and 0 seconds from now it will be October 7, 2015 at 3:14:08 AM.” -------------------------------------------------------------------------------- /docs/time-clock.md: -------------------------------------------------------------------------------- 1 | # Make a time clock web app 2 | 3 | ## Interface 4 | Displays current date and time in upper right corner of screen 5 | "Enter employee number" input field 6 | This page is called the Home Screen 7 | 8 | ## Database 9 | The database will contain 5 employee names of your choosing, each with their own unique employee number. The database will also require the necessary fields for each report option that you use from the list below. 10 | 11 | ## Details 12 | Enter employee number in input field and press Clock In button 13 | Validate employee number and return error message if number isn't in the database 14 | If employee number validates, display a new page that will show the following: 15 | 16 | * Upper left corner of the screen displays current employee name and number 17 | * Upper right corner of the screen displays the current date and time 18 | * Clock In button 19 | * Lunch Out button 20 | * Lunch In button 21 | * Clock Out button 22 | * Reports button 23 | * Return Home button 24 | 25 | Buttons that aren't a valid option, based on the employee's current status, should be disabled. For example, once the employee is clocked in, the Clock In and Lunch In buttons should be disabled. After clocking out for lunch, the Clock In, Lunch Out, and Clock Out buttons should be disabled. 26 | The Reports and Return Home buttons should never be disabled. 27 | If punch validates OK, display "John/Jane Doe has successfully clocked in at *current time*" (Make all punch times have appropriate message). This message will display for 5 seconds, then disappear and return to the Home Screen. 28 | The Return Home button can be used at any time and will exit the current page and return the user to the Home Screen. 29 | 30 | 31 | ## Reports button 32 | After clicking the Reports button, have options to output a report of: 33 | 34 | * Total hours worked this week 35 | * Punch in times 36 | * Punch out times 37 | * Total hours in date range 38 | * Total yearly hours worked 39 | * Regular/OT hours worked 40 | 41 | -------------------------------------------------------------------------------- /docs/unit-converter.md: -------------------------------------------------------------------------------- 1 | # Make a unit converter 2 | 3 | ## Interface 4 | Design the interface however you would like. If you get stuck, try to recreate the converter interface used at [Google](https://www.google.com/search?q=unit+converter&ie=utf-8&oe=utf-8). 5 | 6 | ## Details 7 | Convert various units from one to the other. 8 | 9 | ## Examples 10 | * Kilometers to miles 11 | * Inches to millimeters 12 | * Ounces to pounds 13 | * Celsius to Fahrenheit 14 | * Grams to ounces 15 | * Any unit conversion that you find useful -------------------------------------------------------------------------------- /docs/various-calculators.md: -------------------------------------------------------------------------------- 1 | # Make any kind of calculator that you can think of. 2 | 3 | * Calculate the average from a comma separated list of numbers. 4 | * Calculate the mean from a comma separated list of numbers. 5 | * Money manager 6 | * Right off the top, you want to put 20% in savings and give 1.5% to your favorite charity. How much is that and how much do you have left? 7 | * Calculate gas mileage. 8 | * Calculate total price, including sales tax, in any of the 50 states. 9 | * Discount calculator for shopping sales 10 | * $10 item 25% off is $7.50 (don't forget to calculate sales tax!) 11 | * On base, batting, slugging, ERA, etc. percentage calculator for baseball players 12 | * Loan/Mortgage calculator 13 | * Calculate grade point average. 14 | * Right angle triangle solver 15 | * Given at least one angle and one leg, calculate the remaining angles and legs. 16 | * Circle calculator 17 | * Given the area, radius, or circumference of a circle, calculate the other two. 18 | 19 | 20 | Don't forget to validate all entries! --------------------------------------------------------------------------------