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.
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.
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.
Lessons Listing Page
The following image shows the Lesson page. This will contain a listing of the lessons available on the site.
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.
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:
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.
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.
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.