Create a Landing page in less than 100 lines (incl. CSS) 🎨🎉
Tags: html, css, beginners, tutorial
Published: 2020-10-27 13:18:16

---
title: Create a Landing page in less than 100 lines (incl. CSS) 🎨🎉
published: true
description: 
tags: html, css, beginners, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/t9ub57be7hp8gzgk5vm9.png
canonical_url: https://blog.madza.dev/create-a-landing-page-in-less-than-100-lines-incl-css
---
Recently I bought a [personal domain](https://madza.dev) and decided to build a quick landing page to not leave it empty while I work on my portfolio. I thought some of you might find it useful, so I decided to make a tutorial on it.

<hr>

# HTML

Start by creating a new `index.html` file and launching a boilerplate by typing '!' and pressing 'Tab'. Type the name of your site in the title tags. It will be displayed in the browser tab.

```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Awesome Landing Page</title>
</head>
<body>
   
</body>
</html>
```

Then create divs that will wrap the page and center the content. Add a heading that will introduce you and a paragraph of your skills. I also used span elements on separators to style them later.

```html
<div class="page-wrapper">
      <div class="content-wrapper">
        <h1>Hi, I'm Jane</h1>
        <p>
          FrontEnd <span class="divider"> | </span> BackEnd
          <span class="divider"> | </span> DevOps
        </p>
      </div>
 </div>
```

Next, create a new Icons folder. You can find awesome icons on [Font Awesome](https://fontawesome.com/). Visit their site and enter the email to receive the pack. Unzip it and add it to the Icons folder. Finally link to `all.css` file in the pack.

```html
<link rel="stylesheet" href="icons/font-awesome/css/all.css" />
```

Add your icons inside links and use the proper Font Awesome syntax for specific icons you are gonna use (see their [docs](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use)).

```html
<a href="https://twitter.com/jane">
  <i class="icon fab fa-twitter fa-2x"></i>
</a>
<a href="https://github.com/jane">
   <i class="icon fab fa-github fa-2x"></i>
</a>
<a href="https://www.linkedin.com/in/jane/">
   <i class="icon fab fa-linkedin-in fa-2x"></i>
</a>
<a href="https://blog.jane.dev">
   <i class="icon fas fa-book fa-2x"></i>
</a>
<a href="mailto:hi@jane.dev">
   <i class="icon fas fa-envelope fa-2x"></i>
</a>
```

That's it for the markup. If you followed along it should now look like this. Icons are blue, due to the default color of 'a' tags. Looks vintage!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cxwbllbm6784b5pn1dud.png)

<hr>

# CSS

Let's make everything prettier!

First, create a new folder for styles, add a new file `main.css` in it, and link to it in the `index.html` header section.

```html
<link rel="stylesheet" href="styles/main.css" />
```

After that import the fonts you are gonna be using. I decided to go with [Comfortaa](https://fonts.google.com/specimen/Comfortaa?query=comfortaa) and [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro?query=source+sa). Visit [Google Fonts](https://fonts.google.com/) and pick whichever ones you want and import them on top of the `main.css` file.

```css
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Source+Sans+Pro:wght@900&display=swap");

```

Then make a simple reset for default stylings, set the background color for your landing page and center elements using CSS GRID.

```css
* {
  margin: 0;
  text-decoration: none;
}

html,
body {
  height: 100%;
  display: grid;
  place-items: center;
  background-color: black;
}

.page-wrapper {
  display: grid;
  place-items: center;
  text-align: center;
}
```

Now style the text. Set the color of fonts, font family, tweak letter spacing, and add margin where necessary to look good.

```css
h1 {
  color: white;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 5em;
  letter-spacing: -0.04em;
}

p {
  color: rgb(98, 0, 255);
  font-family: "Comfortaa", cursive;
  font-size: 1.5em;
  margin: 15px 0;
}

.divider {
  color: white;
}
``` 

Finally, you have to style icons. Depending on your background color, set the color of icons and their size. For interactivity, you can add a cursor change and an icon background-color change on hover.

```css
.icon {
  color: white;
  padding: 15px;
  border-radius: 50%;
}

.icon:hover {
  cursor: pointer;
  background-color: rgb(22, 22, 22);
}
```

Also, make sure you create your favicon for your site. You will see it on the browser tab before the page title. For that, I would recommend [favicon.io](https://favicon.io/). Add it to your icons directory and link to it in `index.html` header.

```html
<link rel="icon" href="icons/favicon.ico" />
```

Well done! The final result should look something like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2wzpmj4cyip5qhfz5ctb.png)

Before deployment make sure you experiment with different settings in the `main.css`. Design is always subjective, tho I would recommend something in the lines of great contrast:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iahl1ekvah3qopxptb7t.png)

Or this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ue8ldilpjqza0bdrlpn.png)

Congratulations! You have made a simple landing page with no fancy CSS or JavaScript frameworks and in less than 100 lines of code. 

Source code is available on [GitHub](https://github.com/madzadev/landing-page).
Give it a ⭐ if you liked it 🎉🥳

<hr>

Writing has always been my passion and it gives me pleasure to help people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/), and [DEV](https://dev.to/madza)!

Subscribe to my [Blog](https://blog.madza.dev) for more articles.