💻 Introduction to HTML and CSS

You will explore the two core languages that are used to build web pages; Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).

✅ Learning Outcomes: Exercise 1.3

By completing this exercise you will have experienced the following:

  • Using HTML div tags to group together images and paragraphs.
  • Explore additional CSS properties to see what happens when changes are made to numbers of colours.

Explanation of Divs

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after the <div> element.

Most browsers will display the

element with the following default values:

div {
  		display: block;
		}

🎯 Exercise 1.3: Tell A Story

  • You will be introduced to HTML div tags. Div is short of division, and is a way of grouping things together.
  • Using the index.html edit the code to create your very own story, be creative
  • Build this in CodeSandbox

🆘Use the HTML Code to help you image


Your final webpage should look something like this:

image

⏭️ Next Lesson

  • In the next lesson you will be introduced to more CSS properties allowing for additional customization of your web page.

Copyright © Per Scholas 2023