Intro to HTML/CSS

Module Topics HTML concepts CSS concepts
#1
  • Heading
  • Paragraph tags
  • Document structure
  • Basic styles
  • Headings (h1 - h6)
  • Paragraphs (p)
  • style attribute and style element
  • White space
  • Colour (color)
  • Font family (font-family)
  • Font size (font-size)
  • Pixels
  • Line height (line-height)
  • Margins (margin)
  • Width (width)
  • Background colour (background-color)
#2
  • More basic HTML tags
  • Colours
  • Alignment
  • Links
  • Images
  • strong and em elements
  • Line breaks(br)
  • Spans(span)
  • Links (a)
  • Images (img)
  • Text alignment (text-align)
  • Defining color in RGB (rgb(0, 128, 255))
  • Text decoration (text-decoration)
  • Height (height)
  • Auto-width margins (margin: auto;)
  • Setting width and height using percentages
#3
  • Higher level HTML tags
  • Linking stylesheets
  • Lists
  • Top-level HTML elements, html, head and body
  • Adding a document title (title)
  • Linking an external stylesheet (link)
  • Unordered (ul) and ordered (ol) lists
  • Subscripts (<sub>) and superscripts (sup)
  • List properties list-style-position and list-style-type
  • Changing text with text-transform
#4
  • Classes
  • Font properties
  • Margins
  • Borders
  • Padding
  • Commas in selectors
  • class attribute
  • CSS syntax: selectors, properties and values
  • Class selectors
  • font-weight and font-style
  • margin as a shorthand property
  • Borders (border)
  • Padding (padding)
  • Design concept: the importance of whitespace
  • Selecting multiple elements using commas (,)
#5
  • Divs
  • Web fonts
  • Box model
  • Rounding corners
  • div elements
  • Web fonts: using Google web fonts
  • Design concept: font choice
  • Box model and box-sizing: border-box and font-style
  • Rounding corners using border-radius
#6
  • Background images
  • Transparency
  • Inline, block and inline-block display properties
  • Icon sets
  • Inline vs. block elements
  • Multiple classes on an element
  • Icon sets: using FontAwesome icons
  • Overriding styles
  • Background images background-image and background-repeat
  • Transparent colours (rgba(0, 128, 255, 0.5))
  • display property and the value inline-block
  • More text-decoration values
#7
  • Semantic HTML tags
  • Child selectors
  • Vertical alignment
  • Document structure
  • Headers (header)
  • Footers (footer)
  • Articles (article)
  • Asides (aside)
  • Sections (section)
  • Child selectors using the greater than symbol (>)
  • Vertical alignment of inline-block elements (vertical-align)
#8
  • Navigation
  • Hover
  • Hiding content
  • Dropdown menus
  • Negative margins
  • Navigation (nav)
  • hover pseudo-class and the :hover selector
  • Hiding and unhiding content using the display property
  • Styling dropdown menus using lists and hover
  • Negative margins
  • Design concept: colours