Designing with CSS

Introduction

In this module, you will learn some advanced CSS to make your sites pop! This module explains the CSS Box Model and how it is used with your HTML elements to improve layouts. hen you will learn more about Responsive Web Design (RWD) and how to put in CSS so your websites will adjust to the user. We'll learn how to transform your images with CSS. You'll learn how to use images as backgrounds, how to create filters for images using CSS, and how to apply several different effects to your images. Finally, you'll learn how to create simple animations to make your site more interesting and place movement into the site.

List of Lessons

The CSS Box Model
CSS Responsive Web Design
Transforming Images with CSS
CSS Animations

Essential Questions

What is the CSS Box Model used for?
Why do we need to create responsive websites?
When would you use CSS to transform images on a website?
What is the purpose of using CSS for animation?

Key Terms

Animation | A process to turn still images into moving images.

Aspect Ratio | The ratio of the width to the height of an image. It is important to keep the aspect ratio correct.

Bitmap Images | Images created from colorized pixels.

Breakpoint | A point in the layout of a website or application where the design or layout needs to be adjusted to provide a better user experience on different screen sizes or devices.

CSS Box Model | How the browser renders elements in 4 areas – content, padding, border, and margin.

CSS Filters | Photo effects applied to images using CSS.

Frame | An image or drawing.

Frame Rate | How many frames are displayed per second.

Image Masking | Layering images to show some of the image but not other parts of the image.

Image Sprites | Multiple images combined into a single image.

Keyframe | The starting and ending points of the transition.

Media Queries | A technique used to adapt the layout and styles of a webpage based on the characteristics of the device and screen size that is being used to view the page.

Motion | Several frames viewed very quickly to give the impression of motion.

Set | The background of the animation.

Vector Images | Images created from line art or objects.

WebKit | An open-source web browser engine that powers many modern browsers. It renders pages and interprets HTML, CSS, and JavaScript.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION