CodingWithGable
Ever wondered how websites are built? Let’s break it down with the two basic building blocks: HTML and CSS. Don’t worry—it’s easier than it sounds! 😎
HTML = HyperText Markup Language. It’s the skeleton of every webpage.
Here we have very simple html for one page with an image of my cat being distracting.
<html>
<body>
<h1>Hello World!</h1>
<p>This is my first website.</p>
<img src="cat.jpg" alt="Cute cat">
</body>
</html>
Think of HTML like the “bones” of your website. Click here to see what this html creates (Yes, that is my cat).
CSS = Cascading Style Sheets. It makes websites look good.
Now lets add some css to make it a little prettier!
body {
background-color: #5E5694;
}
h1 {
color: #1b1655;
text-align: center;
font-size: 60px;
}
p {
font-size: 40px;
font-family: Arial, sans-serif;
text-align: center;
color: #1b1655;
}
img {
display: table;
margin: auto;
}
Think of CSS like the “clothes and style” of your website. Click here to see how adding this css code changes the page!
HTML builds the content & structure, while CSS adds style & personality. Put them together and you get beautiful, functional websites. ✨
👉 Start simple: one page, one color scheme, one image. Then add more style as you go! 🚀
CodingWithGable
