HTML Essential Training

with Jen Simmons

Links to CodePen Exercises and Other Resources

Chapter 2
Paragraphs

• https://codepen.io/jensimmons/pen/bGbooGB
Headlines

• https://codepen.io/jensimmons/pen/RwbLZzb?editors=1000
• https://codepen.io/jensimmons/pen/aboLEwE?editors=1000
Bold and italics

• https://codepen.io/jensimmons/pen/BaBwJEj?editors=1000
• https://codepen.io/jensimmons/pen/vYBedaG?editors=1100
Lists

• https://codepen.io/jensimmons/pen/zYOPPPY?editors=1000
Quotes

• https://codepen.io/jensimmons/pen/aboqYJX?editors=1100
• https://codepen.io/jensimmons/pen/ZEzroGZ?editors=1100
• https://codepen.io/jensimmons/pen/ExYQLNj?editors=1000
Dates and times

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
Code, pre, and br

• https://codepen.io/jensimmons/pen/gOYveZW
• https://codepen.io/jensimmons/pen/VwZQBvJ
• https://codepen.io/jensimmons/pen/OJLQEYy
• https://codepen.io/jensimmons/pen/gOYvjpa
• Superscripts, subscripts, and small text
• https://codepen.io/jensimmons/pen/LYPQdMV?editors=1000

Chapter 3
Debugging HTML

HTML Essential Training with Jen Simmons 1 of 4

 • https://codepen.io/jensimmons/pen/xxKjYRR?editors=1100
• https://s.codepen.io/jensimmons/debug/xxKjYRR
• https://codepen.io/jensimmons/pen/aboGBML?editors=1000
• https://s.codepen.io/jensimmons/debug/aboGBML
HTML attributes

• https://codepen.io/jensimmons/pen/WNeJErX?editors=1100
• https://codepen.io/jensimmons/pen/KKPRZLJ?editors=1000
• https://s.codepen.io/jensimmons/debug/KKPRZLJ
• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
ARIA roles

• https://codepen.io/jensimmons/pen/wvwjxJa?editors=1100
Formatting HTML

• https://codepen.io/jensimmons/pen/MWgGVqr?editors=1000
• https://codepen.io/jensimmons/pen/ExYLRmg?editors=1000
• https://codepen.io/jensimmons/pen/YzKLvdv?editors=1000
• https://codepen.io/jensimmons/pen/GRKdBKe?editors=1000
• https://codepen.io/jensimmons/pen/KKPRBdM?editors=1000
Weird characters

• https://codepen.io/jensimmons/pen/wvwjmYz?editors=1000
• https://dev.w3.org/html5/html-author/charref
• https://codepen.io/jensimmons/pen/VwZxGmL?editors=1000
• https://codepen.io/jensimmons/pen/zYOmOPX?editors=1000

Chapter 4
Links

• https://codepen.io/jensimmons/pen/wvwjERm?editors=1000
Navigation

• https://codepen.io/jensimmons/pen/rNBvqKL?editors=1100
• https://codepen.io/jensimmons/pen/dybKOxm?editors=1000
• https://codepen.io/jensimmons/pen/vYBrgYz?editors=1100

HTML Essential Training with Jen Simmons 2 of 4

Chapter 5
Images

• https://codepen.io/jensimmons/pen/BaBVpJy?editors=1000
• https://codepen.io/jensimmons/pen/WNeypYz?editors=1100
Responsive images

• https://codepen.io/jensimmons/pen/QWLxgMy?editors=1000
• https://codepen.io/jensimmons/pen/jONeawJ?editors=1000
Responsive width

• https://codepen.io/jensimmons/pen/WNeyPXL?editors=1000
Responsive pictures

• https://codepen.io/jensimmons/pen/MWgXRgE?editors=1000
• https://codepen.io/jensimmons/pen/wvwXLQa?editors=1000
Figure and figcaption

• https://codepen.io/jensimmons/pen/OJLEWBV?editors=1100

Chapter 6
Audio

• https://codepen.io/jensimmons/pen/BaBVdWp?editors=1000
Video

• https://codepen.io/jensimmons/pen/VwZdzBe?editors=1000
Captions and subtitles

• https://codepen.io/jensimmons/pen/KKPevBe?editors=1000
Embedding other media through iframes

• https://www.youtube.com/watch?v=0Gr1XSyxZy0

Chapter 7
Generic elements: div and span

• https://codepen.io/jensimmons/pen/dybjNLQ?editors=1000

HTML Essential Training with Jen Simmons 3 of 4

Chapter 9
HTML form basics

• https://github.com/jensimmons/html/blob/master/ch10/S10-01.html

Chapter 10
Building table rows

• https://codepen.io/jensimmons/pen/WNeKpro?editors=1100

HTML Essential Training with Jen Simmons 4 of 4