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.

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!