Introduction

• Frontend: HTML, CSS, JavaScript and browser-based frameworks.
• Backend: PHP, Laravel, Node.js, Python and other server-side technologies.
• Database: Technologies such as MySQL and PostgreSQL that store and retrieve structured data.

These categories describe common responsibilities rather than rigid boundaries. Some technologies and operations can span multiple layers.

11. Create Your First HTML File

Now create a working HTML document on your computer.

Requirements

• A modern web browser.
• A text editor such as Visual Studio Code.
• A folder in which to save your practice files.

Step 1: Create a Project Folder

Create a folder named html-practice.

Step 2: Create an HTML File

Inside that folder, create a file named index.html.

Step 3: Add the Following Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>My Name Is Your Name</h1>
    <p>I am learning HTML with Codementrix.</p>
    <p>My goal is to become a web developer.</p>
</body>
</html>

Step 4: Save and Open the File

1. Save the file with the name index.html.
2. Open the file in your browser.
3. Check the browser tab title and the displayed content.
4. Change the heading, save the file and refresh the browser.

Understanding the Example

• <!DOCTYPE html> tells the browser to use standards mode for modern HTML.
• <html lang="en"> identifies the document language as English.
• <meta charset="UTF-8"> declares the character encoding.
• <meta name="viewport"> helps the page use the device's viewport appropriately.
• <title> defines the document title shown in the browser tab and used in other contexts.
• <body> contains the document's main visible content.

You will study the document structure and these elements in greater depth in the next lessons.

12. Common Beginner Mistakes

• Confusing HTML with CSS: HTML defines structure and meaning; CSS controls presentation.
• Confusing HTML with JavaScript: JavaScript adds executable behavior and application logic.
• Using the wrong file extension: Save this exercise as .html, not .txt.
• Forgetting to save changes: Save the file before refreshing the browser.
• Assuming every website needs Laravel: Static HTML pages can be served without a backend framework.
• Assuming every browser renders every feature identically: Feature support and rendering details can differ, so test important behavior.
• Thinking HTML5 is a completely frozen version: Modern HTML continues to evolve.

13. Practical Exercises

Exercise 1: Explain HTML

Write two or three sentences explaining what HTML is and why websites use it.

Exercise 2: Compare the Three Technologies

Create a small table in your notes describing the responsibilities of HTML, CSS and JavaScript.