Sometimes all you need to build a website is just plain old HTML. It’s infrequent, but it does happen. There are also other circumstances in which knowing HTML might be a good idea. It’s a great skill to have, and it will always come in handy for little projects or even bigger ones. We will discuss how HTML works and how to create pages using nothing but HTML and CSS.
Today we will guide you through creating a website from scratch using HTML. We’ll include the basics and some syntaxes. Let’s get started!
Creating a New HTML File
First, you have to do is create an HTML file. You can use any text editor for this. We like using TextPad or Notepad++ because they are free.
You can create an HTML file by opening your text editor and saving the File with a .html extension. Here is how you do it:
TextPad: Click File > Save As… > Set “Save as type” to All Files > Type in the name of your file with a .html extension
Notepad++: Click File> Save As… > Make sure “All Files” is selected under “Save as type”> Type in the name of your File with a .html extension.
What Your HTML File Should Contain or Look Like
Now that you have created your HTML file, we can start writing some code.
The first thing you need to do is add the <HTML about> and </html> tags. This tells the browser that everything between these tags is HTML.
Next, you need to add the <head> and </head> tags. The <head> tag contains knowledge about the document, such as the title and the keywords.
<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″ />
<link rel=”preconnect” href=”https://fonts.googleapis.com” />
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin />
<link rel=”stylesheet” href=”style.css” />
<link
href=”https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap”
rel=”stylesheet”
/>
<title>Pawfect</title>
</head>
After that, you need to add the <body> tag. The <body> tag contains the content of your website.
Body section
According to our research, a website is ranked by its <body> section and first-fold. The header should include the logo of your company or organization and other navigation menu items such as links for different pages in that site’s hierarchy (e.g., Services). To make it easy on users when they land on any given page, use a “hero” heading near where preliminary information about services offered resides – this makes sense because there may be multiple levels deep before reaching any content!
<div class=”first-fold”>
<header class=”header”>
<a href=”#”>
<p class=”logo”>Jactii</p>
</a>
<nav class=”main-nav”>
<ul class=”main-nav-list” role=”navigation”>
<li><a class=”main-nav-link” href=”#services”>Our services</a></li>
<li><a class=”main-nav-link” href=”#about”>About Us</a></li>
<li>
<a class=”main-nav-link nav-cta”>Get a Quote</a>
</li>
</ul>
</nav>
</header>
<section class=”section-hero”>
<div class=”hero”>
<div class=”hero-text-box”>
<h1 class=”heading-primary”>
Pet Home Grooming Service in North Carolina
</h1>
<p class=”hero-description”>
This is a sample text to print the output?
</p>
</div>
</div>
</section>
</div>
1. W3Schools
2. W3C Tutorial
3. Emmet Cheatsheet
Now it’s time to style the header and body section. For this, you need to use CSS. CSS is short for Cascading Style Sheets. It’s a tool to add styling to your HTML page.
Jatcii.com
General CSS
We can also style our blog with general CSS, which will give it an overall look. We add this at the top of the Style conflicts hero section has a background image, but you may want to use your own instead!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
HTML {
/* 10px / 16px = 0.625 =62.5*/
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
font-family: ‘Rubik’, sans-serif;
line-height: 1.5;
font-size: 1.5rem;
font-weight: 400;
overflow-x: hidden;
color: #523414;
background-color: #e9be5a;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
font-weight: 700;
color: #523414;
letter-spacing: -0.5px;
}
.heading-primary {
font-size: 5.2rem;
line-height: 1.05;
margin-bottom: 3.2rem;
}
.heading-secondary {
font-size: 4.4rem;
line-height: 1.2;
margin-bottom: 5.6rem;
text-align: center;
}
.heading-tertiary {
font-size: 3rem;
line-height: 1.2;
margin: 1.2rem;
}
a {
text-decoration: none;
}
.first-fold {
background-image: url(img/Pawfect-bg.png);
min-height: 80rem;
}
To apply this style to our Website, we need to attach it to the h1 section.
After the title element, syntax Attaching CSS code needs to be within <head> tag.
Save your File and open it in a browser. Congratulations! You have just styled your first element.
Let’s Move to advance styling by adding the background image to the header section.
Styling the Navigation Bar
The Call-To-Action (CTA) button is given a radius of 9 pixels using CSS flexbox. Thanks to this fantastic new method, the logo and navigation menus are adjustable in size by quickly adjusting their top, right, or bottom properties!
/* ****************** */
/* Logo */
/* ****************** */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
height: 9.6rem;
padding: 0 4.8rem;
}
.logo {
height: 2.2rem;
font-size: 3.6rem;
text-decoration: none;
text-align: center;
font-weight: bold;
color: #462d12;
}
/* ****************** */
/* Navigation */
/* ****************** */
.main-nav-list {
list-style: none;
display: flex;
align-items: center;
gap: 4.8rem;
}
.main-nav-link {
display: inline-block;
text-decoration: none;
color: #462d12;
font-weight: 400;
font-size: 1.8rem;
}
.main-nav-link.nav-cta {
padding: 1.2rem 2.4rem;
border-radius: 9px;
color: #fff;
background-color: #523414;
}
Styling the Hero Section
To make sure your hero class stays on the left side and doesn’t extend out to infinity, set a max-width of 100px. Otherwise, it will end up like this (extends past center). Consequently, you need to adjust the font size and padding accordingly to avoid disrupting any content within visuals.
/* ****************** */
/* Hero section */
/* ****************** */
.section-hero {
padding: 15rem 0 9.6rem;
}
.hero {
max-width: 75rem;
padding: 0 9.6rem;
align-items: left;
}
.hero-description {
font-size: 2rem;
line-height: 1.6;
margin: 4.8rem 0;
}
Building the Services Section
The site provides the service (including a sweet animal spa treatment!), washing and drying your pet’s coat with their personal touch! And if that isn’t enough, they also offer body massages for you to indulge in while waiting or after.
<section class=”our-services” id=”services”>
<div class=”container”>
<h2 class=”heading-secondary”>Our Services</h2>
<div class=”grid services”>
<div class=”first-service”>
<img src=”img/Full Grooming.jpg” />
<h3 class=”heading-tertiary”>Full Grooming</h3>
<p>Lorem ipsum consectetur adipisicing elit.</p>
</div>
<div class=”second-service”>
<img src=”img/Self Serve Dog Wash.jpg” />
<h3 class=”heading-tertiary”>Self Serve Dog Wash</h3>
<p>Odit aliquam dolor ex doloremque sed itaque.</p>
</div>
<div class=”thrid-service”>
<img src=”img/Wash & Blow Dry.jpg” />
<h3 class=”heading-tertiary”>Wash & Blow Dry</h3>
<p>Voluptatem suscipit ut omnis quas saepe.</p>
</div>
<div class=”fourth-service”>
<img src=”img/Body and Paw Massage.jpg” />
<h3 class=”heading-tertiary”>Body and Paw Massage</h3>
<p>Sapiente quos qui hic porro voluptatibus impedit.</p>
</div>
</div>
</div>
</section>
CSS of Sevice section
Make a grid with two equal columns and adjust all the items in the middle to 80% of their original size. You must attach classes service-item, service-item–hover, and service-item__hover to the list elements.
/* ****************** */
/* Our Services */
/* ****************** */
.our-services {
padding: 9.6rem 0;
}
.container {
max-width: 120rem;
margin: 0 auto;
padding: 1.5rem 3.2rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
justify-content: center;
text-align: center;
}
.services img {
width: 80%;
border-radius: 9px;
}
About Section
This section is to tell about you and your company. It can contain an image and text about your company staff and team.
Create a <div> and place the image and the text inside it.
<section class=”about” id=”about”>
<div class=”container”>
<div class=”grid grid-about about”>
<img src=”img/About.jpg” />
<div class=”text”>
<h2 class=”heading-secondary”>About Us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
officiis, perferendis iure possimus dolor aspernatur incidunt rem
ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam
dolor perspiciatis aspernatur incidunt rem placeat quis assumenda
Dicta!
</p>
</div>
</div>
</div>
</section>
CSS of About Section
Style the text box and image to match your brand’s aesthetic using CSS Grid. Use a drop shadow on either one for that extra touch of elegance!
/* ****************** */
/* About Us */
/* ****************** */
.grid-about {
grid-template-columns: 1.2fr 0.8fr;
gap: 0;
}
.about {
padding: 2rem 0 7rem 0;
}
.about img {
width: 98%;
justify-self: end;
border-radius: 9px;
}
.about p {
font-size: 2.2rem;
}
.text {
max-width: 45rem;
background-color: #e7ac21;
padding: 10rem 5rem;
margin-left: -5rem;
border-radius: 9px;
}
.text h2 {
margin-bottom: 4.5rem;
text-align: center;
}
Building the Footer Section
Add a heading to thank your visitors for thanking you for visiting our site. © is an HTML entity for the © symbol. You can also add an email subscription if needed.
<footer>
<h1 class=”heading-primary”>Thank You For Visiting Jatcii!</h1>
<p>© Copyright 2022 Jatcii</p>
</footer>
Footer CSS
Style the footer with a different background color and appropriate padding.
You can also use text to make your site stand out engagingly! A good tip is to add fonts, families, weights, or sizes that match current branding designs so they don’t look too generic when used on another company’s Website but will still be easily readable at small sizes (such as mobile).
/* ****************** */
/* Footer */
/* ****************** */
footer {
text-align: center;
background-color: #e7ac21;
padding: 2.5rem;
}
Your Website is ready to Publish
Congratulations! You created a website from scratch, and it looks great. It’s time to publish your site so people can see what you’ve got goin’ on in there, but before that–check out these excellent tools for hosting websites without having any monthly fees or other costs associated with them!
Conclusion
Now that you know HTML and CSS basics, it’s time to put your skills to work! In this article, we walked you through creating a website from scratch. We started by discussing the basics of HTML and CSS, and then we moved on to styling different elements of our Website. Finally, we published our site and shared tips for hosting a website without incurring monthly fees. Congratulations–you’re a web developer!
