HTML and CSS Review Videos - SEIR-59/course-wiki GitHub Wiki

Most of these awesome videos are made by Matt Huntington, and Instructor at GA

HTML

HTML (~14.5 minutes)

  • Explain what HTML Stand for and how it Differs from Regular Text
  • Explain what a tag is, what it does, and its advantages/disatvanges
  • List some Common HTML tags
  • Explain what content is and give some examples
  • Explain what attributes are and give some examples
  • Explain what Semantic HTML means

HTML (~16.5 minutes)

Learn how to insert the following elements into a web page
  • header
  • footer
  • main
  • navigation
  • lists
  • aside
  • article
  • section
Learn how to insert the following media into a web page
  • images
  • audio
  • video

CSS

CSS - Intro and Basics

Introduction to CSS (~ 5 minutes)

  • What does CSS stand for
  • Create a CSS file and include it in our HTML
  • What are the different elements of a CSS rule

CSS - Colors, Backgrounds, and Font Basics (~ 11 minutes)

  • How to change an element’s color (name/values)
  • How to change an element’s background (color/image)
  • How to change an element’s font-size
  • How to change an element’s font-family
  • How to change an element’s font-weight
  • How to align an element’s text horizontally

CSS - Selection (~ 17 minutes)

  • How do we target multiple selectors
  • What are Ancestors/Descendants and how do we select them?
  • What are IDs/Classes? How do they differ and how do we select them?
  • How do we combine tag name, id and classes in CSS selectors
    • tags with class
    • id with class
    • multiple classes
    • tag with id

CSS - Layout

CSS - Box Model (~ 7.5 minutes)

  • What is the box model?
  • Height/Width
  • Padding
  • Border
  • Margin
  • Box-Sizing : border-box (explore further)

CSS - Display ( ~ 6.5 minutes)

  • What are display properties for HTML elements?
    • block
    • inline
    • inline-block
    • none (explore further)

CSS - Positioning (~ 12 minutes)

  • What are the ways to position HTML elements?
    • static
    • relative
    • absolute
    • fixed

CSS - Units of Measure Part 1 (~ 10.5 minutes)

  • px
  • em
  • rem
  • %

CSS - Viewport Units of Measure (~ 8.5 minutes)

  • How do viewport units of measure work?
  • What are the different types of viewport units of measure
  • When are viewport units of measure useful?

CSS - Units of Measure Part 2 ( ~ 14.5 minutes)

  • what is fluid layout
  • when do we use each unit of measure

Advanced Inline Layout

CSS - Floats (~ 9 minutes)

  • How to float text around an element
  • Using float as an alternative to inline-block ( legacy - once industry standard, may see it a lot, but there are more modern ways since the end of IE (January 2016)

CSS - Calc ( ~ 7 minutes)

  • How do we combine percents with fixed values?

CSS - Advanced Selectors

CSS - Pseudo Selectors Links ( ~ 5 minutes)

  • :hover
  • :active
  • :focus
  • :visited

CSS - Pseudo Selectors Children ( ~ 4 minutes)

  • :first-child
  • :first-of-type
  • :last-child
  • :last-of-type

CSS - Pseudo Selectors Nth Child (~ 3.5 minutes)

  • :nth-child()
  • :nth-of-type()
  • :nth-last-child()
  • :nth-last-of-type()

CSS - Pseudo Selectors Only and Not ( ~ 5 minutes)

  • :only-child
  • :only-of-type
  • :not()

CSS - Family Selectors ( ~ 10 min minutes)

  • wild card selector
  • child selector
  • next adjacent sibling
  • any future sibling

CSS - Attribute Selectors ( ~ 7 minutes)

  • does the attribute exist?
  • test exact match
  • test beginning of attribute value
  • test end of attribute value
  • test a substring
  • test an exact word separated by a space
  • test the start of a hyphenated word

CSS - Responsive Design

CSS - Intro to Responsive Design ( ~7.5 minutes)

  • explain responsiveness and why we need it

CSS - Mobile First Design ( ~ 10.5 minutes ) --

  • using min/max-width/height
  • start by developing mobile and moving upward
  • avoid desktop to mobile

CSS - Media Queries ( ~ 9 minutes)

  • what are media queries?
  • how to use them?

Forms

HTML - Forms ( ~ 18 minutes)

  • list form tags and their attributes

Fonts

CSS - Fonts Intro ( ~ 9 minutes )

  • how to include font files
  • Using online fonts

CSS - Sprites (~ 10.5 minutes)

CSS - Icon Fonts Part 1 ( ~8 minutes)

CSS - Icon Fonts Part 2 ( ~ 9 minutes)

CSS - SVG ( ~ 6 minutes)

Motion, Transform, and Animations

CSS - Transform (~ 8.5 minutes)

  • Rotate
  • Translate
  • Scale
  • Skew
  • Translate 3D
  • Matrix
  • Matrix 3D

CSS - Motion: Transitions ( ~ 9 minutes)

  • What is a keyframe?
  • What is tweeting?
  • How do we specify transitions in CSS?
  • What is an easing function?

CSS - Motion: Animations ( ~ 5 minutes)

  • How to create and name an animation
  • Using an animation
  • Animation direction
  • Animation iteration Count

Design

CSS - Design Tips ( ~ 16.5 minutes)

  • Explain graceful degradation and progressive enhancement
  • Measuring space in mockups
  • white space
  • tips for working with a designer
  • trying to think like an interactive designer

Flex Boxes

CSS - Intro to flex box ( ~ 8 minutes)

  • Diagram of Flexbox
  • Properties of a flex container
  • properties of flex items

CSS - Flexbox : wrap, justify, align(~ 12 minutes)

  • about Flex Boxes:
  • wrap
  • justify
  • align content

CSS - Flexbox: Child property( ~ 8 minutes)

Recommended Projects

These projects will help you learn to master CSS!
We have specific activities and example web pages for you to try to build one or more, using ONLY Javascript, HTML, and CSS. No libraries... build it from scratch :)

Labs 1-2 hours each:

  • [Layout](Additional CSS/0c. Layout/student_labs/README.md)
  • [Advanced Inline Layout](Additional CSS/1. Advanced Inline Layout/student_labs/README.md)
  • [Flex lab](Additional CSS/5. Flex Boxes/student_labs/README.md)
  • [Motion Transform Design](Additional CSS/4. Motion, Transform, and Design/student_labs/README.md)

Build Your Own Version: