Sample HTML Code For

Homepage
In this article, we will show you how to create a homepage using HTML
and CSS step by step. You can use this code as a starting point for your
own website as a developer. Sample HTML code for homepage is also
give.

Introduction
Every web developer should create a basic portfolio website
using HTML and CSS. This will create a showcase of your work and will
also help you learn basic concepts of HTML and CSS.

Start with something basic like this one and then add more to it in the
future.
We are going to explain each step of the process in this article and also provide you sample
HTML code of homepage.

Look and Feel

Here is how our homepage will look like.

Homepage Sample

Structure Of Homepage
Before we start, first have a look at the HTML components that create
each section of this homepage.
The picture below shows different HTML elements with its name that
gives you a rough idea of how to create the HTML structure of the home
page.

Homepage StructureAdvertisements

Image Explanation:

1. The home page is divided into 3 sections: header, main and, footer.
2. The header section contains the logo and the navigation bar.
3. The main section contains the main content of the page like introduction,
achievements, projects, etc.
4. The footer section contains the copyright, contact details, and social media
links.

Step 1: Create a basic HTML page

Using the structure of the homepage explained above, create a basic
HTML page.

The page is divided into 3 sections by HTML elements:

Advertisements

1. Header
2.[1.] Main
3.[2.] Footer

Header
The header section contains the logo which is nothing but just a link to
the homepage here (you add your own logo image) and also contains
the navigation bar.
<header class="header">
<a href="#" class="logo">Developer</a>
<nav class="nav-items">
 <a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
HTML

Main
The main section contains almost everything that you want to show on
the homepage so it is also bigger than any other section.
Advertisements

For simplicity, we are just using the intro, achievements, and about us
section in this example.

From the image, you can get a rough idea of the structure of the main
section.
<main>
<div class="intro">
<h1>A Web Developer</h1>
<p>I am a web developer and I love to create websites.</p>
<button>Learn More</button>
</div>
<div class="achievements">
<div class="work">
<i class="fas fa-atom"></i>
<p class="work-heading">Projects</p>
<p class="work-text">I have worked on many projects and I am very
proud of them. I am a very good developer and I am always looking for new
projects.</p>
</div>
<div class="work">
<i class="fas fa-skiing"></i>
<p class="work-heading">Skills</p>
<p class="work-text">I have a lot of skills and I am very good at
them. I am very good at programming and I am always looking for new
skills.</p>
</div>
<div class="work">
<i class="fas fa-ethernet"></i>
<p class="work-heading">Network</p>
<p class="work-text">I have a lot of network skills and I am very
good at them. I am very good at networking and I am always looking for new
network skills.</p>
</div>
</div>
<div class="about-me">
 <div class="about-me-text">
<h2>About Me</h2>
<p>I am a web developer and I love to create websites. I am a very
good developer and I am always looking for new projects. I am a very good
developer and I am always looking for new projects.</p>
</div>
<img src="https://images.unsplash.com/photo-1596495578065-
6e0763fa1178?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=cr
op&w=871&q=80" alt="me">
</div>
</main>
HTML

Main section code explained: The main section is divided into 3

sections: intro, achievements, and about me.

1. Intro - The intro section is a div element with a background image.

The section contains a heading, a paragraph, and a button.
2. Achievements - The achievements section is another div element
that uses font-awesome icons to display icons at the top of each
section. The section contains 3 div elements each with a heading,
a paragraph and, an icon.
3. About Me - The about me section has 2 inner elements one is text
and another is an image.

Footer
The footer section contains the contact information and social media
links.
<footer class="footer">
<div class="copy">&copy; 2022 Developer</div>
<div class="bottom-links">
<div class="links">
<span>More Info</span>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="links">
<span>Social Links</span>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
 </div>
</div>
</footer>
HTML

Footer code explained: The footer section contains the contact

information and social media links.

1. Copy - The copy section is a div element that contains copyright

information.
2. Bottom Links - The bottom links section is a div element that
contains the links to the other sections and social media
information.

Step 2: Style The Elements Using CSS

We have created the HTML part now let's style the elements using CSS.

To select the element to style use the CSS selectors.

We are going to use CSS flexbox to align the elements horizontally and
vertically.

The complete CSS code is as follows:

@import url('https://fonts.googleapis.com/css2?
family=Sriracha&display=swap');

body {
margin: 0;
box-sizing: border-box;
}
/* CSS for header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
}

.header .logo {
font-size: 25px;
font-family: 'Sriracha', cursive;
 color: #000;
text-decoration: none;
margin-left: 30px;
}

.nav-items {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f5f5f5;
margin-right: 20px;
}

.nav-items a {
text-decoration: none;
color: #000;
padding: 35px 20px;
}
/* CSS for main section */
.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 520px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0,
0, 0.5) 100%), url("https://images.unsplash.com/photo-1587620962725-
abab7fe55159?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=cr
op&w=1031&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.intro h1 {
font-family: sans-serif;
font-size: 60px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
margin: 0;
}

.intro p {
font-size: 20px;
color: #d1d1d1;
text-transform: uppercase;
margin: 20px 0;
}

.intro button {
background-color: #5edaf0;
 color: #000;
padding: 10px 25px;
border: none;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4)
}

.achievements {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px 80px;
}

.achievements .work {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
}

.achievements .work i {
width: fit-content;
font-size: 50px;
color: #333333;
border-radius: 50%;
border: 2px solid #333333;
padding: 12px;
}

.achievements .work .work-heading {

font-size: 20px;
color: #333333;
text-transform: uppercase;
margin: 10px 0;
}

.achievements .work .work-text {

font-size: 15px;
color: #585858;
margin: 10px 0;
}

.about-me {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 80px;
border-top: 2px solid #eeeeee;
}
.about-me img {
width: 500px;
max-width: 100%;
height: auto;
border-radius: 10px;
}

.about-me-text h2 {
font-size: 30px;
color: #333333;
text-transform: uppercase;
margin: 0;
}

.about-me-text p {
font-size: 15px;
color: #585858;
margin: 10px 0;
}
/* CSS for footer */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #302f49;
padding: 40px 80px;
}

.footer .copy {
color: #fff;
}

.bottom-links {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px 0;
}

.bottom-links .links {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
}

.bottom-links .links span {

font-size: 20px;
color: #fff;
text-transform: uppercase;
margin: 10px 0;
}
.bottom-links .links a {
text-decoration: none;
color: #a1a1a1;
padding: 10px 20px;
}
CSS

To play with style try using your own positioning and color values.

Complete Sample HTML Code For

Homepage
Here is the complete sample HTML code for the homepage. You can
click the run button below to see the result.

Home page code in HTML and CSS

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML HomePage</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?
family=Sriracha&display=swap');

body {
margin: 0;
box-sizing: border-box;
}

/* CSS for header */

.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
}
 .header .logo {
font-size: 25px;
font-family: 'Sriracha', cursive;
color: #000;
text-decoration: none;
margin-left: 30px;
}

.nav-items {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f5f5f5;
margin-right: 20px;
}

.nav-items a {
text-decoration: none;
color: #000;
padding: 35px 20px;
}

/* CSS for main element */

.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 520px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.5) 100%), url("https://images.unsplash.com/photo-
1587620962725-abab7fe55159?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=cr
op&w=1031&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.intro h1 {
font-family: sans-serif;
font-size: 60px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
margin: 0;
}

.intro p {
font-size: 20px;
color: #d1d1d1;
text-transform: uppercase;
margin: 20px 0;
}

.intro button {
background-color: #5edaf0;
color: #000;
padding: 10px 25px;
border: none;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4)
}

.achievements {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px 80px;
}

.achievements .work {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
}

.achievements .work i {
width: fit-content;
font-size: 50px;
color: #333333;
border-radius: 50%;
border: 2px solid #333333;
padding: 12px;
}

.achievements .work .work-heading {

font-size: 20px;
color: #333333;
text-transform: uppercase;
margin: 10px 0;
}

.achievements .work .work-text {

font-size: 15px;
color: #585858;
margin: 10px 0;
}

.about-me {
display: flex;
justify-content: center;
 align-items: center;
padding: 40px 80px;
border-top: 2px solid #eeeeee;
}

.about-me img {
width: 500px;
max-width: 100%;
height: auto;
border-radius: 10px;
}

.about-me-text h2 {
font-size: 30px;
color: #333333;
text-transform: uppercase;
margin: 0;
}

.about-me-text p {
font-size: 15px;
color: #585858;
margin: 10px 0;
}

/* CSS for footer */

.footer {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #302f49;
padding: 40px 80px;
}

.footer .copy {
color: #fff;
}

.bottom-links {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px 0;
}

.bottom-links .links {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
}

.bottom-links .links span {

 font-size: 20px;
color: #fff;
text-transform: uppercase;
margin: 10px 0;
}

.bottom-links .links a {
text-decoration: none;
color: #a1a1a1;
padding: 10px 20px;
}
</style>
</head>

<body>
<header class="header">
<a href="#" class="logo">Developer</a>
<nav class="nav-items">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<div class="intro">
<h1>A Web Developer</h1>
<p>I am a web developer and I love to create websites.</p>
<button>Learn More</button>
</div>
<div class="achievements">
<div class="work">
<i class="fas fa-atom"></i>
<p class="work-heading">Projects</p>
<p class="work-text">I have worked on many projects and I am very
proud of them. I am a very good developer and I am always looking for new
projects.</p>
</div>
<div class="work">
<i class="fas fa-skiing"></i>
<p class="work-heading">Skills</p>
<p class="work-text">I have a lot of skills and I am very good at
them. I am very good at programming and I am always looking for new
skills.</p>
</div>
<div class="work">
<i class="fas fa-ethernet"></i>
<p class="work-heading">Network</p>
<p class="work-text">I have a lot of network skills and I am very
good at them. I am very good at networking and I am always looking for new
network skills.</p>
</div>
</div>
<div class="about-me">
<div class="about-me-text">
 <h2>About Me</h2>
<p>I am a web developer and I love to create websites. I am a very
good developer and I am always looking for new projects. I am a very good
developer and I am always looking for new projects.</p>
</div>
<img src="https://images.unsplash.com/photo-1596495578065-
6e0763fa1178?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=cr
op&w=871&q=80" alt="me">
</div>
</main>
<footer class="footer">
<div class="copy">&copy; 2022 Developer</div>
<div class="bottom-links">
<div class="links">
<span>More Info</span>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="links">
<span>Social Links</span>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</footer>
</body>

</html>
HTML
Try It

Conclusion
Following the tutorials above you have created a beautiful portfolio
website for you. You have learned how to create a website using HTML
and CSS. You have used flexbox and fon-awesome icons. Sample
HTML code for the homepage is available in the editor above.
Advertisements

For more webpage ideas like this visit HTML webpage examples.

Stay Ahead, Learn More

 HTML Code for Registration Form with Validation
 HTML Web Page Examples with Source Code
 100 HTML Tags List with Examples

About Us
About usContact usPrivacy PolicyWrite for usDisclaimer
Tutorials
HTML5 CSS3 JavaScript Bootstrap 4 Python Practice Problems
Tools
HTML EditorAdvance HTML EditorJavaScript Compiler
Follow Us

Copyright © 2023 TutorialsTonight