Course Structure

Course Objectives

HTML Fundamentals

script tag
noscript tag
html file structure
doctype
html
head
title
body
link
link_colors
mime type
element types
meta tag
viewport exam example
entities
comments
well-formed element
validation

CSS Fundamentals

stylesheet types
stylesheet precedence
CSS selectors
css selector syntax
CSS specificity
CSS inheritance
css_cascade_label_examples
web safe fonts
lvha
child combinator examples
descendant combinator examples
next sibling combinator examples
subsequent sibling combinator examples
pseudoclass selector examples
pseudo_element
commat_import

Document Structure using HTML

table
h1 to h6
p tag
br tag
hr tag
div
span
ol
li
ul
description_list
header
nav
main
section
article
aside
footer
details/summary
target
anchor
bookmarks
absolute relative links
map area
forms (basic)
forms (basic iframe)
forms post
forms post fetch method
forms get
forms radio
forms checkbox
forms select
forms textarea
forms files
forms hidden
form
fieldset
label
input
input radio
input checkbox
input range
input submit
input datalist
select
textarea
input methods
output
accesskey
tabindex

Multimedia Presentation using HTML

img
img_srcset_sizes_example
img_srcset_sizes_cat_example
img_srcset_density_example
figure
picture
picture_srcset_example
picture_densities_example
video
video_exam_question
float_exam_question_ecoll
audio
track
track_example_one
track_example_two
vtt
source
iframe
canvas
canvas_example_one
canvas_example_two
canvas_example_three
canvas_example_four
svg
svg_example_one
svg_example_one_path
svg_example_one_rounded
svg_example_two
svg_example_three
svg_example_four
svg_example_five
svg_example_six
svg_example_six_two
svg_example_seven
svg_example_eight
svg_repo_example
svg_apple_simpleicons
svg_canvas_area_comparison

Webpage Styling using CSS

float
float_example_one
float_example_two
three_divs_and_float
position:static
position:relative
relative_example_one
position:absolute
absolute_example_one
absolute_example_two
absolute_example_three
absolute_example_four
position:fixed
fixed_example_one
position:sticky
sticky_example_one
positions_float_summary_example
max_width
max_width_example_one
max_width_image_example
background
background_attachment
background_clip
background_color
background_image
background_origin
background_position
background_repeat
background_size
responsive_background_image_example
whitespace
wordbreak
letter_word_spacing
line_height
text_indent
vertical_align
sprite_example
overflow
height
width
align
display
inline_vs_block
visibility
box_model
box_model_example_one
box_model_example_two
box_model_example_three
trbl_and_variants
margins
padding
trbl_css
responsive_design
flexbox
flexbox_example_one
flexbox_example_two
flexbox_example_three
css_grid
css_grid_example_one
css_grid_example_two
css_grid_example_three
css_grid_example_four
css_inheritance_exam_question
css_positioning_exam_question
text_decoration
text_transform
font_variant
center_div_grid_flexbox
translate
css_units

Accessibility, Readability and Testing

accessibility overview
accessibility principles
color contrasts
color wheel

References and Mnemonics

mnemonics
video_mnemonics
references

Extra

Marcotte responsive web design