Welcome back to the Armstrong Coding Club for kids! Today, we'll be creating a green square shape using HTML and CSS. But first, we'll take a page from the system development cycle and sketch the shape in paint, to help us plan and analyze our design.
This activity is not only fun and engaging for kids, but it also teaches valuable skills in planning, design, and creativity.
-----------------------------------------------
Timestamps
0:00 🎬 Intro to the Green Square Magic!
1:24 🖌️ Sketching the square shape in Windows Paint
7:52 📂 Creating a folder on the desktop for our files
9:50 🖇️ Launching Sublime Text, our trusty text editor
10:26 ⏸️ Saving our web page into the folder
11:41 💻 Writing HTML code to create the square shape
16:20 🌈 Writing CSS code for the square shape's color
19:19 😱 Whoops, there's an error in the CSS code!
19:49 🔨 Let's center our square shape
20:55 ✅ Aligning the text below the square to the center
21:57 🔢 Making the text bigger
-----------------------------------------------
We hope you enjoy this tutorial and continue to learn and grow in your coding ski