Unit 1: Web FundamentalsLesson 12: Launching Your Own Website

August 24, 2013

2

Lesson 12: Launching Your Own Website

Introduction to HTML

Learning to Use HTML

HTML and Email

History and Future of the

Web

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4

Lesson 8 Lesson 7 Lesson 6 Lesson 5

Lesson 9 Lesson 10 Lesson 11 Lesson 12

Build understanding Develop skills

3

Recap from last time (I)

• Learning to read code well is important – we will spend more time reading other people’s code than writing code ourselves

• Remember the DRY Principle: Don’t Repeat Yourself. Reuse code whenever possible!

• Using open source code that has been shared on the internet can help us save a lot of time

=

4

Recap from last time (II)

• Websites such as Wordpress provide many prewritten templates of code to choose from

• Twitter Bootstrap is an example of a free framework that gives us a helpful toolkit for styling our website

• Frameworks like Bootstrap can transform our website without us writing a single line of code!

5

Remember how the internet works?

• When we visit a website, we rely on servers to send us the files for the page. So to change what everyone sees, we need to change the files on the server itself.

HAHAHA

RouterISP

Facebook server

Amazon server

Youtube server

DNS

We use FTP to make our website public (I)

6

1. File Transfer Protocol (FTP) is what we use to share files between computers through the internet

Host server

HAHAHA

We use FTP to make our website public (II)

7

HTML

CSS

2. We use FTP to upload our files to a host server, which is a server connected to the internet

Host server

We use FTP to make our website public (III)

8

HTML CSS

3. The host server saves our files and stores them until someone requests the files for our webpage.

Host server

We use FTP to make our website public (IV)

9

4. When someone visits our page, the server sends them our page’s files and they can access our website!

Host server

HTML

CSS

HAHAHA

But before we can launch a website, we need to do two things (I)

10

1. Pay a one-time fee to buy a domain name

• A domain name is an address for people to find you on the web, like www.codecademy.com or www.theguardian.com

• Domain names can be purchased from many different websites, but the price depends on how popular your name is

• For example, www.books.com will cost much more than www.nobodywillfindme.org

But before we can launch a website, we need to do two things (II)

11

2. Pay a hosting company to store your files on their servers

• Hosting companies usually charge a monthly fee to continually store all your files

• The more you need to store, the more you will have to pay

12

Codecademy has a free alternative to launch your website

• We can easily launch our code and see what it looks like through Codecademy’s “Launch Your Website” course

• It’s faster than having to purchase a domain name and pay a hosting company, and best of all, it’s absolutely free!

+ =

13

Launch Your Website (I)

1. Go to URL and click on “1. Share your own website!”

Click here

14

Launch Your Website (II)

2. We’re going to put our “Smelly Cat” page up on the web. Open your “smelly-cat.html” file from Lesson 8 and copy all the text.

MacPC

15

Launch Your Website (III)

3. Back in our browser, paste the copied code into the “index.html” tab. You should immediately see the results of the HTML appear in the white box!

We can preview what our HTML

would look like in the browser

16

Launch Your Website (IV)

4. Now it’s time to upload our CSS. Open up our “smelly-cat.css” file and copy all the text.

MacPC

17

Launch Your Website (V)

5. Back in our browser again, click on the “style.css” tab and paste the copied code here.

Click this tab

18

Launch Your Website (VI)

6. Even though we pasted in our CSS code, it doesn’t look like it had any effect on our page. Can you figure out why?

Here’s what our HTML would

look like in the browser

19

Launch Your Website (VII)

7. To see the error, we need to go back to our HTML code. Click the “index.html” tab. Notice that our HTML file is still linking to “smelly-cat.css”!

First click this tab Linked to the

wrong CSS file

20

Launch Your Website (VIII)

8. To fix the error, we need to link to the correct CSS stylesheet. Replace “smelly-cat.css” with “style.css”.

Stylesheet named “style.css”

Fixed link – now linked to

“style.css”

21

Launch Your Website (IX)

9. The preview box now shows the results of our CSS styling!

There’s our webpage!

22

Launch Your Website (X)

10. Finally, let’s [FILL IN HERE]. We just launched our first website!

23

Summary (I)

• To launch our website for everyone to see, we use FTP to upload our files to a server

Host server

HAHAHA

HTML CSS

24

Summary (II)

• Launching a website costs money

• We need to pay a one-time fee to purchase a domain name

• We need to pay a monthly fee to a hosting company for storing our files on their servers

• We can also do it on Codecademy for free!

+ =

25

What to do on your own

1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learned

3. Take the follow-up quiz to test your understanding