Play with files that give you visible results immediately.
Before big programming languages, it helps to work with simple files that show you direct cause and effect. HTML gives structure, CSS gives style, and Markdown helps you write clean technical notes and README files.
Activity 1: Make a real web page
Create a file named index.html and paste this into it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My First Page</title>
</head>
<body>
<h1>Hello, I am building.</h1>
<p>This page is my first visible output.</p>
</body>
</html>
Now open the file in your browser. That is already a working software artifact.
Activity 2: Style the page
Create a file named style.css:
body {
font-family: Arial, sans-serif;
background: #0b1220;
color: white;
padding: 2rem;
}
h1 {
color: #57e1bc;
}
Then connect it by adding this inside the HTML <head>:
<link rel="stylesheet" href="style.css" />
Activity 3: Write a good README
Create a file named README.md:
# My First Web Page ## What this is A simple page built to practice HTML and CSS. ## What I learned - HTML gives structure - CSS gives style - files become visible output quickly
Markdown matters because almost every serious repo, project note, and contribution flow uses it.
Hands-on challenge
1 Make a page with your name and one paragraph.
2 Add a background color and heading color.
3 Write a README that explains what you built.
4 Put all 3 files in a Git repo and commit them.