Making with Code

HTML #

In this lab, you will write your first web page in HTML.

🌐 Github Repo: github.com/Making-with-Code/lab_html

💻 Open index.html in your web browser: open index.html.

index.html is the most common name for the start page of a web site.

💻 Open the lab_html folder in your code editor: atom .. You will see the following files:

  • index.html - you will write HTML here
  • assets/blackout_cake.jpeg - add this photo to your page
  • cake_recipe.txt - recipe content information
  • styles.css - style sheet

💻 Use the recipe information in cake_recipe.txt to create web page for the recipe in index.html. Be sure to include all of the key information to make the cake, but feel free to rearrange it or change the wording.

Be sure to include at least 1 instance of each element:

  • heading
  • image
  • division
  • paragraph text
  • italic text
  • bold text
  • link
  • ordered bullet points
  • unordered bullet points

You can find information on HTML elements/tags HERE.

Extension: CSS #

💻 Add custom styling to your page by editing styles.css. You can find information on CSS styling HERE.

  • can you change the color of just the sub-headings? just the paragraph text?
  • can you change the color of the link when you hover of it?
  • can you use multiple fonts throughout the page?
  • can you put the image next to the description text?

Extension: CSS Layout #

CSS can be also be used to apply layout designs to your webpage.

💻 Add custom layout to your page by incorporating a flexbox layout. You can find information on flexbox styling HERE.