HTML 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. index.html ! Tab <!DOCTYPE html> <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> < = > html lang "en" 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 = > <h1>Hi, I'm Jane</h1> <p>
          FrontEnd <span class="divider"> | </span> BackEnd
          <span class="divider"> | </span> DevOps
        </p> < class "page-wrapper" < = > div class "content-wrapper" </ > div /div> Next, create a new Icons folder. You can find on . 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. free awesome icons Font Awesome all.css <link rel= href= /> "stylesheet" "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= > < jane icon fab fa-github fa x https: <i = > < > <a href= > < "https://twitter.com/jane" < = > i class "icon fab fa-twitter fa-2x" </ > i /a>
<a href="https:/ /github.com/ ">
   <i class=" -2 "></i>
</a>
<a href=" //www.linkedin.com/in/jane/"> 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 "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 tags. Looks vintage! a CSS 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. main.css index.html <link rel= href= /> "stylesheet" "styles/main.css" After that import the fonts you are gonna be using. I decided to go with and . Visit and pick whichever ones you want and import them on top of the file. Comfortaa Source Sans Pro Google Fonts main.css @ url( ); import "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. * { : ;
  text-decoration: none;
}

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

.page-wrapper { : grid;
  place-items: center;
  text-align: center;
} margin 0 height 100 display Now style the text. Set the color of fonts, font family, tweak letter spacing, and add margin where necessary to look good. h1 { : white;
  font-family: , sans-serif;
  font-size: em;
  letter-spacing: em;
}

p { : rgb( , , );
  font-family: , cursive;
  font-size: em;
  margin: px ;
}

.divider { : white;
} color "Source Sans Pro" 5 -0.04 color 98 0 255 "Comfortaa" 1.5 15 0 color 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 { : white;
  padding: px;
  border-radius: %;
}

.icon:hover { : pointer;
  background-color: rgb( , , );
} color 15 50 cursor 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 .  Add it to your icons directory and link to it in header. favicon.io index.html <link rel= href= /> "icon" "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: main.css 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 , , and ! Twitter LinkedIn DEV Subscribe to my for more articles. Blog Previously published at https://blog.madza.dev/create-a-landing-page-in-less-than-100-lines-incl-css

Too Long; Didn't Read

Making security fun one episode at a time

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

Too Long; Didn't Read

Madza

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Madza

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES