An Overview of Our Demonstration HTML and CSS Website

Introduction

In this tutorial, you will explore the structure of the demonstration website and a plan for recreating it in the tutorials ahead.

An Overview of the Demonstration Website

Visually, the site can be broken up into seven horizontal sections:

In the previous overview image, each of the seven sections is labeled accordingly:

• The “Header” section (at the top). Instructions for this section are detailed in our tutorial How To Build the Header Section of Your Website With CSS (Section 1)
• The “About me” section (second from the top). Instructions for this section are detailed in our tutorial [How To Build the About Me Section of Your Website With CSS (Section 2)] (https://www.digitalocean.com/community/tutorials/how-to-build-the-about-me-section-of-your-website-with-css-section-2)
• The “Projects” section (third from the top). Instructions for this section are detailed in our tutorial How To Build a Tiled Layout With CSS (Section 3)
• The “Experience” section (fourth from the top). Instructions for this section are detailed in our tutorial [How To Add a Resume or Work History Section To Your Website With CSS (Section 4)].(https://www.digitalocean.com/community/tutorials/how-to-add-a-resume-or-work-history-section-to-your-website-with-css-section-4)
• The “Education” and “Skills” section (fifth from the top). Instructions for this section are detailed in our tutorial How To Add Your Educational History and Skills To Your Website With CSS (Section 5)
• The featured quote section (sixth from the top). Instructions for this section are detailed in our tutorial How To Create a Featured Quote Box on Your Website With CSS (Section 6)
• The static footer, which “sticks” to the bottom of the page. Instructions for this section are detailed in our tutorial How To Create a Static Footer With CSS (Section 7)

Each of these sections are created with the CSS properties for HTML elements that you explored in the first half of the tutorial series. In the remainder of this tutorial series, you will reconstruct each of these sections in their own separate tutorial. If you are just beginning to learn CSS, we recommend that you replicate the style choices in the tutorials including size, color, and background images to keep things consistent with the examples as you work through each tutorial.

At the end of this tutorial series there are suggestions for experimenting with the style and layout of your website. These suggestions will demonstrate how to personalize the content and remix these tutorials to create new style and arrangement possibilities for your site.

Conclusion

In this tutorial, you explored the structure of the demonstration website and an overview of the plan for recreating it. In the next tutorial, you’ll create a CSS rule to style the entire body of the webpage and learn why this rule is an important first step.