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.

HTML

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

• div

-input

-class

-id

-li

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

1. On the homepage of Glitch.com, click the button that says “New Project” and then click “hello-webpage”

2. 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.

3. 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!

4. 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

Change the title of your page (found in the head) to say "Your name's Website"
Change the author (also found in the head) to be your name
Change the header of your webpage to say "Your name's Favorite Things About Summer"
Add a link that links back to http://www.udel.codes/LTC
Add some items to your list of favorite summer activities
Add some things to your summer to do list
Change one of the lists to be an ordered list
Add a photo to your website!
Add a paragraph element and write about your favorite summer memory
CHALLENGE TASK Create a list of things you want to do this summer and add checkboxes next to each item! (Pssst look at this page's source code for a hint!)

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!

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:

Change Background Color
Change Text Color
Change the font
Change Header Color
CHALLENGE TASK Change the background to be a gradient (google “Gradient background CSS”)

For resources on CSS/HTML, check out our resource list here