Learn to Make a Website

with CodeCademy

Lesson 2: Links for Life

Instruction Overview

Understand

- How basic HTML tags are constructed

- How paragraph and anchor tags interact to connect the web

- How code playgrounds allow you to test your HTML

Apply

- Complete CodeCademy lessons 1.4-1.6

- Open and use CodePen to render HTML <h1>, <p>, <a>

Create

- Develop a small "about" site in CodePen that uses headings, paragraphs, anchors

 

For the instructor's eyes only

Quick review before we jump into CodeCademy

Who remembers what they did last time in CC?

What is so important about HTML?

What is an HTML tag?

How to make a heading

<h1>I Love Learning</h1>

I Love Learning

Open tag
Close tag
The browser removes the tags!

Code

Website

Class goals

☐Complete sections 1.4 to 1.6 in CC

☐Code your own "about" page

 

Let's log onto CodeCademy

Head over to www.codecademy.com

how to log in...

Click Log In

I'll hand out your username and password

Once logged in, click My Courses

next step...

Scroll down to courses and click "Make a Website"

next step...

Click Let's Go!

Task
Complete exercises 1.4 (Add a paragraph and 1.5 (Anchor Elements)

10 min

We know enough to make our own site!

We can build a small one from scratch using a "code playground"

A code playground lets us try out HTML code and see what it looks like on a real site

Let's open up CodePen

Head over to www.codepen.io

Create a New Pen

one last step...

Drag up the web window

Task
Write a short "about" page

10 min

Did we run into any problems?

Let's clear this up before moving on

Task
Complete exercise 1.7 (A Closer Look)
Change one of your words to a link

 

 

 

10 min

Class goals

☐Complete sections 1.4 to 1.6 in CC

☐Code your own "about" page

 

👏🏾​

Next Lesson:

Spice it up with images!

Made with Slides.com