How to build a website using HTML and CSS

Every developer on their journey to be a master web developer learns HTML in the first place. After being handy with HTML, one proceeds to the next step of learning, which is CSS. The modern-day webpages are so robust and made of advanced technology. Therefore, the question here is – Is HTML and CSS enough to create a website? 

The short answer here is Yes.

If you require a static website that displays text, images, links, and buttons beautifully, HTML and CSS are more than enough to get you a good-looking landing page or even a business website. Let’s start learning the core concepts of HTML and CSS, and at the end of this tutorial, you will be able to create a beautiful website by just using HTML and CSS. 

How to build a website using HTML 

You must be aware of all the basic concepts and techniques associated with HTML before compiling all of it to create a website using HTML and CSS. There are multiple actions you are going to perform while writing code in HTML. 

How To View the Source Code of an HTML Document?

Every webpage on the internet uses HTML to structure its webpage and display it. To view the source code of any webpage, navigate to the webpage, right-click on the page and then select “view page source”. Moreover, you may use a keyboard shortcut CTRL + U or CMD + U to inspect the source code of any HTML document. 

The source code of an HTML document will look something like this. 

Understanding and using HTML Elements

In HTML, elements are the building blocks for an HTML document. It usually contains an opening tag, a closing tag, and the content between them. It helps browsers to interpret in classifying the content, such as headings, images, paragraphs, and more. 

<em> This is an emphasized text </em>

In this example, it tells the browser to interpret and render this HTML element as an emphasized text. 

Using Inline-level and Block-level Elements in HTML

Block-level elements in HTML are those elements that always start on a new line and occupy the complete width of the screen. Some popular block-level elements are, <p>, <div>, <table>, and more. 

Inline-level elements are those elements that occupy only the necessary width and do not start on a new line.

How To Nest HTML Elements

Nesting in HTML is to apply several HTML tags to a single content. In nesting, one element can be placed inside other elements. Another benefit of nesting in HTML includes improving the readability of your code for you and other developers. 

Nesting in HTML will look something like this. 

How to build a website using CSS

Understanding and Creating CSS Rules

CSS rules also known as rulesets and are a combination of one or more CSS properties that you can apply to one or more HTML elements. It consists of a CSS selector and CSS properties. It determines what to style to a targeted HTML element. 

div {
border-color: black;
font-size: 2rem;
}

In this instance, it creates a CSS rule targeting the div element and creating CSS properties, border–color, and font-size to be the style for the div element. 

Declaring Values For Multiple Properties In a CSS Rule

In this section, let us learn how to declare values for multiple properties in a CSS rule. This is very helpful as it allows you to apply several style instructions to an HTML element all at once. In simpler words, for instance, if you want to apply border–color, font-size, and more to a div tag, you can do that all at once.

div {
border-color: brown;
font-size: 2rem;
font-family: 'Times New Roman';
}

Style Images With CSS 

In this section, let’s learn how to style images with CSS such as adding a border to an image, adjusting its dimensions, and further specific CSS to our images in the webpage. First, add an image element in the HTML file.

<img src="doggo.jpg" alt="Image of Doggo">

Now, it’s time to add CSS to the image to make it look good. 

img{
height: 300px;
border-radius: 50%;
border: 12px dotted rgb(255, 85, 0);
}

This CSS will apply to all the images of our HTML document. 

Styling Classes With CSS

Now, let’s see how to create classes with the help of CSS. here, we shall learn how to apply CSS rules only to the HTML elements that have specific classes. First, let’s create an HTML element that has some class, and then we shall apply CSS to the entire class. Applying CSS to the entire class will allow us to style all the elements that have the particular class.

<img src="dog background.jpg" alt="" class="blueBorder">
<h2 class="blueBorder">My name is Doggo</h2>
<p class="blueBorder">Lorem10</p>

In this example, we took three different elements having the same class. Once we apply CSS to the class, it will be applied to all the elements belonging to the same class. 

.blueBorder{
border: 12px solid blue;
}

To use the class as a selector while creating a CSS rule, we use the ‘.’ symbol before writing the class name in the CSS file. 

Styling IDs with CSS

Using IDs as selectors while creating CSS rules is similar to using classes as selectors, however, IDs are unique in the HTML document and no two elements can carry the same IDs. IDs are generally applied to the elements which are present only one time in the HTML document such as the navbar, logo, and more. 

<h2 id="BrowserStack">Using ID as a CSS selector</h2>

Now, let’s create a CSS rule, using ID as a selector. 

#BrowserStack{
font-size: 2rem;
color: blueviolet;
background-color: bisque;
}

Creating Pseudo-classes With CSS

Pseudo-classes are classes that are activated when certain keywords are added to a selector that specifies a certain state. For example, the pseudo-class :hover is used to change the state of the element when a user hovers the pointer over it. 

Let’s take an example when we hover over the previous image, it changes the border color of the image. 

img:hover{
border: 12px dotted blue;
}

Styling HTML <div> element with CSS

The div tag is often used to specify the container for HTML elements. It can also be used to structure the layout of the webpage. Now, let’s understand how to style the div element and its children elements. 

div{
background-color: bisque;
border: 10px solid rgb(232, 69, 69);
border-radius: 2%;
height: 50vh;
width: 50vh;
}

How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS

Before understanding how to adjust the content, padding, border, and margins of an HTML element, let’s understand the CSS box model. It is a box that wraps around every HTML element in the DOM. 

• Content box: It is the space where the content of the HTML element appears, such as images, text, and more. 
• Padding: It is the transparent area around the content of the element. 

• Border: It is the box surrounding the padding box. By default, the value of the border for every HTML element is zero; however, increasing the border value increases the space between the padding and the margin box. 

• Margin: It is the transparent area outside the border box. 

Let’s take the example of the previous image to understand how to adjust these values.

img{
height: 300px;
border-radius: 50%;
border: 12px dotted rgb(255, 85, 0);
padding: 10px 10px 20px 20px;
margin: 20px 20px 15px 10px;
}

How To Set Up Your CSS and HTML Website Project

Before starting our HTML and CSS website project, first let’s set the necessary folder and file structure according to how you are going to code the entire project. Let’s name our folder “build a website HTML”. Inside the folder, create a new “index.html” file and two folders named “CSS” and “images.” Create a “style.css” file inside the CSS folder and store all the necessary images required in the project inside the images folder.

The naming convention is not necessary. However, a well-designed folder structure helps in quick navigation between the HTML and CSS files.

How To Create A Layout And Build A Website Using HTML And CSS 

In this section, let’s create a full-fledged website using only HTML and CSS. Most of the users have a question today – Can you create a website just using HTML and CSS?

It is quite possible to create a good-looking website with the help of only HTML and CSS. HTML stands for Hypertext markup language and provides the skeleton for our website. However, CSS (Cascading Style Sheet) allows the skeleton to be more good-looking. Let us use seven steps to create a good-looking website from scratch. 

• Step 1: Create a Layout 

First create a basic structure of your website as a rough sketch. There are a lot of free online services that will help you design your website. Nonetheless, you must have a basic structure of the website ready.

• Step 2: Set up the boiler code

Create a new project folder and create an empty index.html file inside the folder. Here, add the boilerplate code to the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to create a website using HTML and CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Test</h1>
</body>
</html>

Before starting the actual content add some test content in your HTML file, and run it on the browser to test if the code is working fine.

• Step 3: Create major elements in the layout

Now, create section elements in the HTML file. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to create a website using HTML and CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>

</header>
<main>
<section id="intro">

</section>

<section id="about">

</section>

<section id="contact">

</section>

</main>
<footer>

</footer>
</body>
</html>

• Step 4: Create the HTML content

In the previous step, you had created the elements in the layout. In this step, fill in the HTML content. Note that, in this example,  let us fill the content with dummy text only. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to create a website using HTML and CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#intro">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="intro">
<div class="Container">
<img src="Images/doggo.jpg" alt="display picture of doggo">
<h2>My name is Doggo</h2>
</div> 
</section>

<section id="about">
<div class="container">
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, similique?</p>
<ul>
<li>Btech Qualified</li>
<li>Software Engineer</li>
<li>GATE AIR 01</li>
</ul>
</div>
</section>

<section id="contact">
<div class="container">
<h1>Contact me</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, laudantium.</p>
<ul>
<li>Email ID</li>
<li>Insta ID</li>
<li>Facebook ID</li>
</ul>
</div>
</section>

</main>
<footer>
<p>© Copyright 2022 Doggo Co LTd.</p>
</footer>
</body>
</html>

Now, if you reload the page, you are going to get an output something like this. You are now going to give this webpage some CSS in the next step to make it good-looking.

• Step 5: Create CSS for the layout

Before adding the depth in the CSS, let us first add some basic CSS to make our webpage look somewhat similar to the layout that we designed in the first step. 

Moreover, we linked our HTML file to a CSS file in the second step while writing our boilerplate code. Add the basic layout CSS in the linked CSS file. In this step, we are going to focus on height, width, padding, margin, and display of the sections and images, to make them adjustable according to the webpage. 

*{
padding: 0;
margin: 0;
}

header{
height: 45px;
}
header nav ul{
display: flex;
margin-left: 80%;
}

header nav ul li{
padding-left: 10%;
}

section{
height: 100vh;
border: 1px solid grey;
display: flex;
justify-content: center;
align-items: center;
}

.Container{
margin-top: 10%
}

.Container img{
height: 300px;
}

.Container h2{
margin-top: 3%;
}

footer {
line-height: 40px;
display: flex;
justify-content: center;
}

• Step 6: Create CSS to style individual elements

In this step let us style individual content. Let us focus on properties like font, border, colors, and more.

*{
padding: 0;
margin: 0;
}

header{
height: 45px;
}
header nav ul{
display: flex;
margin-left: 70%;
list-style: none;
}

header nav ul li{
padding-left: 10%;
}

header a{
text-decoration: none;
color: brown;

}

section{
height: 100vh;
border: 1px solid grey;
display: flex;
justify-content: center;
align-items: center;
}




.Container img{
height: 300px;
border-radius: 50%;
}

.Container h2{
margin-top: 2%;
font-size: 3em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.Container p, ul{
margin-top: 2%;
font-size: 1.5rem;
}

footer {
line-height: 40px;
display: flex;
justify-content: center;
font-size: 1rem;
}

• Step 7: Add background color and style 

In this step,let us add some finishing touches, and our website is ready. Let us add a background image and background colors to the sections.

#intro {
background-image: url(pinkbg.jpg);
background-repeat: round;
}
#about{
background-color: bisque;
}
#contact{
background-color: blanchedalmond;
}

After completing the entire code of our website, it will look something like this. Note that you can add more CSS to make it further good-looking. 

How To Test A Website Before Going Live On Browserstack

It is extremely necessary to test your website before hosting it for real-world users. Testing before hosting your website live lets you eliminate all the errors that might be in your website. For testing purposes, let us use BrowserStack Live tool. This tool will allow you to test your website in multiple browsers across multiple operating systems. 

BrowserStack Live is a web-based platform that enables users to test their web applications on real browsers running on real devices. The platform offers several features, including:

• Real-time Testing: BrowserStack Live allows users to test their web applications in real-time on real devices with various browsers and operating systems. Users can interact with their application and debug issues instantly.
• Live Interaction: Users can interact with the device in real-time, just as they would with their own devices. They can use gestures such as tapping, swiping, and scrolling, and use the device keyboard to input data.
• Cross-browser testing: BrowserStack Live supports cross-browser testing on more than 3,000 real devices and browsers, including the latest and legacy versions of popular browsers like Chrome, Firefox, Safari, and Internet Explorer.
• Debugging: The platform provides advanced debugging tools, including console logs, network logs, and element inspection. These tools help users to identify and resolve issues quickly.
• Screenshot and Video capture: Users can take screenshots and record videos of their testing session to share with their team, stakeholders, or clients. This feature enables users to document their findings and collaborate effectively.
• Local Testing: BrowserStack Live provides local testing options for developers to test and debug websites on local machines. 
• Secure testing: BrowserStack Live provides secure testing by encrypting all data transmitted during the testing session. The platform also provides Single Sign-On (SSO) and Two-Factor Authentication (2FA) options for enhanced security.

Sign up for a free BrowserStack account

• Step 1: Open BrowserStack Live

First, open Browserstack Live and select the combination of operating system and web browser on which you want to run the test.

• Step 2: Enable local testing

BrowserStack allows you test your local website. To enable BrowserStack local testing, start a session on BrowserStack Live and look for the green indicator on the ‘Local Testing’ icon in the toolbar tray. 

If the icon is red, look for the BrowserStack local app, download it, and launch a live session from the toolbar. 

• Step 3: Run the test

Now, the final step is to enter the local host URL of your website, and it will display your website on the Live Session. 

Frequently Asked Questions

1. Can I make a website just using HTML and CSS?

Yes, it is possible to create a website using only HTML and CSS. HTML is used to create the structure and content of the website, while CSS is used to add styling and layout to the website. However, adding dynamic functionality to the website may require additional programming languages such as JavaScript.

2. What are the 7 steps to create a website using HTML and CSS?

The 7 steps to create a website using HTML and CSS are as follows:

3. Plan your website
4. Design your website
5. Create the HTML structure
6. Add CSS styling
7. Add content to your website
8. Test your website
9. Publish your website

3. How can I create my own website using HTML?

To create your own website using HTML, follow these steps:

1. Plan your website and decide what you want to include on it.
2. Create a basic structure for your website using HTML.
3. Add CSS styling to your website to make it visually appealing.
4. Add content to your website, such as text, images, and videos.
5. Test your website to make sure it works properly.
6. Publish your website by hosting it on a web server.

4. How long does it take to build a website with HTML and CSS?

The time taken to build a website using HTML and CSS depends on several factors, such as the complexity of the website, the amount of content to be added, and the skill level of the developer. A simple website with a few pages and basic styling can be built in a few hours or days, while a more complex website with dynamic functionality and custom design may take weeks or months to complete.