design1 – Intermediate CSS


  • Section 06 Intermediate CSS – videos 043–055
  • The following HTML and CSS pairs will need to be completed as part of the code-along and uploaded to your server:
    • fonts.html / fonts.css
    • box-model.html / box-model.css
    • tic-tac-toe.html / tic-tac-toe.css
    • photo-gallery.html / photo-gallery.css
      • img/all-nine-jpg-files
    • blog.html / blog.css
  • For the photo gallery code-along please select nine images with some connection to one another from You must crop and resize each image to 1000px x 1000px. All images should be saved in a folder named ‘img’. The images organized in this folder should be used while writing the HTML for your photo gallery project. This folder and the contained images will need to be uploaded to your server.
  • For the blog code-along, you will use two Google fonts instead of one. One font for headings and the other for body text. Select and use a Google font pair from this curated list of ten pairings.

Blogging Questions

Describe your understanding of the box model. What’s the difference between margin and padding? How do borders work? How does the content box work? Draw an example of the box model in your dot journal with labels. Take a photo of it and use it as part of your description. Before uploading your photo, be sure to resize it so that the largest dimension – height or width – is 1000px.

Leave a comment

Your email address will not be published. Required fields are marked *