1.
Unit 1: Web Fundamentals
Lesson 12: Launching Your Own Website
August 24, 2013

2.
Lesson 12: Launching Your Own Website
2
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
3
=

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

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.
5
HAHAHA
Router
ISP
Facebook
server
Amazon
server
Youtube
server
DNS

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

7.
We use FTP to make our website public (II)
7
2. We use FTP to upload our files to a host server, which is a server
connected to the internet
Host server

8.
We use FTP to make our website public (III)
8
3. The host server saves our files and stores them until someone
requests the files for our webpage.
Host server

9.
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
HAHAHA

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

11.
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!
12
+ =

13.
Launch Your Website (I)
1. Go to URL and click on “1. Share your own website!”
13
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.
14
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!
15
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.
16
MacPC

17.
Launch Your Website (V)
5. Back in our browser again, click on the “style.css” tab and paste the
copied code here.
17
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?
18
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”!
19
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”.
20
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!
21
There’s our
webpage!

22.
Launch Your Website (X)
10. Finally, let’s [FILL IN HERE]. We just launched our first website!
22

23.
Summary (I)
• To launch our website for everyone to see, we use FTP to
upload our files to a server
23
Host server
HAHAHA

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!
24
+ =

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
1. Take the follow-up quiz to test your understanding
25