Learn to Code Day 1
Welcome to day one of learn to code!
We're so glad you're here, and we're so excited to teach you guys some new and exciting things, and we hope you're excited to learn!
Why learn to code?
There are so many reasons to learn to code, here’s just a few:
- It's fun!
- It can help you solve some of the world's biggest problems
- Gain a better understanding of the world around you
- Have more career choices in the future
- You can create and build nearly anything you can imagine
Let’s get started!
Build your own website!
1. Make a Glitch.com account (if you want to)
Before we start, open up glitch.com. You don’t need to make an account to do today’s activity, but if you want to save your work for longer than 5 days, you’ll need to make an account.
To make an account on Glitch, press the “Sign in” button in the upper right, then click “Create an Account”. If you have a G-Mail, Facebook, or GitHub account, you can sign in with those, or you can just use your regular email.
If you sign in with your email, you might have to verify your account through an email that Glitch sends you.
First, we’ll learn about HTML so you can build your very own website!
Before we begin learning, let’s check out some other websites and look at their HTML.
Right click anywhere on this page and click the button that says “view page source”. This should open up another page, which will contain all of the HTML used to build this website. You can do this for any website on the internet!
Look through the HTML. See if you can find places where it says
Once you’ve found some of those items, click here to start learning how to write HTML code!
Ready to write your own code?
2. Make a new Glitch project
On the homepage of Glitch.com, click the button that says “New Project” and then click “hello-webpage”
Once the project loads, go into the file that says “index.html”. Remove all of the code that’s in that file now and replace it with the code from this template.
Press the button that says “Show” and then click either “In a New Window” or “Next to the Code”. Now you can see your very own website/share it with others!
Spice up the code! Add whatever you like to it! We’ve created a few tasks below to get you started.
Things to add to YOUR index.html
Now that you’ve add all of this cool content, let’s add some color and style to it! We’ll do this using CSS!
Want to add some style??? Click here to learn about CSS!
Another important concept in CSS is the use of selectors, which allow the programmer to choose which items they want to apply CSS to.
A very helpful (and fun!) game to play to learn more about selectors is the CSS Diner Game found here.
Try adding some CSS to your glitch website! Go into the file called “style.css” on the left side of the screen and begin adding your CSS there!
Try these tasks:
For resources on CSS/HTML, check out our resource list here