Creating a Zerodha landing page

Any big website has a landing page that catches the user's attention as soon as he visits the website.

There is no better way to start understanding and learning web development than by making landing pages. Let's take the Zerodha website as an example, a quite successful startup and website with a minimalistic appearance.

You can visit the Zerodha website to check the landing page.

Setting up the IDE

IDE is the environment where we code. Visual Studio Code is one of the renowned and handy IDEs to work with.

Let's start creating a folder landing-page, in your desktop and create an index.html file in the folder. You can do this manually, let's follow the shell commands in doing so

cd desktop
mkdir landing-page
cd landing-page
touch index.html

Creating the HTML Code

Let's write the HTML code for the page.

1. setup the boilerplate code. You can use the shortcut !+Enter (make sure this is configured in the Visual Studio Code)

2. let's create a header division tag containing the navigation links and logo. We will add navigation links like Signup, About, Product, etc., and a logo (you can download the image from the site).

 <div class="header">
      <div class="nav-section">
        <img src="zerodha-logo.png" class="logo-image" alt="" />

        <nav class="links-section">
          <a href="#" class="signup">Signup</a>
          <a href="#" class="about">About</a>
          <a href="#" class="product">Product</a>
          <a href="#" class="pricing">Pricing</a>
          <a href="#" class="support">Support</a>
          <div class="menu-icon"><i class="fa-solid fa-bars" ></i></div>

        </nav>
      </div>
    </div>

Adding the main section

Here we add the landing image from the Zerodha site, with the welcome text as seen on the landing page

<img src="landing.png" alt="landing-image" class="landing-image" />
    <div class="text-1"><bold>Invest in everything</bold></div>
    <div class="text-2">Online platform to invest in stocks, derivatives, mutual funds, and more</div>
    <Button class="signup-button">Sign up now</Button>

The above code will basically give you this, we need style it with CSS to make it look better

Styling with CSS

1. First, we need to design the header tag with display-flex property to align them in a line and space out them well.

2. here we center the elements vertically center, as adjusting the logo image can mess up the header tag element's vertical adjustments.

    .nav-section {
      display: flex;
      /* background-color: rgb(248, 190, 82); */
      max-width: 1100px;
      justify-content: space-between;
      margin: auto;
      padding: 20px;
      align-items: center;
    }
   

3. We set the padding and margin to get the correct orientation of the elements.

4. We center the image and the texts with the text-align property.

5. Please find the entire CSS code below.

.links-section {
  display: flex;
  justify-content: space-between;
}
.links-section a,
button {
  margin: 0px 10px;
  padding: 0px 10px;
  text-decoration: none;
  color: grey;
}
.logo-image {
  /* width: 100px; */
  height: 17px;
}
.header {
  width: 100%;
  /* background-color: black; */
}
.landing-image {
  max-height: 45vh;
  max-width: 100%;
  display: block;
  margin: auto;
  align-items: center;
  padding-top: 80px;
}
.text-1,
.text-2 {
  text-align: center;
}
.text-1 {
  padding-top: 30px;
  font-size: 2.75rem;
}
.text-2 {
  padding-bottom: 40px;
}
.signup-button {
  display: block;
  margin: auto;
  width: 200px;
  height: 50px;
  font-size: 1.4rem;
  color: white;
  background-color: #387ed1;
  border: none;
  border-radius: 5px;
}
#menu-icon{
  align-items: center;
}

1. By the end, you will see the landing page as this :

You have just created your first frontend, even though it is a basic one but a great start.

Find the Github Link for the source code here.