
Creating a website from scratch using HTML and CSS may seem daunting at first, but with the right approach, it’s a rewarding and educational experience. HTML (HyperText Markup Language) provides the structure of your web content, while CSS (Cascading Style Sheets) handles the styling. This guide will walk you through the process of building a simple yet effective website using just these two essential web technologies.
Steps to Build Website from Scratch Using HTML and CSS
Step 1: Setting Up Your Project
Before diving into the code, set up a dedicated folder for your project on your computer. Inside this folder, create two files: “index.html” for your HTML code and “style.css” for your CSS.
Step 2: Structuring Your HTML Document
Start by writing the basic structure of your HTML document. Open your index.html file and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>A simple project</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="image">
<div class="navbar">
<div class="logo">MediCall
</div>
<div class="menus">
<ul class="nav-links">
<li ><a class="active" href="index.html">Home</a></li>
<li><a href="#fields">Service</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="signup"><a href="signup.html">SignUp</a></li>
</ul>
</div>
</div>
<div class="title">
<h2>Meet your Doctor</h2><br>
<a href="#" class="ctn">SignUp</a>
</div>
</div>
<div class="container">
<div class="box">Doctors<br> <br>
<p class="numbers">+824</p>
</div>
<div class="box"> Customer Service<br><br>
<p class="numbers">+20K</p>
</div>
<div class="box">Pion Service<br> <br>
<p class="numbers">+10K</p>
</div>
</div>
<div class="consunting">
<h3 class="abc">Our Consunting For <span class="highlight"> 24 Hours </span> at <br> Headquarters </h3>
</div>
<section id="fields">
<div class="field">
<div class="smallbox"> Cardioigists</div>
<div class="smallbox"> Ophthalmologists</div>
<div class="smallbox"> Endocrinogists</div>
<div class="smallbox"> Dermatologist</div>
<div class="smallbox"> Allergists</div>
</div>
<div id="cardo" class="Cardioigists">
<div class="description1">
<h2>Cardioigists</h2>
<p>A cardiologist is a medical doctor who specializes in diagnosing, preventing, and treating diseases and conditions related to the cardiovascular system, particularly the heart and blood vessels. The cardiovascular system is responsible for circulating blood throughout the body, delivering oxygen, nutrients, and hormones to various organs and tissues. Cardiologists undergo extensive medical education and training to become experts in their field. After completing medical school, they typically pursue a residency in internal medicine, followed by a fellowship in cardiology, which focuses specifically on heart-related conditions. After completing medical school, they typically pursue a residency in internal medicine, followed by a fellowship in cardiology, which focuses specifically on heart-related conditions. </p><br>
<a href="book" class="book">Book your Appointment</a>
</div>
<img class="img1" src="cardo.jpg" alt="cardo">
</div>
<div class="Ophthalmologists">
<img class="img2" src="ophthal.jpg" alt="ophthal">
<div class="description2">
<h2>Ophthalmologists</h2>
<p>Ophthalmologists are medical doctors who specialize in the diagnosis, treatment, and management of eye diseases and disorders. They are trained to provide comprehensive eye care, including vision correction, medical and surgical interventions, and the prevention of eye conditions. It's important to note that ophthalmologists work closely with optometrists and opticians to provide comprehensive eye care. Optometrists primarily focus on routine eye exams, vision testing, prescribing glasses or contact lenses, and managing certain eye conditions. Opticians specialize in fitting and dispensing eyeglasses and contact lenses based on prescriptions provided by ophthalmologists or optometrists.</p><br>
<a href="book" class="book">Book your Appointment</a>
</div>
</div>
<div class="Endocrinogists">
<div class="description3">
<h2>Endocrinogists</h2>
<p>Endocrinologists are medical doctors who specialize in diagnosing and treating disorders related to the endocrine system. The endocrine system is composed of glands that produce and secrete hormones, which regulate various bodily functions and processes. Endocrinologists are experts in hormonal imbalances and conditions that affect hormone production or the responsiveness of target organs to hormones.It's important to note that endocrinology encompasses a wide range of disorders, and endocrinologists may have additional expertise in specific areas such as pediatric endocrinology, reproductive endocrinology, or neuroendocrinology, focusing on the interplay between the nervous and endocrine systems.</p><br>
<a href="book" class="book">Book your Appointment</a>
</div>
<img class="img3" src="endo.jpg" alt="endo">
</div>
<div class="Dermatologist">
<img class="img4" src="derma.jpg" alt="derma">
<div class="description4">
<h2>Dermatologist</h2>
<p>Dermatologists are medical doctors who specialize in diagnosing and treating conditions related to the skin, hair, nails, and mucous membranes. They have extensive knowledge of dermatology, which is the branch of medicine that focuses on the study, diagnosis, and treatment of skin disorders.It's important to note that dermatologists can specialize in various subspecialties within dermatology, such as pediatric dermatology (focusing on skin conditions in children), cosmetic dermatology (emphasizing aesthetic treatments), or dermatopathology (combining dermatology and pathology to analyze skin samples).</p><br>
<a href="book" class="book">Book your Appointment</a>
</div>
</div>
<div class="Allergists">
<div class="description5">
<h2>Allergists</h2>
<p>Allergists, also known as allergist-immunologists, are medical doctors who specialize in diagnosing and treating allergies, asthma, and other immune system disorders. They have expertise in identifying allergic triggers, managing allergic reactions, and providing comprehensive care for patients with allergic and immunological conditions. It's important to note that allergists may also have additional expertise in specific areas, such as pediatric allergy and immunology, focusing on the care of allergic and immunologic conditions in children, or occupational allergy, addressing work-related allergies and sensitivities.</p><br>
<a href="book" class="book">Book your Appointment</a>
</div>
<img class="img5" src="allergy.jpg" alt="allergy">
</div>
</section>
<footer>
<p>
MediCall, Copyright ©2024
</p>
</footer>
</body>
</html>
This basic HTML code sets up the structure of your website with a header, navigation menu, main content area, and footer. The link tag in the section connects your HTML file to the CSS file, which you’ll style next.
You may also like our article on Building Facebook Login Page using HTML and CSS.
Step 3: Styling with CSS
Now that you have a basic structure, it’s time to make your website look visually appealing using CSS. Open the “style.css” file and start with some global styles:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html{
overflow-x:hidden ;
background-color: aliceblue;
}
a{
text-decoration: none;
color: white;
}
ul{
list-style: none;
}
.active{
color: brown;
font-weight: bold;
}
.logo{
color: goldenrod;
font-size: larger;
}
.navbar{
padding:20px;
display: flex;
justify-content: space-between;
}
.nav-links li{
display: inline;
padding-right: 20px;
cursor: pointer;
font-weight: 100;
}
nav a:hover{
color:goldenrod;
}
nav a{
color: beige;
}
.nav-links li{
margin: 0px 30px;
color: beige;
font-weight: 100;
cursor: pointer;
}
.image{
height: 500px;
background-image: linear-gradient(135deg, rgba(30, 29, 29, 0.655), rgba(52, 53, 52, 0.632)), url(doctor.jpg);
background-position: center center;
background-size: cover;
position: relative;
}
.title{
text-align: center;
position: absolute ;
top: 40%;
left: 40%;
}
.ctn{
padding: 8px 15px ;
background: rgb(5, 35, 64);
border-radius: 30px;
color: beige;
}
.signup{
padding: 8px 18px ;
background-color: rgb(5, 35, 64);
border-radius: 30px;
color: black;
}
.container{
display: flex;
background-color: rgb(5, 35, 64);
margin-left: 150px;
margin-right: 150px;
margin-top: 50px;
margin-bottom: 50px;
border: 10px rgb(7, 24, 46) solid;
border-radius: 10px;
padding: 20px 20px 20px 20px ;
justify-content: space-between;
}
.box {
background-color: rgb(5, 35, 64) ;
padding: 30px;
margin: 5px;
color: wheat;
font-weight: lighter;
font-size: large;
justify-content: center;
}
.numbers{
color:antiquewhite;
font-weight: bolder;
font-size: 50px;
}
.consunting{
display: flex;
font-size: 30px;
font-weight: bolder;
color: rgb(7, 24, 46) ;
justify-content: center;
margin-bottom: 25px;
}
.abc{
text-align: center;
}
.highlight{
color: goldenrod;
}
.field{
display: flex;
background-color: rgb(7, 24, 46);
margin-left: 150px;
margin-right: 150px;
margin-top: 50px;
margin-bottom: 50px;
border-radius: 10px;
padding: 5px 5px 5px 5px ;
justify-content: center;
color: beige;
font-weight: bold;
justify-content: space-between;
}
.smallbox{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
}
footer{
padding:20px;
margin-top:20px;
color:goldenrod;
background-color:rgb(7, 24, 46);
text-align: center;
font-weight: bolder;
}
img{
width: 450px;
height:370px;
}
h2{
font-weight: bolder;
color: rgb(87, 63, 4);
}
p{
font-size: 20px;
}
.book{
padding: 8px 15px ;
background: rgb(7, 24, 46);
border-radius: 30px;
color: beige;
}
.img1{
border-radius: 10px;
margin-top: 20px;
}
.Cardioigists{
background-color: rgb(202, 214, 219);
padding-top: 5px;
padding-bottom: 5px;
padding-right: 150px;
padding-left: 150px;
text-align: justify;
display: flex;
flex-direction: row;
column-gap: 50px;
}
.description1{
padding-bottom: 15px;
}
.Ophthalmologists{
display: flex;
margin-top: 50px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 100px;
padding-right: 150px;
text-align: justify;
flex-direction: row;
column-gap: 50px;
}
.img2{
border-radius: 10px;
margin-top: 20px;
}
.Endocrinogists{
margin-top: 50px;
text-align: justify;
background-color: rgb(202, 214, 219);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 150px;
padding-right: 150px;
flex-direction: row;
column-gap: 50px;
display: flex;
}
.img3{
border-radius: 10px;
margin-top: 20px;
}
.Dermatologist{
display: flex;
margin-top: 50px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 100px;
padding-right: 150px;
text-align: justify;
flex-direction: row;
column-gap: 50px;
}
.img4{
border-radius: 10px;
margin-top: 20px;
}
.Allergists{
display: flex;
margin-top: 50px;
background-color: rgb(202, 214, 219);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 150px;
padding-right: 150px;
height: 400px;
flex-direction: row;
column-gap: 50px;
}
.img5{
border-radius: 10px;
margin-top: 20px;
}
Final Thoughts
Building a website from scratch with HTML and CSS is a valuable exercise that teaches you the fundamentals of web development. It’s a great starting point for beginners who want to understand how websites work under the hood. As you become more comfortable with these technologies, you can explore adding interactivity with JavaScript or learning a front-end framework like React. But for now, mastering the basics is a crucial first step in your web development journey.
Happy Learning!
Follow us on Facebook for more amazing articles.