DEV Community

Cover image for TW Elements - Create a Landing Page. Free UI/UX design course.
Keep Coding
Keep Coding

Posted on

TW Elements - Create a Landing Page. Free UI/UX design course.

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

You have already set up the project and prepared the Tailwind CSS 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 link 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:

<!-- 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 mr-4 h-[35px]"
          alt="logo" />
      </picture>
      TW Elements
    </div>
    <a
      href="https://tw-elements.com/"
      data-te-ripple-init
      data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
      Check docs
    </a>
  </div>
</div>
<!-- End your project here-->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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-->
Enter fullscreen mode Exit fullscreen mode

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.

Demo and source code for this lesson

Top comments (0)