Topics

• Paragraph elements
• HTML headings
• HTML lists
• Anchor tags
• HTML images
• Using MDN as a resource
• HTML Boilerplate
• Chrome Inspector
• VS Code Formatting on Save (my cheatsheet for using Prettier as your formatter)

Tutorials

When writing code for your tutorials remember to start in Visual Studio Code with creating and opening a folder for the week’s exercises. For example use a folder named, “week1”.

• 03 HTML – The Essentials, videos 019 – 031
• Exercise files to publish on your server as HTML:
  • chickens.html (Colt uses the chicken Wikipedia page, but if you’d like to pick another for your example please do!)
  • pictures / chicken1.jpg & chicken2.jpg
  • about.html
  • pangolin exercise use this reference image and publish as pangolin.html

Problem Set

Create a webage page, “my hobby,” picking your own hobby/interest illustrating two examples. Create a folder and save files inside like this:

my-hobby / index.html
my-hobby / img / image1.jpg & image2.jpg

Include the following on your page:

• create a main heading <h1>;
• included for each example;
  • give a sub-heading <h2>;
  • use/edit images with a max-width of 300px;
  • provide a link to a source of information for each example <a href="source">;
  • create an unordered list <ul> with <li> items;
  • create two lorem-ipsum paragraphs;
  • bold face some text in one paragraph <b> or <strong>;
  • include an HTML comment in your code.

Below is an image of an example page

For the blog

Remember to link to all your work hosted on your site with Reclaim Hosting. Also respond in your post to the following prompts:

• Describe the importance of the HTML “boilerplate.” What are its main parts? And what are they used for?
• What’s the importance of naming an HTML file index.html? (Colt didn’t discuss this one yet, but see if you can figure it out!)