Hackernoon logoHow I Created a Landing page in Less than 100 lines of Code by@madzadev

How I Created a Landing page in Less than 100 lines of Code

Madza Hacker Noon profile picture


Software Developer and Technical Writer


Start by creating a new

file and launching a boilerplate by typing
and pressing
. Type the name of your site in the title tags. It will be displayed in the browser tab.

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


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.

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

Next, create a new Icons folder. You can find free awesome icons on Font Awesome. Visit their site and enter the email to receive the pack. Unzip it and add it to the Icons folder. Finally link to

file in the pack.

<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)).

<a href="https://twitter.com/jane">
  <i class="icon fab fa-twitter fa-2x"></i>
<a href="https://github.com/jane">
   <i class="icon fab fa-github fa-2x"></i>
<a href="https://www.linkedin.com/in/jane/">
   <i class="icon fab fa-linkedin-in fa-2x"></i>
<a href="https://blog.jane.dev">
   <i class="icon fas fa-book fa-2x"></i>
<a href="mailto:[email protected]">
   <i class="icon fas fa-envelope fa-2x"></i>

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

tags. Looks vintage!


Let's make everything prettier!

First, create a new folder for styles, add a new file

in it, and link to it in the
header section.

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

After that import the fonts you are gonna be using. I decided to go with Comfortaa and Source Sans Pro. Visit Google Fonts and pick whichever ones you want and import them on top of the


@import url("https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]&family=Source+Sans+Pro:[email protected]&display=swap");

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

* {
  margin: 0;
  text-decoration: none;

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.

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.

.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. Add it to your icons directory and link to it in


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

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

Before deployment make sure you experiment with different settings in the

. Design is always subjective, tho I would recommend something in the lines of great contrast:

Or this:

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.

Give it a โญ if you liked it ๐ŸŽ‰๐Ÿฅณ

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, LinkedIn, and DEV!

Subscribe to my Blog for more articles.

Previously published at https://blog.madza.dev/create-a-landing-page-in-less-than-100-lines-incl-css


Join Hacker Noon

Create your free account to unlock your custom reading experience.