How To Build a Landing Page in Ten Minutes

Build a responsive layout using mainly CSS (Grid and Flex)

Assaf Elovic
Sep 11, 2019 · 5 min read
Image for post
Image for post

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

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:

Image for post
Image for post

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=""></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.

Navigation bar

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!

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store