Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build a Website Using HTML + CSS

53 views

Published on

In this workshop, students will learn the elements of HTML and CSS and use them to create a website. Using a text editor and web browser, students will edit web page templates and use them to make their own website.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Build a Website Using HTML + CSS

  1. 1. Make a Website Using HTML + CSS A FREE TECHGIRLZ WORKSHOP FOR GIRLS IN GRADES 5 - 9
  2. 2. Let’s Introduce Ourselves! • What's your name? • What grade are you in? • What is your favorite animal at the zoo? • What do you like to do for fun? Icebreaker
  3. 3. It’s all about 
 respect Let’s lay down some rules. • Respect each other • Respect your teachers • Respect your equipment
  4. 4. Quick Facts • 1 out of 4 people in the world have internet access • 76% of world users are in North America • 100 trillion emails are sent in a year • 51% of bloggers are female and 20% are under 20 years old • 2/3 of all web traffic is mobile in 2018 • Open up your web browser, and go to: http://bit.ly/techgirlz-htmlcss-docs
  5. 5. Let’s get inspired • Check out this project: 
 https://codepen.io/xdesro/pen/rJQEeW
  6. 6. Log in to CodePen.io
  7. 7. How does the internet work?
  8. 8. How does the internet work? Computers use a language called "Transmission Control Protocol/ Internet Protocol" (TCP/IP) TCP/IP TCP/IP TCP/IP
  9. 9. How does the internet work? Wired and wireless networks connect computers
  10. 10. How does the internet work? Internet = billions of connected computers & servers
  11. 11. With so many computers, how do we identify each one?
  12. 12. IP Address http://74.125.224.72/ How does the internet work?
  13. 13. http://74.125.224.72 = http://google.com How does the internet work?
  14. 14. Domain Name System (DNS) • The most basic use of DNS is to translate hostnames into IP addresses, like a nickname! Hostname DNS IP Address Google.com http://74.125.224.72
  15. 15. Domain Name System (DNS) • If that doesn’t make sense, think of it this way… Hostname DNS IP Address
  16. 16. What are HTML + CSS?
  17. 17. Websites = Files .jpg / .png / .gif .doc / .pages .html .css
  18. 18. What are HTML + CSS? • Let’s look at an example: https://codepen.io/johnsons531/pen/KVjWGM • HTML stands for Hyper Text Markup Language • It is a language used to create web page layouts. • It uses "HTML tags" to tell web browsers how text, images, and other kinds of content should be arranged on the page. • CSS stands for Cascading Style Sheets • It allows us to change the formatting and style of a web page. It controls things like colors and fonts. HTML CSS
  19. 19. Let’s take a <br> Take a break!
  20. 20. Try it with Flamingos! • Let’s look at an example: http:// bit.ly/techgirlz-htmlcss-docs • Find: the In-Class Links section • Click: Flamingos Sample (CodePen) • What do you see that’s wrong with this page? Fix this code
  21. 21. Try it with Flamingos! • HTML • Create hierarchy (headers, body) • Create list, paragraph • Make URL a link • Add <div> on all content • Review image information • CSS • Change header fonts • Make background legible with font • Add link color/hover color • CSS-friendly color names Work together
  22. 22. Let’s take a <br> Take a break!
  23. 23. Make Your Website ● Open a NEW window ● Go to CodePen.io ● Make a new pen
  24. 24. Make Your Website ● Make a website based on your favorite animal, or a woman in tech ● http://bit.ly/wtsheet ● Use the flamingos work you did as a reference, as well as the cheatsheets in the course materials! Start with this in HTML —>
  25. 25. 60 minutes Make Your Own Website
  26. 26. Share your work ● Any volunteers who want to share their work?
  27. 27. Thank you!

×