HTML & CSS Tutorial | Total-QA

HTML & CSS Tutorial for Beginners

1. Introduction to HTML

HTML (HyperText Markup Language) is used to structure a webpage using tags.

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Hello, World!</h1>

<p>This is my first webpage.</p>

</body>

</html>

2. HTML Elements & Attributes

Elements are building blocks, attributes provide extra info.

<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="Sample Image" width="200">

<a href="https://www.example.com" target="_blank">Visit Example</a>

3. Introduction to CSS

CSS (Cascading Style Sheets) is used to style HTML elements.

<style>
p { color: green; font-size: 16px; }
h1 { text-align: center; }
</style>

<style>

p { color: green; font-size: 16px; }

h1 { text-align: center; }

</style>

4. CSS Selectors

/* Element */
p { color: red; }

/* Class */
.highlight { background-color: yellow; }

/* ID */
#main-title { font-size: 24px; }

/* Element */

p { color: red; }

/* Class */

.highlight { background-color: yellow; }

/* ID */

#main-title { font-size: 24px; }

5. CSS Box Model

div {
    width: 200px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

div {

width: 200px;

padding: 10px;

border: 2px solid black;

margin: 20px;

}

6. CSS Layouts (Flexbox & Grid)

Flexbox Example:

.container {
    display: flex;
    justify-content: space-between;
}
.item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.container {

display: flex;

justify-content: space-between;

}

.item {

width: 100px;

height: 100px;

background-color: lightblue;

}

Grid Example:

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
}

.grid {

display: grid;

grid-template-columns: 1fr 2fr 1fr;

gap: 10px;

}

7. Practical Example with Live Editor

Try editing the HTML below and click Run Code to see output:

<br /> // Sample HTML<br /> <h2>Hello from Total-QA!</h2><br /> <p>This is a live editable example.</p><br />

8. Responsive Design

Use media queries to make your site mobile-friendly.

@media (max-width: 600px) {
  body { font-size: 14px; }
  .container { flex-direction: column; }
}

@media (max-width: 600px) {

body { font-size: 14px; }

.container { flex-direction: column; }

}

9. Next Steps

Create multiple pages for different topics (Java, Python, Tools).
Add interactive tools like Online Java Editor, Age Calculator.
Place AdSense ads strategically for revenue.
Promote tutorials on social media & programming forums.

Total-QA

Automation Tools

HTML & CSS Tutorial