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.
Generative Artificial Intelligence: How generative AI works.pdf
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
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
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
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
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 —>