Introduction to CSS

Table of Contents

CSS Basics

• 
  00:00:00 - 00:02:36

  HTML File Setup

  Jen instructs students how to set up a HTML file in VS Code for the second section of the bootcamp.
• 
  00:02:37 - 00:08:12

  Creating a CSS File

  Jen instructs students how to open a CSS file in VS Code.
• 
  00:08:13 - 00:15:25

  Changing the Font with CSS

  Jen demonstrates how to change fonts with fallback options in the file. Important concepts such as property, value, declaration, declaration block, and selector are introduced.
• 
  00:15:26 - 00:22:54

  CSS Backgrounds & Borders

  Jen explains how to add background colors and then codes a snazzy new border into the web page.
• 
  00:22:55 - 00:29:51

  Styling a Blockquote

  Jen uses a blockquote to demonstrate how to apply various styles to a tag. Responsive font sizing is also discussed.

CSS Classes & the Cascade

• 
  00:29:52 - 00:34:05

  CSS Classes

  Jen introduces CSS classes for targeting user-specified HTML elements.
• 
  00:34:06 - 00:35:12

  CSS Properties Exercise

  Students are instructed to add 5-6 CSS styles of their choosing to their page as a CSS exercise.
• 
  00:35:13 - 00:45:30

  Sharing CSS with CodePen

  Jen demonstrates how to utilize CodePen to share work and also view work by others, and then shows off a few student creations.
• 
  00:45:31 - 00:49:46

  The Cascade

  Jen examines the cascade within CSS, which allows multiple CSS rules to be applied to an HTML element and determines which effect is visible.
• 
  00:49:47 - 01:00:21

  Link Pseudo-Classes

  Jen demonstrates how to utilize pseudo-classes to add extra functionality to the CSS document and how to target links with classes.
• 
  01:00:22 - 01:02:59

  Pseudo-Classes Q&A

  Jen answers questions regarding pseudo-classes.
• 
  01:03:00 - 01:07:37

  Descendant Selectors

  Jen explains how descendant selectors coexist with parent selectors within the stylesheet.
• 
  01:07:38 - 01:17:36

  Style Placement

  Jen discusses placing styles in stylesheets, between style tags, and inline. Demonstrating specificity in CSS, Jen then goes over "winning" rules in the HTML file, illustrating which cascading styles hold true.
• 
  01:17:37 - 01:21:32

  Grouped Selectors & IDs

  After explaining how to group CSS declarations to reduce code repetition, Jen reviews ID selectors. ID selectors allow for pinpointing CSS rules to specific portions of a web page.

CSS Tools & Exercises

• 
  01:21:33 - 01:24:59

  Color Tools

  Jen reviews two tools for color choices for a web page including a website with color combinations, and a browser extension that has built-in tools such as a color picker, eye dropper, gradient generator, and other color tools.
• 
  01:25:00 - 01:26:23

  CSS Validator

  Jen reviews how to check CSS code for errors using a validator.
• 
  01:26:24 - 01:28:55

  Posting Images to the Web

  Jen discusses how to post images on the web when moving files from local computer to another hosted service like CodePen.
• 
  01:28:56 - 01:32:34

  CSS Exercises

  Jen instructs students to apply styles to their previous HTML exercise, the book markup.

CSS Spacing

• 
  01:32:35 - 01:36:52

  The Box Model

  Jen gives an overview of the box model and explains how margin, border, and padding come together within it.
• 
  01:36:53 - 01:40:20

  Div Tags

  Jen uses an example on CodePen to illustrate how the div tag works and gives a few of its use cases.
• 
  01:40:21 - 01:49:40

  Styling Div Tags

  Jen applies CSS rules such as margin, padding, and borders to style div elements.
• 
  01:49:41 - 01:55:50

  Padding

  Jen exemplifies padding usage by adding it to the right and left sides of a div element.
• 
  01:55:51 - 02:02:27

  Editing Default Margins

  Jen demonstrates how to find and remove default margins from paragraphs and headings and add in new values.
• 
  02:02:28 - 02:06:25

  Block vs. Inline Elements

  Jen contrasts block elements, that by default fill their entire container, and inline elements, that are only as large as their content.
• 
  02:06:26 - 02:12:02

  CSS Units

  Jen discusses units of measurement in CSS, and explains how they relate to font and spacing.
• 
  02:12:03 - 02:14:32

  Width

  Jen reviews the CSS width property, which is used to specify the width of an element.
• 
  02:14:33 - 02:19:54

  Height

  Jen reviews the CSS height property, which is used to specify the height of an element.
• 
  02:19:55 - 02:21:35

  Don't Use Height

  Due to the many screen sizes used to browse the web, Jen advises against using the height property, as it will potentially prevent content from being visible.

CSS Layout with Block & Inline Block

• 
  02:21:36 - 02:30:37

  Vertical Navigation Bar Styling

  Jen demonstrates how to code a navigation bar.
• 
  02:30:38 - 02:38:21

  Styling Navigation Items & Links

  Demonstrating how to style a navigation bar, Jen adjusts the CSS rules on ul and li elements and adds hover state rules to links.
• 
  02:38:22 - 02:44:00

  Styling Inline vs. Block

  Jen adjusts the presentation of the navigation menu items by changing the display property value from its default, inline, to block.
• 
  02:44:01 - 02:48:12

  Horizontal Navigation Bar Styling

  Jen uses inline-block to convert the vertical navigation bar to a horizontal navigation bar.

CSS Layout with Floats

• 
  02:48:13 - 02:57:33

  Floats & Padding

  Jen discusses the purpose of floats and uses the float attribute to position an element to the left. Spacing is then added to the element float was applied to.
• 
  02:57:34 - 03:01:38

  Margin Shorthand

  Jen introduces the margin shorthand TRBL, which assigns margins based on four space-separated values.
• 
  03:01:39 - 03:05:36

  Auto Margins

  Jen explains how to center an article element on any device by setting the element's left and right margins to auto.
• 
  03:05:37 - 03:12:48

  Float Image Right & Clear

  Jen uses the CSS property clear to ensure the floated image remains within the border of the article element.
• 
  03:12:49 - 03:14:10

  Floats Exercise

  Jen introduces an exercise to add floats to a book page.
• 
  03:14:11 - 03:16:47

  Floats Solution

  Jen shows off a few student creations from the previous exercise.

CSS Layout with Flexbox

• 
  03:16:48 - 03:21:03

  Flexbox with Display Flex

  Jen introduces flexbox, one method of laying out web pages, by setting an unordered list to display flex.
• 
  03:21:04 - 03:25:04

  Direction & Wrap with Flex Flow

  Jen demonstrates usage of flex-flow, which combines rules for flex-direction and flex-wrap.
• 
  03:25:05 - 03:27:45

  Flex Justify Content

  Jen discusses how to use the justify-content rule to designate the distribution of boxes within the flex container.
• 
  03:27:46 - 03:33:24

  Flex Item Basis

  Jen covers flex-basis, which allows boxes within a flex container to take up a chosen percentage of the total space while remaining the same height as the other boxes.

CSS Layout Exercise

• 
  03:33:25 - 03:39:52

  Code a Blog Page Exercise

  Students are instructed to code a blog page using an image of the completed page as a reference.
• 
  03:39:53 - 03:48:23

  Footer CSS Solution

  Jen codes the first part of the solution, uses inline block, top and bottom borders, and a bottom margin.
• 
  03:48:24 - 03:50:43

  Wrapper CSS Solution

  Jen demonstrates how to create a wrapper for the blog using width and an auto margin.
• 
  03:50:44 - 03:59:47

  Header CSS Solution

  Jen first identifies the flex container and flex items within the page and HTML code and then uses flexbox to create the solution header.
• 
  03:59:48 - 04:05:10

  Nav Bar CSS Solution

  Jen uses inline block, list properties, and link properties to create the solution nav bar.
• 
  04:05:11 - 04:09:07

  Articles List CSS Solution

  Jen uses float, clear, and spacing properties to create the layout for the articles list section of the solution.
• 
  04:09:08 - 04:11:26

  Solution Wrap-Up

  Jen congratulates students for making progress on the project.