exercise.md

"Website Style" Exercise

Improve the look and feel of a static website.

Objectives

1. Gain familiarity with CSS, including selectors, and hexadecimal color notation.
2. Configure in-line, internal, and external CSS stylesheets.
3. Experiment with CSS media queries to produce a responsive design.
4. Leverage a front-end web development framework like Twitter Bootstrap.

Prerequisites

1. "Website Structure" Exercise

Instructions

Part I

Learning CSS

Review the Mozilla CSS Syntax Reference.

Also work through the following units in the W3Schools HTML and CSS Tutorials:

• HTML Style
• HTML Formatting
• HTML Element Classes
• HTML Element Identifiers
• HTML Responsive
• Styling HTML with CSS
• CSS How-To
• CSS Introduction
• CSS Syntax
• CSS Selectors
• CSS Combinators
• CSS Colors
• CSS Backgrounds
• CSS Borders
• CSS Margins
• CSS Padding
• CSS Height and Width
• CSS Box Model
• CSS Outline
• CSS Text
• CSS Fonts
• CSS Icons
• CSS Opacity
• CSS Links
• CSS Pseudo-classes
• CSS Lists
• CSS Tables
• CSS Display
• CSS Positioning
• CSS Overflow
• CSS Float
• CSS Inline-Block
• CSS Align

Also review CSS Media Queries, for conditionally applying different styles at different window widths, to achieve a "responsive" design:

• CSS Media Queries (W3Schools)
• Using Media Queries (Mozilla)
• Complete Guide to CSS Media Queries (CSS Tricks)

Practicing CSS

Setup a new local website, or continue working in the local website you created during the Website Structure exercise.

As you learn new CSS concepts using the resources above, put them into practice in your local website.

For a guided experience, see also the Guided Exercise Walk-through.

Part II

Learning a Framework

After gaining a high-level familiarity with various CSS styling techniques, consider adopting a styling framework like Twitter Bootstrap:

• Bootstrap Intro
• Bootstrap Layout:
  • Grid
• Bootstrap Content:
  • Typography
  • Images
  • Tables
• Bootstrap Components:
  • Buttons
  • Cards
  • Carousel
  • Navbar
• Bootstrap Utilities:
  • Colors

Skip Forms for now, we will return to them later

Ignore JavaScript references in the Bootstrap docs for now. We'll cover JavaScript and website interactivity in the future.

See also the Prof's Bootstrap 5 Navbar Template, which provides an example Bootstrap Navbar out of the box, and feel free to leverage in your exercises and projects, as desired. The Bootstrap 5 Navbar Template w/ Cards is another version of this template that includes Bootstrap Cards.