DawidLoubser/html-css-mentoring

A scratchpad of code samples for a basic HTML/CSS mentoring session

HTML and CSS mentoring: Scratchpad

A scratchpad of code samples for a basic HTML/CSS mentoring session. This repository will be populated on the fly, to efficiently share code samples with the group.

Outline (4-hour session)

Context

• The Web Browser and the DOM
• The HTTP Protocol
• Web Development tools

HTML

• Typography
• Forms
  • Using browser tools to inspect requests
• Images and media
• General app development
  • None! Need to add semantics and styling with CSS classes

CSS

• Overview
  • Selectors
  • Rules
• Common rules
  • Colours
  • Fonts
  • Images
  • Borders and spacing
• Cascading behaviour
  • Specificity
• The Box model
  • Display types: Inline, Block, Inline-block, etc
  • Positioning: Absolute, Relative, Fixed
    • Nesting (relative positioning)
• Visual effects rules
  • Transparency
  • Drop shadows
  • Transformations
    • Geometric
    • Effects
• Font icons for efficient, scalable icons
  • FontAwesome
  • Google Material Design Icons
• Interactivity
• CSS Animation
• Media queries
  • Responsive grids (Bootstrap / Foundation / Native CSS Grid - 2017+)
  • Mobile-first design

Beyond CSS

• Sass
  • Adds computation, re-use of concepts
  • Not supported in browsers, compile to CSS with sass

Resources

• Mozilla Developer Network (MDN)