Skip to main content

📓 Further Exploration

If you'd like to tackle another project, check out the prompts below.

Bonus Projects​

The first two activities below use 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. This time, instead of creating a website to list your programming goals, create one of the sites detailed below. 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 (real or fictional) local business such as a food cart or shop.

  1. This time, instead of using HTML to list your programming goals, list relevant information about that local business. What might visitors to their site need to know? Examples include address, phone number, hours of operation, and images of the business.

  2. Next, 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. Finally, 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 may also want to save this site to GitHub Pages.

Discussion Board​

Create a basic "discussion board" website where users can converse about a topic of your choosing. Examples include board games, other hobbies, food, and so on.

  1. Use HTML to list relevant information about the discussion group. What might visitors need to know? What is the focus of the discussion board? Are there any rules for posting? Perhaps an image relevant to the discussion topic?

  2. Add custom classes and ids to the various HTML elements you added in the last step. Create CSS rules to style them.

  3. 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 field to have a unique id property. You'll also 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.

Learn about Divs and Spans​

Are you ready to learn something new? Check out the HTML Divs and Spans, and CSS Sizing Units 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.