Create a Landing Page

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

You have already set up the project and prepared the Tailwind CSC environment. 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 on the button below to see its final version:

See the final demo

Let's start!

Step 1 - prepare index.html file

But before me move further let's remove unnecessary code from index.html file so we have a place for our new project.

Below the opening <body> tag you will find the opening comment:

<!-- Start your project here-->

and at the bottom of the file you will find the closing comment:

<!-- End your project here-->.

In between is the code with the TW Elements welcome message:

Remove it, save the file, and refresh the browser. You should see a completely blank screen.

Now we have a place for our new project.

Let's also remove unnecessary (for this moment) dark mode classes from <html> and <body> elements:

Remove it, so at the end your index.html file looks like this:

After saving the file you should see a completely white screen in your browser window.

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 below the opening <body> tag:

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

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.