junior-devleague / goals-card

[Beginner] HTML, CSS - Ordered Lists, Divs, and Headers.

goals-card

What are your goals this year?

Objective

Use HTML Lists, Divs, and Headers to create 4 different goal sections on the page.

Prerequisites

To complete this project, students should have the following:

• Basic understanding of HTML structures and attributes.

Concepts

HTML	Description
ol	An ordered list element.
li	A list item element.
h1	The largest header element.
div	A container element.

Your Challenge

Part I

To complete Part I, fulfill the following requirements:

1. Set up your project file structure through the command line.
2. Create the following:

• HTML file
• CSS file

3. Link all of your files correctly.

Part II HTML

To complete Part II, fulfill the following requirements:

1. Create div with an id of "container".

• Inside of this div, create the following:
• div with a class of "section" and id of "section1".
• div with a class of "section" and id of "section2".
• div with a class of "section" and id of "section3".
• div with a class of "section" and id of "section4".

Inside of EACH div with a class of section, create the following:

• h1
• ol
  • li with text "Goal"
  • li with text "Goal"
  • li with text "Goal"

Inside of the h1, type "Daily Goal" for the 1st section, "Weekly Goal" for the 2nd section, "Monthly Goal" for the 3rd section and "Future Goal" for the 4th section.

Write in your own goals for each section. Try to be as specific as possible.

Part III CSS

To complete Part III, fulfill the following requirements:

1. Target the body element.

• Set the margin to 0.

2. Target the id of container.

• Specify a height, width, and background-color.

3. Target the class of section.

• Specify a height, width, and background-color.

Style each section so that it looks nice!

Stretch Goals

1. Use Flexbox to center your items within each section!