Create a basic responsive website using only HTML and CSS
To build a HTML website from scratch, you will need to use a text editor to create the HTML, CSS, and JavaScript files that make up the website. Here is an example of a basic HTML webpage:
Here we are using VS code, create new file from file menu then save the file by whatever name you want, for example we will save the file as "example.html", here the ".html" file extension is important if you want to save as a plain HTML file.
Using the Emmet abbreviation can be very easy if using VS code. It includes several Emmet abbreviations so you can use to deploy the basic styling of html snippets.
// Type the exclamation mark "!" and then some emmet abbreviation will appear
// Press Enter It will automatically add the entire snippet for you
Or you can simply copy the code from below.
<!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>Document</title>
</head>
<body>
</body>
</html>
Now you have successfully added the basic structure of the web page. Come to the next step, now we will add headers to the page where you can add brand names, menu items, etc.
<!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>Document</title>
</head>
<body>
<header>
<a href="#">Brand Name</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
</html>
As you can see it looks ugly, now we have to add some style to it. Now you will have a question in your mind that how to add style to your page? I guide you to this, you have many options for adding style to your page such as using Pure CSS, Tailwind CSS, Bootstrap, etc.
In this tutorial I will focus on pure CSS, in pure CSS you have three options for incorporating CSS into your HTML. We'll discuss all three options here:
There are all three patterns for adding CSS to your HTML code, inline CSS, internal CSS or embedded CSS and external CSS.
First of all talking about inline CSS, Inline CSS is a method of adding styles to individual HTML elements by using the "style" attribute in the opening tag of the element. The CSS styles added using the "style" attribute are only applied to that specific element and do not affect any other elements on the page.
<body>
<header>
<a href="#">Brand Name</a>
<ul>
<li style="color: red;">menu1</li> // here we have added inline CSS to style an element
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
Now coming to internal CSS, Internal CSS refers to a method of adding styles to a webpage by defining the CSS styles within the head section of the HTML document. It is also known as embedded CSS.
In internal CSS, a 'style' element is added to the head of the HTML document and it contains a CSS rule to set the 'color' property to 'red' for all 'li' elements.
<!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>Document</title>
// set the "color" property to "red" for all "li" elements
<style>
li{
color: red;
}
</style>
</head>
<body>
<header>
<a href="#">Brand Name</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
</html>
Using an external CSS file is considered best practice as it allows you to maintain and update the styles for an entire website in one place. You can use the same CSS file for multiple pages of a website, this way you only have to make changes to the CSS file, and it will be reflected in all the pages that link to it. It also makes it easy to swap out the entire design of a website by simply linking to a different CSS file. Additionally, external CSS files can be cached by the browser, which can improve the performance of your website.
Create new file from file menu then save the file by whatever name you want, for example we will save the file as "style.css", here the ".css" file extension is important to save the pure CSS file.
Now link the newly created CSS file to the HTML file, for which you should add this line of code <link rel="stylesheet" href="style.css"> to the head of the HTML document.
<!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>Document</title>
// added external css
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a id="brand_name" href="/">Brand Name</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
</html>
Here we have assigned "id" to 'a' element because we will use other 'a' element in header, so it is important to assign "id" to this element. "/" represents the root folder which means when the user clicks on the brand name it will take you back to the home page.
Add the bottom line of code to the external CSS to get the same results as before with internal CSS.
li{
color: red;
}
During the development phase you need some VS code extensions that can increase your productivity and help in the development phase. Some of these are, Intellicode Publisher Microsoft, JavaScript and TypeScript Nightly Publisher Microsoft, Live Server Publisher Ritwik Dey. All these are very basic and common for the developer.
You will see the "Go Live" button on the lower ribbon of the VS code, click on it, it will create the local server for you and open the HTML file in the browser. Every time you save the HTML file and their linked files it will refresh your page in the browser so that you can always see realtime changes made to the document.
Now we can customize the element design using external CSS. Let's go ahead with styling our header part.
First reset the property using the wildcard element *{}, different browsers use different default margins and padding, making sites look different by margin or padding. * means "all elements", so with it we can determine margins and other assets that apply to all elements.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
scroll-behavior: smooth;
}
Here we have set the margin and padding to 0, the fonts and scrolling behaviors are set. Here we use 'box-sizing: border-box;', let me tell you why we use this line of code. Without it by default, the width and height of an element are calculated as follows:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set 'box-sizing: border-box;' on an element, padding and border are included in the width and height.
Now that we are styling our headers to look like standard menu headers, that requires us to organize all the header elements into one row and have some margin between them. Let's see how we are changing the design.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
scroll-behavior: smooth;
}
body{
position: relative;
}
header{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
background-color: purple;
color: white;
}
header ul{
display: inline-flex;
flex-direction: row;
list-style: none;
margin-left: auto;
margin-top: auto;
}
header ul li{
margin-left: 20px;
cursor: pointer;
}
header #brand_name{
color: white;
text-decoration: none;
font-size: xx-large;
}
Here we used 'position: relative;' to position all elements inside the body relative to its normal state.
We set the width of the header to 100% so that it can automatically cover 100% of the width of the device. Now come to the second property, 'display: inline-flex;' This will arrange all the basic elements inside the header directly in a horizontal line.
Also we can ask CSS to arrange row, column, reverse row, reverse column, etc. from the element. Here 'flex-wrap: wrap;' will adjust the child element below if we use this page in mobile where the width of the device is lower than that of the PC, so in this case the 'ul' element will be arranged at the bottom of the brand name.
We have used 'padding: 10px;' to provide a standard padding to the header elements from all sides. The properties 'background-color: purple;' will color the background in purple, properties 'color: white;' The font color of all header elements will change to white except the 'a' element. We have to personally change the color of the 'a' element.
Also we can use 'flex-wrap: wrap;' in the 'header ul' property if your menu item is too high, so it will push the menu element downhill from its existing line one by one. You've previously seen a dot icon before each menu element, use the property 'list-style: none;' to remove the dot icon from the menu elements. Here we have used the "margin-left: auto;" property to organize all the menu elements at the right end of the header. The property 'margin-top: auto;' has been used to organize the menu elements at the bottom in the header element.
Now let's come to the next line of code where we used the property 'margin-left: 20px;' in the 'header ul li' element. This will assign a 20 pixel left margin to each 'li' element. The property "cursor: pointer;" will change the cursor behavior, whenever we rotate the mouse cursor over these elements, the cursor arrow will show a hand icon instead of the pointer. Next is the 'header #brand_name' element where we used 'color: white' to change the font color of the brand name to white, the property "text-decoration: none;' will remove the underlined from the brand name. The next property is 'font-size: xx-large;' this will make the font size larger.
Now our menus working on PC as well as mobile, here we have completed the header part with the working menu. Wow!!! Amazing. Next is to work on your content area. It depends on how you want to manage this section, a single body, 2 sections or 3 sections is your choice. I'll focus on the 2 section content area, this will help you understand how you can create a single, or multiple section content area.
Now we've added a few elements after the header element and before the closing body tag, just take a look at the code written below.
<section id="container">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla nunc, fringilla at nulla nec,
elementum faucibus eros. Nunc a venenatis nisi, nec suscipit tellus. Sed est ipsum, finibus id porta vitae,
eleifend sed sapien. Quisque libero dolor, porttitor ut massa quis, fermentum facilisis enim. Maecenas in
ligula sit amet augue ultrices dapibus eget ut ligula. Nullam viverra risus ante, at dapibus tortor lacinia
sit amet. Vestibulum sem leo, condimentum at augue et, pulvinar ultrices metus.</p>
</main>
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla nunc, fringilla at nulla nec,
elementum faucibus eros. Nunc a venenatis nisi, nec suscipit tellus. Sed est ipsum, finibus id porta vitae,
eleifend sed sapien. Quisque libero dolor, porttitor ut massa quis, fermentum facilisis enim. Maecenas in
ligula sit amet augue ultrices dapibus eget ut ligula. Nullam viverra risus ante, at dapibus tortor lacinia
sit amet. Vestibulum sem leo, condimentum at augue et, pulvinar ultrices metus.</p>
</aside>
</section>
<footer>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#policy">Policy</a></li>
</ul>
<hr>
<p>© Your Brand Name. All right reserved.</p>
</footer>
We have created the 'section' element in which two child elements are created i.e. 'main' and 'aside'. "main" as well as "aside" has created the 'p' element as their child and added the short text here, we have provided an ID to the 'section' to use in CSS.
Also we have created footer where we have added some clickable links. After that a horizontal row is created to make it look better. Finally we added the copyright message, you can also add other things according to your requirement.
Now coming back to the CSS part, here we need to add some style to our code. Add the bottom line of code to your CSS file.
#container{
width: 100%;
min-height: 80vh;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
padding: 20px;
}
main{
width: 70%;
margin-left: auto;
margin-right: auto;
}
aside{
width: 25%;
margin-left: auto;
margin-right: auto;
}
p{
text-align: justify;
text-justify: inter-word;
line-height: 150%;
}
@media screen and (max-width: 600px){
main{
width: 100%;
}
aside{
width: 100%;
margin-top: 20px;
}
}
footer{
padding: 10px;
background-color: darkgray;
}
footer ul{
display: flow-root;
list-style: none;
text-align: center;
}
footer ul li{
display: inline-flex;
}
hr{
margin: 10px 0;
}
We add the default width to the '#container' ID to cover the entire width of the device up to 100%, now the "minimum-height" is set to "80 vh", which is the minimum height we set because we don't want the footer to go up when the pages have less content. "vh" means vertical height, "80 VH" means 80% of vertical height.
Next is the 'display' properties, 'flex-direction' and the 'flex-wrap', we covered these properties earlier, so we're not going deep into it. We provided some padding around the container to look better here. Now we want two parts in the "#container", for this we provided 70% of the total width to the "main" and 25% to the "separate". We are using 5% for some spaces between the two elements. For an equal distribution of spaces we set the "margin-left" and "margin-right" properties to "auto".
The 'text-align' and 'text-justify' properties of the 'p' element, it is used to distribute margins evenly in the text. This way the document looks clean, crisp edges so that it looks more polished. We used the "line-height" property to provide some spaces between each line.
Next is the '@media' query, the media query is used for the mobile optimized view. If we use code without a media query, the 'main' and 'aside' elements of the page shrink and look ugly. To see better we want the "aside" element below the "main" element and will both use 100% of the width, so we change some properties of the "main" element and the "aside" element using it.
Now that we're moving on to styling our footer, here "padding" is used for additional spaces from all sides and further add background colors to the footer.
In 'footer ul', 'display: flow-root;' is used this means that the element generates a block element box that establishes a new block formatting context, defining where the formatting root is. The 'list-style' properties remove the dot symbol from each 'li' element. Next is the 'text-align' property, it is used to center the element.
You have used the next properties before, in 'footer ul li' it is used to arrange the element in a horizontal line. The final 'hr' properties have a top-bottom margin of 10 pixels and the left-right margin is 0 because we don't want additional horizontal margins.
Now we have created a simple website using HTML and CSS. If you want some dynamic features and some clickable buttons, etc., we have to include JavaScript as well. In the next Tutorial we will discuss how to add dynamic features using JavaScript to the website.
If you find this tutorial useful, please consider sharing it with others. ♥
As you can see, it's not difficult to create your own responsive website from scratch, even if you don't have any technical skills, you can still do it. If you would like more tutorials on similar topics or any other topics please feel free to ask me on these social media platforms.
If you find this blog useful, please consider buying me a coffee. 
