Web Design Essentials 1

Class 5

AGENDA

  • Class 4 Review
  • CSS Box Model (contd)
    • Box-Sizing Property
    • "CSS Reset"
  • Working with Images
  • Responsive Web Design
  • Class 6 Preview
  • Class Feedback and Q&A

Stretch - "Bio" Break

8:00p EST / 7:00p CST / 5:00p PST

Layout Pitfalls

A few default properties of CSS can lead to unexpected layout behavior. There are two common culprits:

  1. the CSS property box-sizing
  2. Browser defaults

Box-Sizing

The CSS box-sizing property determines how we calculate the total width and height of an element. It has two values:

/* content-box is the default box-sizing 
   value of all elements */
box-sizing: content-box;

/* border-box will be your layout's best friend! */
box-sizing: border-box;

Layout Tip #1

  • Set the box-sizing property of all elements in your project to border-box
  • Add the property to the very top of your stylesheet
/* This declaration will target every element in the project */

* {
  box-sizing: border-box;
}

Box Sizing Demo

Layout Tip #2

Use CSS resets.

Browser Defaults

  • Most HTML elements have one or more default browser values, that is, they have some basic CSS that influences their appearance on a page
  • Some of these defaults can throw off our page layout; others may not be needed

Resetting CSS

  • A "CSS Reset" stylesheet is one way to remove some of these defaults globally in our project
  • In this stylesheet, we are writing new CSS values to overwrite the browser defaults

CSS Resets

You can create your own reset rules or use any number of well-known reset stylesheets such as:

Two Ways to Reset

  1. Add a separate reset.css stylesheet to your project with the link tag in the head section of your HTML page
    • Make sure the link comes before the project's stylesheet link
  2. Include the new CSS rules at the top of your project's stylesheet

CSS Reset Demo

Two Additional Selectors

  • The universal selector selects all elements
  • It is best used for setting global or base properties such as box-sizing
    • * {
  box-sizing: border-box;
}

Two Additional Selectors

  • The selector list groups selectors and applies the same style(s) to them
    • p, h2, h4 {
  color: purple;
}
/* All p, h2, and h4 elements will be purple. */

Images

Inline Images

  • Inline images are part of the content (i.e., the HTML markup)
  • They are added with the img tag

image description

Inline Images

Inline images can be styled using CSS properties such as:

  • width
  • height
  • object-fit

Background Images

  • Background images are part of the CSS
  • They are added with the CSS background-image property

div {
  background-image: url('wallpaper.png');
}

Background Images

  • Background images can be controlled using additional CSS properties such as: 

div {
  background-image: url('wallpaper.png');
  background-repeat: no-repeat;
  background-size: cover; /* cover, contain, or absolute size */
  background-position: center center;
  width: 400px;
  height: 400px;
}

Use an Inline or Background Image?

  • Inline images are semantic--they are relevant to the page's content and are better for accessibility
  • Background images are primarily decorative, that is, they don't add meaning to the content

Tips for Images

  • Work with larger images--it is easier to scale down than up!
  • Image properties can be set with CSS
  • Use a compression tool such as TinyPNG to reduce image file size

Responsive Web Design

Responsive Web Design

A design and development approach to creating web pages and applications that respond or adapt to different devices and screen sizes.

RWD with CSS

We can make our pages responsive using three tools in CSS:

  • Media Queries
  • *CSS Flexbox
  • *CSS Grid

*CSS Flexbox and CSS Grid are topics in Web Essentials 2

Media Queries

  • Media queries tell the browser at what breakpoint, that is, the screen size at which to apply a specific style
  • Media queries are applied in the CSS

@media (min-width: 600px){
  /* When the screen is at least 600px wide,
  apply the following CSS rule: */
  p {
    font-size: 14px;
  }
}

Media Queries

Demo

Size Up or Size Down

Media queries can be sized up with min-width


@media (min-width: 600px){
  /* When the screen is at least 600px wide, do this... */
  selector {
    property: value;
  }
}

Or sized down with max-width


@media (max-width: 600px){
  /* When the screen is 600px wide or less, do this... */
  selector {
    property: value;
  }
}

Breakpoints

There are common device breakpoints:

  • Mobile, small screens: < 576px
  • Tablet: 768px - 991px
  • Desktop: 992px - 1199px
  • XL screens: 1200px - 1440px
  • XXL screens: 1920px

But you can also define your own breakpoints to fit your layout!

Breakpoint Ranges

We can set breakpoint minimum and maximum ranges:


@media (min-width: 600px) and (max-width: 900px){
  /* When the screen is between 600px and 900px,
  do this... */
}

Screen Orientation

Media queries also work for screen orientation:


@media (orientation: landscape){
  /* When the screen is rotated, do this... */
}

Home Practice

  1. Use a CSS reset method
  2. Add the box-sizing rule to your CSS
  3. Create an images folder
  4. Add images to your project
  5. Use media queries to make elements on your page responsive
  6. Optional: Share your layout with me for feedback prior to class:
    • Image link to your sketch
    • Your REPL project link

Class 6 - Agenda

  • Images & Responsive Web Design (contd)
  • CSS Combinators and Pseudo Classes (tbd)
  • Fan page status updates and feedback
    • Works in progress are fine! :)
    • Pages do not need to be completed or pixel-perfect

Q&A

Class Feedback

https://forms.gle/MzMndG5s52a2HiB77

GDI Logo

Thank You!