Lesson 112 24 aug13-2300-ay
Upcoming SlideShare
Loading in...5
×
 

Lesson 112 24 aug13-2300-ay

on

  • 12,510 views

 

Statistics

Views

Total Views
12,510
Views on SlideShare
599
Embed Views
11,911

Actions

Likes
0
Downloads
32
Comments
0

6 Embeds 11,911

http://www.codecademy.com 11254
http://localhost 561
http://10.0.0.10 58
http://www.tes.co.uk 30
http://staging.codecademy.com 7
http://www.codecademy.com. 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Lesson 112 24 aug13-2300-ay Lesson 112 24 aug13-2300-ay Presentation Transcript

  • Unit 1: Web Fundamentals Lesson 12: Launching Your Own Website August 24, 2013
  • 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
  • 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 =
  • 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
  • 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
  • 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 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 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 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
  • 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 + =
  • Launch Your Website (I) 1. Go to URL and click on “1. Share your own website!” 13 Click here
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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”
  • Launch Your Website (IX) 9. The preview box now shows the results of our CSS styling! 21 There’s our webpage!
  • Launch Your Website (X) 10. Finally, let’s [FILL IN HERE]. We just launched our first website! 22
  • Summary (I) • To launch our website for everyone to see, we use FTP to upload our files to a server 23 Host server HAHAHA
  • 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 + =
  • 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