// Tutorial //

An Overview of Our Demonstration HTML and CSS Website

Published on October 12, 2020 · Updated on October 12, 2020
Default avatar
By Erin Glass
Senior Developer Educator
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:

Illustration of the demonstration website’s sections

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

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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up

Tutorial Series: How To Build a Website With CSS

This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

About the authors
Default avatar
Senior Developer Educator

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!