Welcome back! In our first post, we explored what web development is and why it matters. Now it’s time to roll up our sleeves and build something real. In this post, we’ll introduce you to the building blocks of the web: HTML and CSS.
Whether you want to create a personal blog, a portfolio, or just understand how websites work, this is where it all begins.
What Is HTML?
HTML (HyperText Markup Language) is the skeleton of every webpage. It defines the structure and content, like headings, paragraphs, images, and links.
Here’s a simple example:
html
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first webpage using HTML.</p>
</body>
</html>
What Is CSS?
CSS (Cascading Style Sheets) controls how your webpage looks; colors, fonts, layout, spacing, and more.
Here’s a basic CSS snippet:
css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
How HTML & CSS Work Together
Think of HTML as the content and CSS as the design. You can link them like this:
html
<link rel="stylesheet" href="styles.css">
This tells the browser to apply the styles from your CSS file to your HTML content.
Try It Yourself
Create two files using a text editor like notepad:
index.html— your webpage contentstyles.css— your design rules
You can copy from the ones above.
Open index.html in your browser and watch your first webpage come to life!
Final Thoughts
HTML and CSS are the foundation of everything you’ll build on the web. Mastering them gives you the power to create, customize, and control your online presence.
In the next post, we’ll explore JavaScript Essentials: how to make your site interactive and dynamic.
Pingback: JavaScript Essentials: Making Your Site Interactive