Successfully reported this slideshow.

Lesson 112 24 aug13-2300-ay


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Lesson 112 24 aug13-2300-ay

  1. 1. Unit 1: Web Fundamentals Lesson 12: Launching Your Own Website August 24, 2013
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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 or • Domain names can be purchased from many different websites, but the price depends on how popular your name is • For example, will cost much more than
  11. 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. 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. 13. Launch Your Website (I) 1. Go to URL and click on “1. Share your own website!” 13 Click here
  14. 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. 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. 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. 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. 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. 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. 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. 21. Launch Your Website (IX) 9. The preview box now shows the results of our CSS styling! 21 There’s our webpage!
  22. 22. Launch Your Website (X) 10. Finally, let’s [FILL IN HERE]. We just launched our first website! 22
  23. 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. 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. 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