Best Practices, Backgrounds & Gradients Copy

Introduction

In this topic we want to make sure that you not only understand just what elements and selectors and attributes you CAN use, but also which ones you SHOULD use in each situation. Many websites have similarities in the way they are structured. To be more specific, most of them use container divs for grouping elements and they use classes and IDs as necessary to determine styles.

Study

  1. Watch the following video about Accessibility Fundamentals with Rob Dodson.

Duration: 30 minutes

  1. Study the CSS Style Guide by Mark Otto, one of the creators of Bootstrap.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.


Introduction to Backgrounds & Gradients

In this topic we will see a brief section about backgrounds. Although backgrounds are an important element of a web page, they are usually ignored until they become a problem. Therefore this section should get you thinking properly about backgrounds. To be more specific you will learn how to deal with backgrounds using regular old CSS.

Learning Objectives

  • How to set the background color
  • Which color to use when elements are stacked on top of each other (on the z-axis)
  • How to set a partially transparent color
  • How to set a gradient background
  • How to make an image the background of an element
  • Why it is useful to make the image the background of an element instead of using a regular <img> tag
  • How to make a background image of a fixed size
  • How to make a background image repeat
  • How to get your page’s background image to fill the page even when you resize the browser

Study

  1. Read Shay Howe on Backgrounds & Gradients

  2. Skim through this CSS Tricks article on the different types of gradients

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Leave a Reply