Welcome back to another edition of {Kids: Code}! This week we’re starting to wrap up our tutorials on HTML, CSS, and JavaScript that we’ve been doing for 8 weeks (if you wanna check them out from the beginning, click here!). Afterwards, we have a new book recommendation for those who love mechanical engineering, a STEM story from Santa Fe, NM, and more!
Want to reach out to us? You can contact us here or check us out on Twitter!
Have you been following our HTML, CSS, and JavaScript tutorials the past few weeks? We've taken a look at how to build websites - the content (with HTML), the styles (with CSS), and interaction (with JavaScript). We also took a look at some more advanced topics, like how to do animations in CSS. This week, we wanted to go over some cool CSS properties that you could use to customize a website (you could even animate some of them!).
Variables in CSS
Did you know that CSS also has variables? It's true! While it's not as flexible as variables in JavaScript, you can store data in variables for using in your CSS.
For example, if we wanted to have a variable that stored a red color we want to use in many places, it would look something like this:
:root {
--primary-color: #ED1111;
}
Our variable is created on the special :root
element, and we're able to use it anywhere we need to (in our CSS) now, like so:
#my_element {
background-color: var(--primary-color);
}
Now when we want to change our colors, we only have to do it in one place, instead of trying to find them all.
"Absolute" Positions
Have you ever been writing some CSS, trying to put an element somewhere, but it's not working? While there's usually a few different ways to solve it, one age-old trick is to just say where it should go in pixel coordinates - if you've done Algebra, it's basically x
and y
coordinates, but don't worry if you haven't, you can experiment with it and learn!
Let's say we have a box:
<div id="my-box"></div>
#my-box {
background-color: red;
width: 100px;
height: 100px;
}
We can position it where we want by telling it to use absolute positioning, like so:
#my-box {
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
The key is to set position: absolute;
(which tells the element to render by coordinates), and then set our x
coordinate (in CSS, this is left
) and y
coordinate (in CSS, this is known as top
) as pixel values. If you wanted to get creative, you could also use percent values, like from 0%
to 100%
.
For a fun trick, try animating the top
and left
values - you could make a cool game with this!
This week we have a different kind of book to share with you: a mechanical engineering one! Scrappy Circuits is a great new guide to building electrical circuit boards without having to spend a lot of money and offers tutorials for all kinds of different bricks. [Recommended ages 8+]
For the Parents
Here at {Kids: Code} we like to highlight stories from around the world that show how STEM, computers, and the Internet are changing schools for the better. For example, last week we shared about a Louisiana school that introduced its own e-sports team and how that taught its students lessons about teamwork and responsibility.
This week, we’re heading to Santa Fe, New Mexico, where the Public Education Department has created a plan to expand and support teaching students of all ages about STEM, computer skills, and digital literacy. This plan goes all the way to 2026 and allows for teachers to receive training to incorporate computer learning into their coursework. You can read about this exciting development here!
What’s “Back-end Code?”
If you’ve ever had that question, or maybe have wondered what a “server” or the difference between “front-end” and “back-end” is, then we’ve got the thing for you! A short guide from Northcoders that you can find here helps you with some of the vocabulary that you might not find us explaining here. These things definitely tie in more with the industry of computer programming so you’ll be seeing some of these words the more you browse what other coders are up to!
This Week’s Vocabulary Word
Coordinates
Coordinates refer to a position on a graph. Most computer screens are graphs of pixels, so we can refer to a point by their
x
andy
coordinate values.