How to Make a Website from Scratch with HTML and CSS
Creating a website can be a daunting task if you’re new to web development. HTML and CSS are the building blocks of every website on the internet, and with them, you can create beautiful and functional websites. In this article, we’ll walk you through the steps of creating a website from scratch using HTML and CSS.
You can take a look at this playground, to see the output of simple webpage that you’re going to build in this blog, feel free to tinker around and make changes to the code that you see, with codedamn playgrounds you can see the output of the changes you made in real-time in the browser preview that is available in the playgrounds.
Step 1: Create the Basic Structure of Your Website
The first step in creating a website is to create the basic structure of your webpage. Create a new folder on your computer to organize the files we’ll be creating. You need to create an HTML file. Open up a text editor (it can be a notepad, or any other text editor that you use) and create a new file. Save it with the name index.html
.
The HTML file is the foundation of your website. It contains the structure of your webpage. To get started, copy and paste the following code into your index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>Welcome to my website</h1>
</header>
<main>
<p>My website content goes here.</p>
</main>
<footer>
<p>© My Website 2023</p>
</footer>
</body>
</html>
Code language: HTML, XML (xml)
This is the basic structure of a webpage. Your website now contains a title, a heading, content & footer.
Step 2: Add Style to Your Website with CSS
Now that we have the structure of our webpage, it’s time to make it look great with CSS. Create a new file in your current folder and name it “style.css”. This is where we will add the styles for our webpage.
Copy and paste the following code into your style.css file:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
h1 {
margin: 0;
font-size: 36px;
}
main {
width: 80%;
margin: 0 auto;
}
p {
font-size: 16px;
line-height: 1.5;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
font-size: 12px;
}
Code language: CSS (css)
This is the basic CSS code that styles our webpage. In the above code, you’re style the Heading and the Footer part of the your website to standout and look good. Even though the main of this blog is to build a basic web page, it’s good to get some styling done in the page.
Step 3: Test Your Website
After building and styling your website, you can now test it. Open up your index.html
file in a web browser to see how it looks. If you feel that it’s a bit overwhelming with all the new things that you’ve learnt. It’s fine. Getting into web development can be a bit overwhelming. You can checkout the HTML / CSS course on codedamn to help you understand all the basics of HTML & CSS.
Conclusion
HTML and CSS are the foundation of every website on the internet. By following the steps outlined in this article and using the HTML and CSS properties explained, you can create a website that looks great and is fully functional like this blog page itself. Make sure to checkout our frontend learning path if you want to build fully functional websites like this one.
Sharing is caring
Did you like what Pranav wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses:
20.89k students learning
Mehul Mohan
Learn HTML and CSS [2024 Ready]
113 students learning
Shubham Sarda
Learn Web Development Basics: HTML & CSS
