Bootstrap Tutorials: Create a Landing Page

Create a Landing Page

Hey, this is a very exciting moment! Do you know why?

You have already learned the theoretical basis of the most important topics of Bootstrap. So now we can roll up our sleeves and have some fun while learning.

We will create a real-life project. It will be a beautiful Landing Page with impressive photography stretched to full screen.

Click here to see its final version:

Let's start!

Step 1 - prepare index.html file

In the folder of our project, which we prepared in the previous lessons, there are leftovers of the code from the lesson about the grid.

HTML

<div class="container" style="height: 500px; background-color: red">

  <div class="row" style="background-color: blue;">
    I am a first row
  </div>

  <div class="row" style="background-color: lightblue;">
    I am a second row
  </div>

</div>

Remove this so we can start with a clean document.

Step 2 - prepare the basic structure

Our project needs a basic structure to keep the code organized.

It may not seem that important at first, but you will appreciate this approach when the amount of code starts to grow exponentially.

Add the following code to your index.html file:

HTML

<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>
  <div class="container">

  </div>
</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->

After saving the file and refreshing your browser, you will see a blank page. This is fine, because the structure we added doesn't have any elements to render yet.

But that will change soon. Next time - Navigation!

Demo & source code for this lesson