Website Design and Development with HTML5 and CSS3

5Practical Exercises

In this chapter, we present practical cases to explain theoretical concepts previously discussed in this book.

5.1. PE1: structure of an HTML5 web page

5.1.1. Purpose

In this workshop, we present the design of a web page by referring to the HTML5 semantic tags and using some CSS3 style properties.

5.1.2. Presentation

1. 1) This workshop presents a simple structure of a web page with its associated style sheet. It covers the following concepts:
   • – structuring an HTML page (head/body/header/nav/main/article/aside/footer);
   • – importing elements (font/icons/style sheet/conditional import);
   • – organizing the elements of an HTML page (container/header/menu/sidebar/ footer);
   • – adding style properties to these elements.

1. 2) Referring to the following screenshot (see Figure 5.1), you are asked to create an HTML web page, as well as its CSS, while respecting the following indications:
   • – create the elements of your HTML page: <header>, <nav>, <main>, <footer>;
   • – in the <main> add an <article> element and an <aside> element;
   • – create a CSS: “style.css”;
   • – import the following Google fonts, icons and CSS: https://fonts.googleapis.com/css?family=Roboto (Roboto font); https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css (icons);
   • – import a JavaScript code snippet to verify that HTML5 works with older versions of the IE browser: https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js (JS script);
   • – add style properties to the HTML ...