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>&copy; 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.

Step 1: Create the Basic Structure of Your Website

Step 2: Add Style to Your Website with CSS

Step 3: Test Your Website

Conclusion

No comments so far