Building websites is the initial step of getting started with web development. One of the first things web development enthusiasts must learn is how to set up CSS and HTML for a website. By setting up the basic introductory page, a beginner can get ready with the website design basics, hone their web development skills, and learn to collaborate with developers.
This tutorial will walk you through the basics of setting up HTML and CSS files for your website. Let’s Start!
- A basic understanding of HTML and CSS.
Step 1- Initial Set Up
Initially, we will create a new project directory and name it a
Next, move to the current directory using the
In the project folder, let’s add the following files that we will need to launch our basic website:
- index.html : This file will have all the HTML codes.
- styles.css : We will keep all the CSS files here for styling our website.
- images : All the necessary images must be kept in this file.
Now that we have created our project directory and added the necessary files, let’s move forward and add the HTML content in our index.html in the next step.
Step 2- Adding HTML Content in the index.html File
In the index.html file that we created in the previous step, we will add the introductory HTML codes. These basic HTML lines will serve as instructions for the browser, but will not be displayed on the webpage.
Add the following block of code in your
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
Let’s understand the terms used:
<!DOCTYPE html> : It is a declaration informing the browser of the type of HTML used in the HTML document.
- As multiple versions of HTML standards are available, specifying the DOCTYPE makes it easy for browsers to identify the HTML version effortlessly. For instance, in this guide, we are using the latest version of HTML5.
<html> : This tag informs the browser that the contents included inside it must be treated as HTML. When opening an
<html> file, make sure to close it using the
</html> tag. This tag supports
lang attributes, and you can specify the language of the webpage. We have set the language to English in our tutorial using the
en language tag.
- Visit the IANA Language Subtag Registry to check out the other languages available for use.
- <head> : This creates a section in the HTML document and contains information about the webpage. However, there is no content detail, and the browser does not display any information here in the head section.
- <meta charset="utf-8"> : Specifies the document’s character set. It must be in a Unicode format, i.e., UTF-8, supporting most recognized written languages.
- <title> : The <title> tag informs the browser about the name of the webpage. The title appears on the browser tab when the website is listed in the search results.
- <link rel="stylesheet" href="css/styles.css"> : Informs the browser to identify the stylesheet containing the CSS styles.
- <body> : This tag contains the main contents of the webpage. When using a <body> tag, make sure to close it using the </body> tag.
Step 3- Styling Using CSS
styles.css file, add styling as per your project needs. In this example, add the following lines of code in your
We have finally created the basic HTML and CSS files we will need to launch our website. Additionally, you can add images and keep them in the images folder. Save and close the file. After that, open the index.html file in your favourite web browser, and you will see a basic page on your screen.
In this introductory tutorial, we’ve learned the basics of setting up HTML and CSS and created a rudimentary website. Now is the time to create new pages, tune them up, add content, and link everything from the navigation bar. As a next step, try adding more content to the index.html file and style it using CSS.
Furthermore, there are other HTML and CSS tutorials that you can find on our blog:
- Creating a Parallax Scrolling Effect with Pure CSS
- Troubleshooting Common HTTP Error Codes
- Using HTTP Client Axios in a React Application: A Tutorial
- Removing Spaces in Python - March 24, 2023
- Is Kubernetes Right for Me? Choosing the Best Deployment Platform for your Business - March 10, 2023
- Cloud Provider of tomorrow - March 6, 2023
- SOLID: The First 5 Principles of Object-Oriented Design? - March 3, 2023
- Setting Up CSS and HTML for Your Website: A Tutorial - October 28, 2022