Lesson Weekend

Were you able to complete the primary workshop project early, with time to spare? Great work! If you'd like to tackle another project today, check out the prompts below with your partner, and decide together what you'd like to spend the rest of today's workshop creating.

Bonus Projects


The first two activities below can be created following the same general process as your programming goals website (writing basic HTML, adding a few CSS styles, implementing interactivity with JavaScript, and publishing to GitHub).

Follow along with the same set of lessons you've just completed (practice makes perfect!). But this time, instead of creating a website to list your programming goals, create one of the sites detailed below.

This means the code in your second project won't match the lessons exactly. However, this is actually great practice! Moving from following a lesson exactly to simply referencing a lesson is the next step to internalizing the concepts you've learned today.

Local Business

Create a website to display basic information for a (either real, or fictional) local business, like a foodcart, or small shop.

  1. Revisit the Writing HTML lesson. But this time, instead of using HTML to list your programming goals, list relevant information about that local business. Think about it; what might visitors to their site need to know? Their address? Phone number? Hours of operation? Perhaps a picture of the business?

  2. Then, jump back into the Styling with CSS lesson to refresh yourselves on CSS rules. Using this lesson as a guide, add some custom classes and ids to the various HTML elements you added in the last step. Then, create CSS rules to style them.

  3. Revisit the Interactivity with JavaScript & jQuery lesson. Following the same set of steps we used to create a form to add new goals to our Programming Goals website, create a form where visitors to the site may leave comments and/or reviews about the local business.

  4. Make sure to save your work by pushing it to GitHub. You can follow the same instructions from the Publishing Your Site with GitHub Pages lesson.

Discussion Board

Create a basic "discussion board"-style website where users can converse about a topic of your choosing. (For example: A specific board or video game, a hobby like hiking, stamp collecting, or cooking, etc. Talk with your partner! What interests do you have in common?)

  1. Reference the Writing HTML lesson. Instead of using HTML to list your programming goals, list relevant information about the discussion group. What might visitors need to know? The focus of the discussion board? Any rules for posting? Perhaps an image relevant to the discussion topic?

  2. Then, using the skills taught in the Styling with CSS lesson, add some custom classes and ids to the various HTML elements you added in the last step. Create CSS rules to style them.

  3. Revisit the Interactivity with JavaScript & jQuery lesson. Following the same set of steps we used to create a form to add new goals to our Programming Goals website, create a form where visitors to the site may post comments about the topic at hand. If you'd like an extra challenge, try experimenting with adding two text fields to your form: One for the user's name, and another for their comment. Note that this will require each form to have a unique id property, and you'll need to fetch user input from each unique field with a separate line of jQuery code!

  4. Make sure to save your work by pushing it to GitHub. You can follow the same instructions from the Publishing Your Site with GitHub Pages lesson.

Learn about Divs and Spans

Do you feel fairly confident in the skills and concepts we've practiced so far? Are you ready to learn something new? Check out the Divs and Spans lesson from our full-time Intro to Programming class.

<div></div> and <span></span> tags can be used to apply CSS styles to multiple HTML elements at once! After reading and/or watching the lesson in its entirety, experiment with including divs and spans in one of your projects from today!