Educators & parents: You can do this Hour of Code Activity as a class or students can work on it independently. If you have any questions or need help, email info@codespeaklabs.com.
Shout-out to Salma, one of our student leaders who made these tutorial videos. Salma was one of the founding students of The Next Step program, a creative agency led by underrepresented students in grades 9-14.
Can you create a website to raise awareness about climate change?
Knowing how to create a website can come in handy in many ways. For example, raising awareness about things that are important to you. Climate change is a big and urgent problem the whole world is facing, but there is a lot of misinformation about it on the internet. Let's be part of the solution and spread facts by creating a simple website about the effects of climate change!
To create our website we will include :
- Headings
- Text and paragraphs
- Images
- Links
These are common building blocks to websites that you can use over and over again.
In this tutorial, we will also discuss how to be responsible when creating a website– using reliable sources, images that you have permission to use, and keeping your information private.
Let's start coding!
Step 1
Go to https://codepen.io/pen/ (no login necessary) we will focus on the HTML coding box. Then start coding your title, name and researching your topic. We use the United Nations as the source for our website. Make sure you use a reputable, trusted source to find the facts.
Step 2
Add text and hyperlinks! We show you how to add a short paragraph. While Salma is writing her paragraph, you can write yours-- no need to copy what she is writing. You choose what about climate change you want to write about. Just make sure you use the same HTML tags that she uses so that your text is formatted correctly.
If you have more time, you can make an extensive website that goes into a lot more detail using more of the same HTML tags.
WeS
ure
Step 3
It's time to add our image and add a hyperlink. We got our image from the United Nations Climate Change Graphics gallery. There's a lot of cool graphics to choose from: https://www.un.org/en/climatechange/graphics
In the video we come across bugs. Bugs are coding errors which can come from missing tags or wrong placement. Even experienced website developers have bugs in their code, so if you make mistakes, you're in good company.
When you're done,If you want to experiment with even more tags, check out this reference list of HTML tags by W3Schools.
Example final website:
Congratulations! You just coded your very own website to help spread information about climate change.
Want to code another project?
If you want to go beyond an Hour of Code, try to make a Password Generator in Python, a professional computer coding language.
Check out our YouTube channel for more free coding projects like these! https://www.youtube.com/codespeaklabs