• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Break Down Your Page Structure

Log in or subscribe for free to enjoy all this course has to offer!

Our Example Website

Throughout this course, you’ll be learning by building an example web site, and what could be more appropriate to use as an example than an e-learning platform!

The site you’ll be building is for a Space School where students can learn all they need to know about space travel and exploration.

As with similar projects, you’ll start with some design mock-ups of what the site will look like when it’s finished. As an e-learning site, it will have a variety of content and user interactions which you’ll start to implement in Bootstrap 4, so you can learn along the way.

The Designs

Let's look at the page designs we'll be implementing so you can understand how they could be broken down into separate sections.

We’re going to start with large screens, and you’ll see how they change for smaller screens (mobiles) later in the course.

Homepage

The following image shows what the homepage will look like. The content will include a hero area for promoted content and a group of info cards listing some of the benefits of joining the site.

The design of the homepage for the example Space School website. It shows the full layout including a header section with the branding and a navigation bar; an image carrousel and information about the benefits of joining the Space School; as well as a fo
Homepage design for large screens

Lessons Listing Page

The following image shows the Lesson page. This will contain a listing of the lessons available on the site.

The design of the Lessons page for the example Space School website. The details show some information cards with details of available lessons
Lessons Listing page design for large screens

Lesson Details Page

The following image shows the details of the lessons. It contains an instructional video as well as the lesson details such as its title, description, learning outcomes, and a note-taking form.

The design of an example of the Lesson details page for the example Space School website. The main content includes the lesson title; a lesson video, an overview of the lesson’s details, and a note-taking form.
Lesson Details page design for large screens

Breaking It Down

You can see that the different pages have some sections in common. It's important to clarify that the ones we're talking about are generically related to the layout of the pages, rather than the detailed subsections with specific content.

Breaking down the page designs this way helps create common sections of HTML files that can be reused across pages, so you get a consistent overall layout throughout the site.

Let's take a look at how you can break down the pages into these common sections:

Header Section

Header section design for large screens: Space School name and logo appear on the left, followed by hyperlinks to Home and Lessons pages.
Header section design for large screens

The top of the page is the header section that contains the branding and navigation. The content remains more or less the same whichever page you're on.

The navigation section usually contains links to the main parts of the website most frequently accessed by users and visitors.

Footer Section

Footer section design for large screens: a gray bar containing hyperlinks to About, Privacy, and Terms pages.
Footer section design for large screens

Traditionally, most web pages have a footer section that contains details about the site and links to the less commonly visited parts of a site, such as the details of the company or organization, as well as the legalese such as terms of use and copyright notices. As with the header section, the content stays the same across the site.

Content Section

The design of the main content section of the homepage for the example Space School website. It shows information cards detailing the benefits of joining the Space School
Content section of homepage for large screens

We'll define the content section as everything after the header and before the footer. This is where the content that varies from page to page will go. The image above shows the content section of the homepage.

Let’s Recap!

  • You’re now familiar with the designs and features of the Space School site that you’ll be building throughout this course.

  • You know how to break down the page designs into the main page sections. 

Now that you know what the site you’ll be building will look like, you’re ready to start building it with Bootstrap.

Example of certificate of achievement
Example of certificate of achievement