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:
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:
<!-- Start your project here-->
<div
class="mx-auto max-w-[540px] sm:max-w-[604px] md:max-w-[720px] lg:max-w-[972px] xl:max-w-full xl:px-12 2xl:max-w-[1400px]">
<div class="mt-[200px] text-center">
<div
class="mb-4 flex items-center justify-center text-[40px] font-medium dark:text-neutral-100">
<picture>
<source
srcset="
https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp
"
type="image/webp" />
<img
src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.png"
class="mb-1 me-4 h-[35px]"
alt="logo" />
</picture>
TW Elements
</div>
<a
href="https://tw-elements.com/"
data-twe-ripple-init
data-twe-ripple-color="light"
target="_blank"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Check docs
</a>
</div>
</div>
<!-- End your project here-->
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:
<!DOCTYPE html>
<html lang="en" class="dark">
[...]
<body class="dark:bg-neutral-800">
[...]
</body>
</html>
Remove it, so at the end your index.html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>TE Vite Starter</title>
<!-- Favicon -->
<link
rel="icon"
href="https://tecdn.b-cdn.net/img/Marketing/general/logo/small/te.ico"
type="image/x-icon" />
<!-- Roboto font -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
rel="stylesheet" />
<!-- Main css file -->
<link rel="stylesheet" href="src/scss/index.scss" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<!-- Main js file -->
<script type="module" src="src/js/index.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>
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:
<!--Main Navigation-->
<header></header>
<!--Main Navigation-->
<!--Main layout-->
<main></main>
<!--Main layout-->
<!--Footer-->
<footer></footer>
<!--Footer-->
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.