Skip to content

Latest commit

 

History

History
123 lines (89 loc) · 8.23 KB

css.md

File metadata and controls

123 lines (89 loc) · 8.23 KB

Intro to CSS

Projected Time

About 5 hours

  • Lesson: ~ 5 hours
  • Challenge: 10 min
  • 10 minutes for Check for Understanding

Prerequisites

HTML lesson

Motivation

  • Cascading style sheets(CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language like HTML. (reference from wikipedia & town open-data portal)

  • CSS enables the separation of presentation and content and this separation can improve content accessibility, provide more flexibility, reduce complexity and repetition in the structural content.(referenced from Alan Dotchin academy)

  • It can completely control how your web pages look without changing your HTML. It's an important language for front-end and full-stack web developers to know because today it is used in all webpages.(referenced from skillcrush & quora)

    Which companies use CSS? Everyone. Some companies with very beautiful sites are Uber and Nokia.

Looking at an example website

  • Have you ever noticed that some websites are much more appealing than others?
  • Go to wildrenfrew.com and see how unique this website is. Some sections in this site are marvelous.
  • The website is a complete package of correct font, color, images, and video that make it engaging.

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
  • Changing and Removing styles from CSS in a webpage.

Specific Things to Learn

  • 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
  • Experimenting with styles in the inspector

Materials

Lesson

  1. Work through all the free lessons in order on the Codecademy: Learn CSS syllabus (~ 4 hours). If it says "this lesson only comes with a Pro paid plan", you do not need to do it. Taking breaks in between each is recommended! They should each take around 30 minutes. If you are stuck on a certain step, reach out to your peers. This shouldn't happen often, though - it's very straight-forward.

  1. This is a good time for a longer break. Take one!

  2. Read through Part 1 (30 min) and Part 2 (15 min) slides or watch the corresponding videos. They review what you covered in codecademy.

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.

Common Mistakes / Misconceptions

  • A very common mistake made by intermediate developers is, "If I can make things look how I want, then it doesn't matter if something is actually a header, button, or label. I can just make a bunch of divs that look like headers, buttons and labels." Good semantic elements and sections have more built-in functionality than just changing visual styles.
    • A search engine uses the headers and sub-headers on a page for search terms and potential relevance. This is also known as SEO: Search Engine Optimization.
    • Those who use a keyboard instead of a mouse, or who use screen readers to navigate a page, actually receive extra information for their situation.
    • For example, a screenreader user can quickly jump from header to header to find what they need without having to listen to the entire page content, or be reminded that they are still inside the same choice set in a select element, how many choices there are, and which one is selected.
    • (Note: no need to read any links in this section thoroughly, they're just for your reference.)
    • Also note that there are typical patterns many users are used to, and changing them will likely frustrate a user, causing them to give up on using your app.
    • This is not what we are learning today, but keep this in mind as you continue to learn more HTML. Accessibility and SEO will be covered in future outlines.

Independent Practice

Change and remove style and link tags from Google and Amazon and watch the website design change accordingly. Spend 5 minutes for each site.

Check for Understanding

If you can answer these questions, you can feel confident that you understand the lesson. If you are unsure about any of these, reach out to a peer.

  • What is the benefit of using CSS in HTML?
  • Explain the difference between class and id in CSS.
  • Describe how borders can be styled using CSS.
  • Describe the different parts of the "Box" model.
  • Explain use of inline and block value in display property.
  • Name a common mistake developers often make when using CSS.

Supplemental Resources