01. Getting Started

Files That Make Up the Lab

In this lab there are number of HTML files that have been created for you:

• index.html
• qualifications.html
• skill-set.html
• and work-experience.html.

All four HTML pages are attached to the stylesheet styles/main.css which was done using the following:

<link rel="stylesheet" type="text/css" href="styles/main.css">

There is also a folder called flex-examples with an index.html page. This is so you can experiment with flexbox features.

Apart from when experimenting with the files in the flex-examples folder, the CSS in this lab should be added to styles/main.css.

Using More Semantic HTML5 Elements

Our previous designs were very dependent the on <div> tags. Such dependency can lead to what is known as ‘div soup’ where HTML is dominated by many nested <div> tags. With HTML5 we can reduce this dependency on <div> and use more semantic tags. This technique will make our pages easier to read for both developers as well as automated systems as the HTML will now be more descriptive.

Open the index.html page and notice the use of <header>, <nav>, <main>, <section> and <footer> to replace <div> elements from the previous lab files. For example:

<div id="header">
…
</div>

… has been replaced with the more semantic <header> element.

<header>
…
</header>

Chrome Inspector

In this lab you’ll find it very useful to use Google Chrome Inspector. To access the Inspector right-click anywhere in the page and choose Inspect. Under the elements tab you can see the HTML and CSS that is currently in play.

Supportive Reading

HTML and CSS Guide especially:

• Box Model
• Display Property
• Flexbox