Build a Website Using HTML + CSS
- 1. Make a Website Using HTML + CSS A FREE TECHGIRLZ WORKSHOP FOR GIRLS IN GRADES 5 - 9
- 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. It’s all about respect Let’s lay down some rules. • Respect each other • Respect your teachers • Respect your equipment
- 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. Let’s get inspired • Check out this project: https://codepen.io/xdesro/pen/rJQEeW
- 6. Log in to CodePen.io
- 7. How does the internet work?
- 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. How does the internet work? Wired and wireless networks connect computers
- 10. How does the internet work? Internet = billions of connected computers & servers
- 11. With so many computers, how do we identify each one?
- 12. IP Address http://74.125.224.72/ How does the internet work?
- 13. http://74.125.224.72 = http://google.com How does the internet work?
- 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. Domain Name System (DNS) • If that doesn’t make sense, think of it this way… Hostname DNS IP Address
- 16. What are HTML + CSS?
- 17. Websites = Files .jpg / .png / .gif .doc / .pages .html .css
- 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. Let’s take a <br> Take a break!
- 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. 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. Let’s take a <br> Take a break!
- 23. Make Your Website ● Open a NEW window ● Go to CodePen.io ● Make a new pen
- 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. 60 minutes Make Your Own Website
- 26. Share your work ● Any volunteers who want to share their work?
- 27. Thank you!