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.
- The Web Browser and the DOM
- The HTTP Protocol
- Web Development tools
- Typography
- Forms
- Using browser tools to inspect requests
- Images and media
- General app development
- None! Need to add semantics and styling with CSS classes
- 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
- Interactivity
- CSS Animation
- Media queries
- Responsive grids (Bootstrap / Foundation / Native CSS Grid - 2017+)
- Mobile-first design
- Sass
- Adds computation, re-use of concepts
- Not supported in browsers, compile to CSS with
sass