**Keywords:** web development for kids, HTML basics CSS
styling
.. Building a Webpage Is Like Getting Dressed!
You know how you build a LEGO figure and then add
accessories to make it look awesome? Creating a webpage is similar.
Imagine a webpage as a person:
* **HTML** is like the skeleton. It helps create the
structure and holds everything together.
* **CSS** is like the clothes and style. It adds colors,
fonts, spacing and personality.
Without HTML you can't display anything. Without CSS your
webpage. Looks plain. Together they create websites!
If you like **web development for kids** learning HTML and
CSS is a place to start.
.. What Is HTML?
HTML stands for **HyperText Markup Language**.
HTML tells the browser:
* What the heading is
* What text belongs in a paragraph
* Where images should appear
* How information is organized
Think of HTML like a house blueprint.
... Common HTML Tags
| Tag |
Purpose |
| -------- | ----------------- |
<h1>` | Main
heading |
| `<p>` |
Paragraph |
| `<img>` |
Image |
| `<body>` | Main page content |
.. What Is CSS?
CSS stands for **Cascading Style Sheets**.
CSS controls:
* Colors
* Fonts
* Text alignment
* Backgrounds
* Spacing
Think of CSS like choosing your outfit, hairstyle and
favorite colors.
... Examples of CSS Styling
```css
color: blue;
text-center;
background-color: lightyellow;
```
These small instructions can totally change how your webpage
looks!
. Build Your First Personal Webpage
Lets create a webpage that introduces you or your pet.
.. Step 1: Create an HTML File
Save a file called:
```text
mypage.html
```
Paste this code inside:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background-color: .f0f8ff;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: .2e86de;
}
p {
color: .333;
font-size: 18px;
}
.card {
background-color: white;
width: 400px;
margin: auto;
padding: 20px;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="card">
<h1>Hello I'm Alex!</h1>
<p>I love coding, football and drawing
cartoons.</p>
<p>My favorite animal is a dog.</p>
</div>
</body>
</html>
```
.. Understanding the Code
... The Heading
```html
<h1>Hello I'm Alex!</h1>
```
This creates the main title of your webpage.
... The Paragraphs
```html
<p>I love coding, football and drawing
cartoons.</p>
```
Paragraph tags display information about you.
... The Card Container
```html
<div class="card">
```
This groups your content into a box.
... CSS Styling
```
background-color: .f0f8ff;
```
Changes the page background color.
```
text-align: center;
```
Centers all text.
```css
color: .2e86de;
```
Changes text color.
.. Create a Pet Profile Instead
Love animals? Replace the text with your pets information:
```html
<h1>Meet My Cat Whiskers!</h1>
<p>Whiskers is 3 years old.</p>
<p> hobby: Chasing toy mice.</p>
```
Congratulations—you've just built a mini pet website!
.. Custom Styling Parameters You Can Change
Try editing these values:
... Background Color
```css
background-color: lightgreen;
```
... Heading Color
```
color: purple;
```
... Font Style
```css
font-family: Comic Sans MS;
```
... Text Alignment
```css
text-align: left;
```
or
```css
text-align: right;
```
or
```css
text-align: center;
```
Experimenting is one of the best ways to learn **HTML
basics** and **CSS styling**.
. Challenge Time!
Now it's your turn.
... Mission 1: Change Colors
Choose:
* A new background color
* A new heading color
* A new paragraph color
Make the page match your personality.
... Mission 2: Change Text Alignment
Try all three:
```css
text-align: left;
```
```
text-align: center;
```
```css
text-align: right;
```
Which style looks best?
... Mission 3: Make It Your Own
Replace the example text with:
* Your name
* Your hobbies
* Your game
* Your favorite. Animal
.. Final Thoughts
Every website starts with two building blocks:
* **HTML** creates the structure. **HTML** is like the
skeleton.
* **CSS** adds the style. **CSS** is like the clothes.
Once you're comfortable with these basics you'll be ready to
create portfolios, hobby pages, pet profiles and even full websites. Learning
**web development for kids** is a way to combine creativity and technology
while building skills used by professional web developers around the world.
Start experimenting, change colors, update text and make
your first webpage uniquely yours! **HTML** and **CSS** are the keys, to
creating websites!
No comments:
Post a Comment