Quick guide to building landing pages

Quick guide to building landing pages

Build a responsive layout using mainly CSS (Grid and Flex) - There are quite a few templates and tutorials out there for building landing pages. However, most tend to overcomplicate or add a heavy design(such as multiple pages, forms, etc) to what in most cases requires very simple and lean design.

Moreover, I’ll be showing you how to use mainly CSS (Grid and Flex) to create a responsive UI, instead of using old school CSS libraries (such as bootstrap). So let’s get to it!

We’re going to build a basic landing page layout, focussing mainly on the fundamentals so you can hopefully take it from there to the landing page you desire. Here’s an example of the result:

The page will be constructed of four main components: navigation bar, cover image, a grid of cards, and finally the footer.

The index.html is pretty straightforward. It contains mainly div tags and the overall page structure:

  <nav class="zone blue sticky">
      <ul class="main-nav">
          <li><a href="">About</a></li>
          <li><a href="">Products</a></li>
          <li><a href="">Our Team</a></li>
          <li class="push"><a href="">Contact</a></li>
  <div class="container">
      <img class="cover" src="img/cover.jpg">
      <div class="coverText"><h1>Making the world a better place</h1></div>
  <div class="zone blue grid-wrapper">
      <div class="card zone">
          <img src="./img/teamplay.jpg">
          <div class="text">
              <h1>Team play</h1>
              <p>We work together to create impact</p>
              <button>Learn more</button>
    <div class="card zone"><img src="./img/strategy.jpg">
        <div class="text">
            <p>Every goal is part of our strategy</p>
            <button>Learn more</button>
    <div class="card zone"><img src="./img/innovation.jpg">
        <div class="text">
            <p>We're focused on thinking different</p>
            <button>Learn more</button>
  <footer class="zone"><p>2019 Assaf Elovic All right reserved. For more articles visit <a href="www.assafelovic.com">www.assafelovic.com</a></p></footer>

Therefore, we’ll focus strictly on the styling (CSS). If you’re new to HTML and page structure, click here to learn the basics before moving forward.

Styling Layouts With Grid and Flex

Rule of thumb: use Grid when you need grid-like views such as tables, cards, album media (like in Instagram). In all other use cases consider using Flex. I highly recommend diving deeper into both, since once you master them, you won’t need much else to create beautiful responsive web pages.

We’ll use flex so we have a one-direction row, as needed for our navigation bar. Since we’re using a <nav> tag, we want to remove the dots (list-style). Finally, we’d like to remove any default margins set by the browser, so we reset margin: 0.

.main-nav {
    display: flex;
    list-style: none;
    margin: 0;
    font-size: 0.7em;

When changing the width of our browser, we can see some of the nav bar is cut out, so we need to modify how it’ll look when the width is smaller:

@media only screen and (max-width: 600px) {
    .main-nav {
        font-size: 0.5em;
        padding: 0;

We’d like the ‘Contact’ option to stick to the right so we set margin-left to ‘auto’. This will automatically set a maximum margin to the left of the hyperlink:

.push {
    margin-left: auto;

Finally, we’d like the navigation bar to stay sticky and always appear at the top of the page. Also, we’d like it to appear above all other elements (z-index):

.sticky {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;


We use Flex since we want to keep things simple (just center content). After setting our display to flex, justify-content centers content horizontal (X axis) within the container and align-items centers vertical (Y axis). We want the image to fit the entire screen so we set the height to 100vh, which means 100% of view height:

.container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

Also, we’d like the cover text to appear above the image and in the center:

.coverText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;

See the full CSS style sheet for additional minor adjustments.

Grid of cards

As described above, we want to create a grid of cards so we’ll use Grid this time. grid-template-columns sets the style of each column (or div). FYI: If we were to just set 1fr, we would see just one block per column. So we set it to repeat (just like typing 1fr 1fr …) and autofill display with anything from min 350px to whole screen (1fr). Finally, we set the grid-gap (padding between grid objects) to 20px:

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 10px;

Next, we’ll style each card within the grid. As you can see below, this is pretty straightforward for setting the margin per card and background color:

.card {
    background-color: #444;
    margin: 50px;

We’d like each card to have an image that fits the entire top area, with a title and paragraph and a button for ‘read more’ underneath. Also, we just want to manipulate images, titles, and paragraphs within the class card, so we set it like so:

.card > img {
    max-width: 100%;
    height: auto;
.card h1 {
    font-size: 1.5rem;
.card p {
    font-size: 1rem;

While the image fits 100% of the card’s width, we’d like to add some nice padding to the text area of the card:

.card > .text {
    padding: 0 20px 20px;

Finally, we set the button design that appears within each card. We’ll set the border to 0 (since default appears with a border), and add some padding, color, etc:

button {
    cursor: pointer;
    background: gray;
    border: 0;
    font-size: 1rem;
    color: white;
    padding: 10px;
    width: 100%;
button:hover {
    background-color: #e0d27b;

Last but not least, our footer is pretty straightforward. We’d like the inner text to be smaller than default, and pad the footer with some color:

footer {
    text-align: center;
    padding: 3px;
    background-color: #30336b;
footer p {
    font-size: 1rem;

That’s it! Following this simple responsive layout, you can build almost any landing page your heart desires. Take this layout to the next level with some amazing animation libraries — here are some of my favorites:

1.    Sweet Alert — Add stylish alerts

2.  Typed.js — Add typing animation to your headers.

3.  Auroral — Add animated gradient backgrounds.

4.  Owl Carousel — Add animation to you elements

5.   Animate.css — Add styling animations upon loading elements.

To download the full source code click here!

To skip the tutorial, feel free to download the source code template from my Github repo here.

Originally published by Assaf Elovic at medium.com


Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

The ultimate CSS battle: Grid - Flexbox

Using CSS Grid Layout in Angular project

Flexible Text Block with CSS and JavaScript

css web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Developing for the Mobile-Web: Part 1 — CSS Media Queries

Developing our web pages for the mobile web has never been more important than it is now. I grew up in the early stages of the internet.