Skip to content

Latest commit

 

History

History
77 lines (52 loc) · 3.49 KB

css.md

File metadata and controls

77 lines (52 loc) · 3.49 KB

CSS

Projected Time

About 4.5 hours

  • 27 minutes for video walkthrough of CSS slides
  • 10 minutes for video walkthrough of CSS-Part 2 slides
  • 3.5 hours for Independent Practice (Project)

Prerequisites

"HTML" lesson

Motivation

CSS is a language, often used in conjunction with HTML, that styles basic HTML code. It's an important language for front-end and full-stack web developers to know because it is almost always used with HTML.

Objectives

Participants will be able to:

  • Select HTML elements using the type, .class and #id CSS selectors
  • Explain the difference between classes and ids
  • Explain what CSS properties and CSS values are, and how they're related
  • Describe the 3 ways that CSS code can be incorporated into a project
  • Sketch the basic file tree for web projects
  • Describe several text properties that can be altered using CSS
  • Describe how borders can be styled using CSS
  • Describe the hierarchy of specificity for CSS selectors
  • Describe the different parts of the "Box" model
  • Effectively use the display property

Specific Things To Teach

  • CSS selectors
  • Common CSS properties and their allowable values
  • How to incorporate CSS into web projects
  • Web project file tree
  • Specificity hierarchy
  • The Box Model
  • How to style with the display property

Supplemental Materials

Lesson

CSS (video walkthrough of slides)

CSS (slides)

CSS Part 2 (video walkthrough of slides)

CSS Part 2 (slides)

Things to Remember

  • You need some HTML code before you can add styling with CSS.

  • HTML and CSS are two different languages. Though commonly referred to together as "HTML/CSS", these are two distinct languages that do completely different things. They work really well together.

  • There are specificity rules in CSS. You need to understand these rules so you can work within them to produce the styling you want.

Independent Practice

No pairs will be assigned for this project, but you should rely on your classmates for help once you've spent 20 minutes working independently through something you're stuck on.

The activity for the HTML, CSS, Bootstrap and jQuery lessons is a project that allows you to combine your new skills in each of these areas.

Click here to access the instructions for the CSS portion of the recipe-page project. Please don't move on to the prompts for the other topics yet.

Check for Understanding

Instructor will do a code review with each apprentice once they've completed the CSS portion of the project.