Guided exercise - IronSkydive 💪 - block and inline level elements

Introduction

During this module, you will get familiar with HTML & CSS. Both technologies combined offer you all the tools you need to create a website. HTML without CSS is ugly, and CSS without HTML is... well, nothing!

That is why you will be working on this exercise on multiple occasions during this module. Our end goal is to create a basic HTML & CSS website, where you will practice the various concepts as you are learning them.

IronSkydive | The Company Website

Ironhack loves coding, but we also like to practice extreme sports. In a new line of products, we have created a new company called IronSkydive. We offer a full skydiving experience.

We are hoping you could help us to create our website because we are swamped starting the company and making sure that all our papers are aligned with the rules. 🙈

As we mentioned earlier, you'll be working on this exercise through the next couple of lessons, but in the end, your goal is:

You will be working on a new pen, so proceed to CodePen and create a new pen now. Ready to take the jump?

Part 1 - Block Elements

In this part of the exercise, you are going to work with the block elements you learned. You have seen how the semantic block elements help us s to understand our website's composition better. Let's start by creating the basic HTML structure, which will be the following:

Later on, in the exercise, we are going to distinguish between the different sections we have. Now, let's add a few more block elements inside each element.

Nav

Inside <nav>, create a <ul> tag with three elements:

Day Structure
Team
Schedule

These are going to be our menu options.

Header

You have to create two different things here:

first, create an <h1> tag with the text "IronSkydive", then
under this tag, create a <h2> tag with the text "Let the trip begin" and finally
under these tags, create an <aside> tag that will contain a quote.

Section 1

This section has a dark background that will cover the whole width of the website. Later you will add the color to the background, so for now, no need to worry about this.

It will contain three <article> tags to add the information under the header.

Inside each <article>, add an <h3> tag for the different titles, and a paragraph for the white text. The result would be something like this:

Section 2

This section is quite similar to the previous one. In this case, the section will contain a <h3> title with the text "How do we structure the day?", and then a <div> with four different <article> tags.

Inside each article tag, for the moment, we are going to have a <h4> tag with the article title, and a <p> tag with the article content.

Section 3

This case is the same as Section 1 - it will have a dark background, and, as in the previous sections, you have to add a <h3> title and a <p> with a brief description.

Then, you will create <div> tag and add three empty <article> tags that will contain the information of each team member. It is enough to have a text indicating the different articles:

Section 4

In this section, we have a table that contains the schedule.

Let's start with adding two different <h3> headings with the text:

Schedule
Schedule a Time Slot

Now add a table under the first <h3> tag, that contains the text "Schedule". Indeed, this table is going to contain the IronSkydive schedule for the week. The format of the table is the following:

Time	Wednesday	Thursday	Friday	Saturday
9:00 - 11:00	X		X	X
12:00 - 14:00			X	X
15:00 - 17:00	X	X	X	X

Create the table and add the necessary content to get this result:

Remember, besides <table> tag, you should use <thead> with six <th> tags for the header rows (six days that IronSkydive operates), and then inside body of the table (<tbody>) you should define rows with <tr> tags. In the end, you should use <td> tags for the content inside the rows.

Footer

Last but not least, the footer section has to contain just one <section> tag. Inside the <section>, you have to add several things (described in the correct order):

<h5> with the title "Contact Information".
<address> element, with the correct information: IronSkydive 33 Rue la Fayette, 75009 Paris, France +33 (0) 619 193 088
<h5> with the title "Follow Us".
<ul> list with three elements:
- Twitter.
- Facebook.
- Instagram.

Part 2 - Inline Elements

In the second iteration of our exercise, you are going to work with the inline elements you learned. You have seen that we use different tags with different goals. Remember, this is our current project structure:

You are going to add different inline elements to all the sections we already have.

Nav

The <nav> tag is used to wrap links on our website. Right now, we have just a list of elements. Let's change this, by adding links in each list item.

You have to create three different links, that will be pointing to #structure, #team, and #schedule, respectively:

💡 Spoiler: links are anchor tags and represented with <a> tag and need to have href attribute. 😉

<a href="#structure">Day Structure</a>