Basic HTML and CSS: A Complete Beginner-Friendly Guide (With Examples)

Learning HTML and CSS is the very first step in becoming a web developer. These two core languages allow you to structure a webpage, style it, and make it visually appealing for users. Whether you want to build a simple personal site, create a form, or practice frontend development, understanding the basics of HTML and CSS is essential.

In this guide, we will break down the fundamentals of HTML and CSS in an easy and beginner-friendly way. You will also find a complete working HTML form example along with custom CSS styling. This article is fully SEO-optimized and written in a simple way so that absolute beginners can understand everything step-by-step.

⭐ What Is HTML?

HTML (HyperText Markup Language) is the standard language used to structure web pages. It tells the browser what to display, such as:

Headings
Paragraphs
Images
Links
Forms
Buttons
Lists

HTML uses tags written inside angle brackets like <h1>, <p>, <form>, <img>, etc.

Every website you visit is built using HTML, which acts as the foundation of all web content.

⭐ What Is CSS?

CSS (Cascading Style Sheets) is the styling language of the web. While HTML handles the structure, CSS controls:

Colors
Fonts
Layout
Backgrounds
Borders
Spacing
Transformations
Animations

Together, HTML + CSS make the complete design of a webpage.

⭐ Why Learn HTML & CSS First?

A beginner should always start with these two languages because:

They are easy to learn.
They are required for any website.
All modern frameworks (React, Angular, Vue) still use HTML & CSS concepts.
Without knowing these, you cannot learn JavaScript effectively.
They help you understand web structure, responsiveness, and UI design.

If you want to become a full-stack developer, this is your first and must-learn step.

⭐ Basic HTML Page Structure (Small & Simple Example)

Below is a simple HTML template that every webpage begins with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Structure</title>
</head>
<body>

    <h1>Hello World</h1>
    <p>This is a basic HTML page.</p>

</body>
</html>

⭐ Complete HTML Form Example

Below is the full HTML code for a sample form, including various input types, a dropdown, checkboxes, radio buttons, a textarea, a submit button, and an image. You can copy and test this code in your own projects:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

	<h2> Welcome, how to fix YouTube channel</h2>
	<bdo dir="rtl">Hello world</bdo>

	<hr>
	<hr>

	<form action="#">

		<label for="nm">Name:</lebel> 
		<input id="nm"type="text" placeholder="Your name" required><br><br>

		<label for="">E-mail:</label>
		<input type="email" placeholder="Your e-mail" required><br><br>

		<label for="">Mobile:</label>
		<input type="number" placeholder="Mobile number"><br><br>

		<label for="">Password: </label>
		<input type="Password" placeholder="Password"> <br><br>

		<label for="">Data:</label>
		<input type="data"> <br><br>

		<label for="">Time: </label>
		<input type="Time"><br><br>

		<label for="">Range: </label>
		<input type="Range"> <br><br>

		<label for="">Upload photo</label>
		<input type="file"> <br><br>

		<input type="submit"><br><br>

		<label for="name">Search</label>
		<input id="name" type="Search"><br><br>

		<label for="">Color</label>
		<input type="color"> <br><br>

		<label for="">Gender:</label>
		<input type="radio" name="Gender"> Male
		<input type="radio" name="Gender"> Female
		<input type="radio" name="Gender"> Other <br><br>	


		<label for="">City:</label>
		<input type="checkbox" > Dhaka
		<input type="checkbox" > Mymensingh
		<input type="checkbox" > Khulna<br><br>

		<label for="">Country</label>
		<select>
			<option value="">Select Your Country</option>
			<option value="">Bangladesh</option>
			<option value="">India</option>
			<option value="">Napal</option> 
			
		</select><br><br>
	
		<textarea name="" id="" cols="40" rows="10" placeholder="Message"></textarea><br>	
		<button>send</button> <br><br>
	</form><br><br><br>

	<img src="assets/img/1.jpg" alt="">

</body>
</html>

⭐ What this HTML example contains:

A heading
A text direction example using <bdo>
Divider lines <hr>
A complete form with almost every type of input
A dropdown
A textarea
A submit button
An image

This is a great practice project for beginners.

⭐ Understanding the CSS Code

Below is the CSS stylesheet used for styling fonts and text:

@font-face{
    font-family:LucyRose;
    src: url(./fonts/LucyRosePERSONAL-Regular.otf);
}

/* Universal Selector */
*{
    margin: 0px;
    padding: 0px;
}

h1{
    font-family:LucyRose;
    color: rgb(128, 0, 0);
    font-weight: 800;
    text-decoration: line-through;
}

.p1 {
    font-family: Courgette;
    font-size: 30px;
    text-decoration: underline;
    text-transform: inherit;
    letter-spacing: 2px;
    word-spacing: 10px;
    color: #00a8ff;
    text-shadow: 10px 10px 10px #130e0e;
}

.p2{
    color: rgb(255, 0, 64);
    text-transform: capitalize;
}

#HTML form example, #CSS styling for beginners, #HTML tutorial for beginners, #how to make HTML form, #frontend web development