Exercises

Exercise 1. HTML

Create two HTML pages:

  • Translate a local restaurant's full menu into HTML.

  • Translate something you've written in the past, like an essay or a letter—that you would be comfortable sharing with the class—into HTML.

With both HTML pages, focus on using the most specific and semantically-correct HTML elements as possible. Your pages should have clear hierarchy.

Exercise 2. CSS Basics

Create three copies of each HTML page from last week. (You’ll have six total HTML pages.) With each one, use CSS to create a distinctly styled version. Follow these guides:

  • Menu: First version: As similar to the printed menu as possible. Second version: Copied or inspired from another website. (Please state somewhere on your page which website you sourced from.) Third version: Freestyle / your own version.

  • Writing: First version: Traditional—focus on readability and legibility. Second version: Spaced out—try a very tall or very wide page, or multiple pages linked together. How can certain parts have more pause between or inside them? Third version: Freestyle / your own version—try a different, distinct reading experience from the previous two.

Exercise 3. CSS Layout & Positioning

Make few more versions (however many you want!) of both your menu and your writing, focusing on CSS layout & positioning. Experiment with multiple modes of navigation.

Intermission assignment

Create a basic CSS stylesheet for your class site and apply it to your pages. Try out some layout and positioning if you'd like. Make sure your stylesheet is applied to all your site's pages consistently—your homepage, your exercise index pages, and your about page. Do this by creating a stylesheet (.css file), placing it in your assets folder, and including it in the of your document on all your pages. You might also consider a consistent navigation on each of your pages.

Exercise 4. CSS Transitions & Animations

Make an organism using only HTML and CSS. Think weird bugs, animals, and amoeba. Also flowers, plants, trees. What is it like? Does it breathe? Also, give it a habitat. What is its environment like? Include some CSS transitions and animations somewhere in your organism or environment.

Exercise 5. CSS Responsive

Create a website to self-archive a meaningful social media of yours, such as Instagram, Twitter, or something else. If it's Instagram, find a way to display all your image posts; if it's Twitter, find a way to display all your tweets, etc. Your website should resize intentionally for mobile devices—use CSS media queries to do this. Please also consider a specific print media query, so that when someone prints the website, it’s designed in an intentional way. When designing your website, pay attention to metadata (such as date posted, comments, likes, etc.). What do you include, and what don’t you include? Will you try to emulate the original social media look and feel as much as possible, or will you create something new (or something in-between)? Will you organize your posts in a specific way? Will you have multiple sections? What privileges do you let yourself have on your own site that are different than the social media source?

Exercise 6. JavaScript & jQuery

Using your organism and its environment from Exercise 4, now make it even more "alive" by making it respond to user input and/or variable conditions. For example, does it glow when the lights are off? Does it breathe slower when it's a Wednesday? Does it respond to anything else (a specific time, a specific state, a hover, a click, etc.)?