Welcome back to {Kids: Code} for another installment of our HTML and CSS tutorial! Over the past several weeks we’ve been slowly building our website and adding new elements to spice it up (if you’re new to our newsletter, welcome! You can check out the first installment of our HTML series here.) Recently, we started thinking about how to combine our love of HTML and our love of JavaScript into one website, and this issue we’re going to keep exploring the different ways to do just that.
Later on, we also have a story from Code.org about programming students in Chile, a STEM podcast recommendation, as well as a fun list of CSS tricks to try out on your own website. As always, if you have any questions or comments you’d like to share, you can reach us at our website or even check us out on Twitter!
Last week, we took a look at how to add some JavaScript to our page to show a message box when a button is clicked. This week, we'll show you how to take it a bit further, and change other parts of your page!
The HTML
When we left off in our last issue, we had built our website using the following HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to my Website!</h1>
<p>Your own text here</p>
<button id="button">Show Message</button>
<script src="scripts.js"></script>
</body>
</html>
And our CSS code, in styles.css:
h1 {
color: red;
background-color: blue;
}
And our JavaScript, in scripts.js:
var button = document.getElementById('button');
button.addEventListener('click', function() {
alert('clicked!');
}, false);
CSS and JavaScript: Best Friends
A cool thing about JavaScript is that you can actually use it to change CSS! Let's say that we want to change our <h1>
style when our button is clicked, maybe to change the text color. There are a few different ways to do this, but for this example we'll turn to our good friend: the class
.
Changing Class Names in JavaScript
To start, we'll need to make one change to our HTML and add an id
to our <h1>
. We'll use this id
in our JavaScript momentarily to make a JavaScript variable for our <h1>
:
<h1 id="header">Welcome to my Website!</h1>
Now, let's add a new class in our CSS (styles.css). We'll use it to make our text blue:
.bluetext {
color: blue;
}
Now, we need to set our button to add our class name when clicked. In our last tutorial, we saw how we could call alert()
when our click happens - now, we want to add a new class name to our header when clicked. We need to do two things to get there.
First, create a variable for our <h1>
, to set the class on:
var button = document.getElementById('button');
var h1 = document.getElementById('header');
Next, change our alert()
to set a class name instead. HTML variables in JavaScript have a special variable attached, called classList
. We can use it to add and remove CSS classes:
button.addEventListener('click', function() {
h1.classList.add("bluetext");
}, false);
Even cooler: instead of just calling .add()
, we can call .toggle()
, and every button click will alternate the header text color!
button.addEventListener('click', function() {
h1.classList.toggle("bluetext");
}, false);
Our full JavaScript code ends up looking like this:
var button = document.getElementById('button');
var h1 = document.getElementById('header');
button.addEventListener('click', function() {
h1.classList.toggle("bluetext");
}, false);
You can add, toggle, and remove classes as much as you want. Try seeing what kinds of things you can change, and check back next week - we'll show you how to take all the above and do animations!
Recently, Code.org shared an article (you can read it in English here or in Spanish here) about students in Chile learning how to code. This story involves a foundation known as Fundación Kodea which brought the Code.org’s own Hour of Code to Chile and made computer programming a very important and popular part of schooling in the country! Now you have students building and coding tools to help their communities which just goes to show the impact that coding can have on our lives and the lives of others.
Earlier this year, actresses Gillian Jacobs and Diona Reasonover began a podcast called Periodic Talks (originally called If/Then) which covers a lot of STEM topics and features guests ranging from engineers at NASA and mathematicians to archaeologists and clothing designers. The whole show, after all, is about the hosts being really curious about anything and everything to do with science. There hasn’t been an episode about just computer programming yet, but the show is still a fantastic and hilarious way to get to know the women who help to make the STEM world keep spinning. [Recommended ages 12+]
Some Neat CSS Tricks!
There are a lot of great guides out on the Internet that can help give you new ideas for your website, so we wanted to take the time to share one from a computer programmer by the name of Marko Denic. You can reach his website here where he has a lot of really cool looking effects that you can try to apply to your website, like learning how to change your cursor to an emoji. With each example you can click on the “HTML” or “CSS” button to see what the code for that element looks like!
Marko Denic also created a Twitter thread of this list that might make it easier to see the most important parts of the code for each of these effects, like here for example:
This Week’s Vocabulary Word
Browser
A web browser is used to navigate websites, like the one you’re reading!