Skip to content

Latest commit

 

History

History
138 lines (99 loc) · 8.26 KB

css.md

File metadata and controls

138 lines (99 loc) · 8.26 KB
Raw

Intro to CSS

Week 1 Keywords and Questions

(See first slide deck)

  • What is CSS?
  • Why Cascading?
  • Does order matter?
  • What is the difference between a Class and an ID?
  • Do you know what a parent, child, sibling component is?
  • What does inline, block, inline-block mean?
  • Can you name one element that natively has each of those display properties?

Week 2 Keywords and Questions

(See second slide deck)

  • What is the box model?
  • How does padding relate to the box?
  • How do margins relate to the box?
  • Display (get these memorized): Block, Inline-block, Inline
  • Why would I want to change the default display of a span?
  • What is a media query?
  • At what sizes should I plan on having breakpoints? (mobile, tablet, desktop, large screen)
  • What is a breakpoint?

ProTip

Create a bookmark folder on your bookmarks bar called CSS and save the CSS articles from the curriculum in one space so you can review a list of what you've learned when building projects.

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

  • CSS enables the separation of presentation and content and this separation can improve content accessibility, provide more flexibility, and reduce complexity and repetition in the structural content.

  • 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 web pages. (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 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

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 straightforward.

  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 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 the use of inline and block values in the display property.
  • Name a common mistake developers often make when using CSS.

Supplemental Resources