INFS 415

HTML

HTML Overview HTML5 Details and Summary

CSS

CSS Overview CSS Selectors CSS3 Attribute Selectors and Substring Matching Attribute Selectors Pseudo-Classes Pseudo-Elements Transitions 2D Transforms 3D Transforms CSS Custom Properties or Variables Text and Box Shadows Gradients and Background Gradients Fonts Background-Clip Property Text Filled with Gradient or Image CSS Columns Text Properties

Media Queries

Media Queries Media Query Example 1 Media Query Example 2 Media Query Example 3 Media Query Example 4 Dark Mode: A Media Query Selectivly Hiding or Displaying Text Using Media Queries

Images

Figure and FigCaption Elements Background Images CSS Filters Filters Clip Path Mask Image Hero or Banner Image

Responsive Images

Responsive Images Example 1: Responsive Images Example 2: Responsive Images Example 3: Responsive Images Example 4: Responsive Images

Flexbox

Flexbox Flexbox Example 1 Flexbox Example 2 Flexbox Example 3 Flexbox Example 4 Flexbox Example 5 Flexbox Example 6 Flexbox Example 7 Flexbox Example 8 Flexbox Example 9 Flexbox Example 10 Flexbox Example 11 Flexbox Example 12 Centering with Flexbox Flexbox Menu

Grid

CSS Grid 1: An Introduction CSS Grid 2: Creating an Explicit Item That Spans Two (or more) Grid Areas CSS Grid 3: Defining an Explicit Grid CSS Grid 4: Alignment and Justification within an Explicit Grid CSS Grid 5: Implicit Rows and Columns CSS Grid 6: Implicit Grid with No Explicit Items CSS Grid 7: Creating a Responsive Photo Album with Implicit Grid CSS Grid 8: Commands Overview CSS Grid 9: Layouts Auto-Fit vs Auto-Fill Grid or Flexbox?

Responsive Menus

Responsive Menus Responsive Menu Example 1: Row to Column Responsive Menu Example 2: Flexbox Responsive Menu Example 3: Separate Page Responsive Menu Example 4: Repositioning the Menu Responsive Menu Example 5: Dropdown Menu with Target Responsive Menu Example 6: Off Canvas Menu Another Off Canvas Example*

Misc

HTML and CSS Units of Measurement Color Codes Design Trends or Approaches Markdown

JavaScript

JavaScript Ex 1 JavaScript Ex 2 JavaScript Ex 3 JavaScript Ex 4 JavaScript Ex 5 JavaScript Ex 6 JavaScript Ex 7