loading...
Cover image for Create a Landing page in less than 100 lines (incl. CSS) 🎨🎉

Create a Landing page in less than 100 lines (incl. CSS) 🎨🎉

madza profile image Madza Originally published at blog.madza.dev ・4 min read

Recently I bought a personal domain 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.


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.

<!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>
Enter fullscreen mode Exit fullscreen mode

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>
        <p>
          FrontEnd <span class="divider"> | </span> BackEnd
          <span class="divider"> | </span> DevOps
        </p>
      </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

Next, create a new Icons folder. You can find 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 all.css file in the pack.

<link rel="stylesheet" href="icons/font-awesome/css/all.css" />
Enter fullscreen mode Exit fullscreen mode

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>
<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>
Enter fullscreen mode Exit fullscreen mode

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


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.

<link rel="stylesheet" href="styles/main.css" />
Enter fullscreen mode Exit fullscreen mode

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 main.css file.

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

Enter fullscreen mode Exit fullscreen mode

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;
}

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

.page-wrapper {
  display: grid;
  place-items: center;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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 index.html header.

<link rel="icon" href="icons/favicon.ico" />
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Or this:

Alt Text

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.

Discussion

pic
Editor guide
Collapse
isarisariver profile image
Marian Beck

Looks great. I like the font :)

Collapse
madza profile image
Madza Author

Awesome to hear! 🙏❤

Collapse
reiallenramos profile image
Rei Allen Ramos

I love it! We have similar landing pages!! 🍺 reiallenramos.com

Collapse
madza profile image
Madza Author

Thanks a lot! 🙏❤ Wow, yours looks awesome, too 😉

Collapse
adriangrigore profile image
Adrian Emil Grigore

Nice article!

Collapse
madza profile image
Madza Author

Thanks so much 🙏❤

Collapse
chethanagopinath profile image
Chethana Gopinath

Clean and neat! Love it!

Collapse
madza profile image
Madza Author

Thanks a lot 🙏❤

Collapse
thomasbnt profile image
Thomas Bnt

Great, simple and clear tutorial 🎊😎

Collapse
madza profile image
Madza Author

Thanks! 👍 Means so much to me 🙏❤