How to Create Your First HTML and CSS Documents

🌱 Let’s Begin with HTML

HTML (HyperText Markup Language) is the backbone of any webpage. It tells the browser what content to show.

🧪 Step 1: Create an HTML file

Open your favorite code editor (like VS Code or even Notepad).
Save a file as: index.html
Paste this starter code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

✨ This will create a very basic page with a title, a heading, and a paragraph.

🎨 Now Let’s Add Some CSS

CSS (Cascading Style Sheets) gives your page style — like color, layout, and fonts.

🧪 Step 2: Create a CSS file

In the same folder, create a new file: style.css
Paste this:

body {
  background-color: #0d0d2b;
  color: #ffe16b;
  font-family: sans-serif;
}

h1 {
  text-shadow: 1px 1px 2px #ff0077;
  font-size: 2rem;
}

🔗 Step 3: Connect HTML and CSS

Update your <head> section in index.html to link the CSS:

<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
  <link rel="stylesheet" href="style.css">
</head>

✅ Now your HTML and CSS are connected! Open index.html in a browser to see the result.

🧠 Sensory Coding Aids

💡 Logic: HTML gives structure; CSS gives style.
🧩 Patterns: Most web pages follow this pattern: index.html + style.css
🧠 Tips: Keep both files in the same folder to avoid confusion.
🧪 Experiment: Try changing colors and font sizes in the CSS and refreshing the browser!

🛠️ Next Steps

Add an image using <img src="your-image.jpg">
Try other HTML tags like <ul>, <a>, and <div>
Explore CSS effects like hover, margin, and border

🌟 Final Thoughts

Creating your first HTML and CSS documents is a magical moment in learning to code. You’ve just built your very first web page — and that’s powerful.

If you ever feel overwhelmed, come back to this page or reach out to your coding community (or to me, Doby! 💛).