Exercise 1

Finish the following page using the HTML outline given below. Note desktop and mobile layouts.

Finished Exercise #1 Screenshots

HTML structure: Exercise 1 unstyled

Partial Style Sheets: css/neon-style.css and css/neon-narrow.css.

Image #1: El Pueblo Lodge

Image #2: Logo

  1. Create /css and /images in your /exercises folder
  2. Resize (if necessary) and optimize images using Squoosh, TinyPNG or Compress Or Die.
  3. Make the images WEbP and/or AVIF. Use the picture element to serve the correct version of the image with jpg/png-8 as fallbacks.
  4. Set box-sizing to border-box.
  5. Use an nth selector to restyle one of the navigation links
  6. Make this responsive. Use Exercise #7 from JTC372 as a reference
  7. For mobile navigation, see Hamburger menu example. Much of the markup and styles for this should be in place.