Read Jon Duckett's HTML & CSS, paying special attention to chapters 1-5, 7, 8, 10-13. The remaining chapters are now out of date.

Know the following HTML elements, whether they are inline or block, and what if any CSS values are associated with them by default:

a
p  h1  h2  h3  h4  h5  h6
ul  ol  li
form  input
button
meta
div  span
strong  em
main  header  footer  section
img  figure  figcaption  video

Familiarize yourself with the various input types and the available semantic elements.

For CSS, know the properties color and background-color and be able to express color in the various syntaxes rgba(255, 255, 255, 1), #fff, #ffffff, white; the typographic properties font-family, font-size, font-weight; the Box Model and the relationships between padding, margin, border; position and its corresponding values absolute, relative, fixed and associated top, left, right, bottom; all supported values for display paying special attention to flex and grid; And know the significance and differences between: px, %, em, rem, vh, vw, vmin, vmax. This is a handy article describing different approaches to centering elements.


Be able to answer the following questions:

What's the difference between a block and an inline level element? Give two examples of each.

Describe the HTML syntax. Identify the tag name, the attribute and the value. What tags will (almost) every page feature?

What are the default CSS values of h2, button, and a tags?

Describe the relative advantages of PNG, GIF, JPG, and SVG. Which of these are raster and which are vector based? Which support alpha channels, AKA transparency?

What's the difference between absolute and relative paths? What do two dots .. mean?

Describe the three ways (inline, internal and external) CSS can be added to a page.

What's the difference between padding and margin?

What's the difference between em and rem units [answer here]? What's the difference between vw or vh and %?

Explain the CSS features of inheritance and specificity.