Week 3

Homework: Acme Anvil Co. Continued

Solution

Homework is due on Thursday, August 13th.

Build two more pages for Acme Anvil Corporation: Products and Sign Up.

• Below are screenshots of what the two pages should look like
• Here's a video of the sign up page interactions
• Yes, you will need to learn new tags on your own!
  • <label>
  • <input>
  • <select>
  • <option>
  • Element reference and documentation
• Choose any products (and images) from here: ACME Product Catalog
• Yes, you probably want to figure out how to share styles between pages
• The screenshots aren't totally consistent (sorry!), I'm pulling them from an older cohort

The key to sharing CSS between pages is to create a stylesheet. It's nothing fancy--just a plain text file with .css extension. So first, create a file called stylesheet.css right next to your index.html. If you want, you could put it in a folder--that's up to you. The next step is to move your CSS from the <style> (where it currently lives) to stylesheet.css. Do not put the <style> tag in the stylesheet.css file (just the CSS). Last step: where your <style> used to be, put a <link> tag. Just like this:

  
    <link rel="stylesheet" href="stylesheet.css" media="screen" >
  

Now you can create a new file, products.html, for example. Put that same <link> tag on the new page. Now your styles are shared between pages. Unfortunately, all the code for your header will have to be duplicated.

Products Page

Sign Up Page

Resources

• Illustrated Catalog of ACME Products
• Position according to MDN
• Display according to MDN
• MDN's list of CSS pseudo-classes
• Normalize CSS
• Absolute Positioning Tutorial
• Buttons
• Normalize CSS
• Adobe Color
• ColorZilla: Color picker Chrome Extension

CSS selectors

CSS selectors are how you get things on the page to style them in your CSS. There are a few basic ways to do this:

• by element: a { color: red; }
• by class: .danger { color: red; }

Remember:

• Classes may be applied to many elements on the page.
• Elements can have many classes!

Select on multiple things on a single element by chaining selectors together without a space, for example: a.danger.btn { color: red; }

Descendant CSS selectors

You can select nested elements by putting a space between selectors. For example: header a selects all the <a> tags in the header.

Some rules of thumb when nesting CSS selectors:

• Keep it shallow! Deeply nested selectors can get confusing.
• Omit any unnecessary selectors. Keep it as simple as possible!

Pseudo-selectors!

Pseudo-selectors allow you to create CSS selectors that select elements based on a particular state of that element (called pseudo-classes). They are denoted by a colon. For example: a:hover selects the <a> tags that are currently being hovered over by the cursor.

A list of all the available pseudo-classes is available on MDN.

Some rules of thumb when using pseudo-selectors:

• Use them sparingly! If you're uncertain, you probably don't need it.
• Don't get too clever -- It's really easy for pseudo-selectors to get confusing!

CSS Layouts

The way we've managed CSS layouts has evolved over the years. In chronological order:

• Tables: using the <table> tag, you can create columns and rows. This (sort of) allows you to manage complex layouts, but it's really clunky and has some limitations
• Floats: using the CSS property float:left; or float:right; pulls elements out of the layout flow. This has been used to create column layouts, but floating has some idiosyncrasies that require proactive management. Floated elements must be "cleared", and this can cause problems.
• Flexbox: using the CSS property display:flex; is the modern way to manage complex layouts with CSS. It allows you to flexibly size child elements using some special CSS properties such as flex. You can find more info at MDN.