SlideShare a Scribd company logo
Make a Website
Using HTML + CSS
A FREE TECHGIRLZ WORKSHOP FOR GIRLS IN GRADES 5 - 9
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
It’s all about 

respect
Let’s lay down some rules.
• Respect each other
• Respect your teachers
• Respect your equipment
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
Let’s get inspired
• Check out this project: 

https://codepen.io/xdesro/pen/rJQEeW
Log in to CodePen.io
How does the internet work?
How does the internet work?
Computers use a language called
"Transmission Control Protocol/
Internet Protocol" (TCP/IP)
TCP/IP
TCP/IP
TCP/IP
How does the internet work?
Wired and wireless networks
connect computers
How does the internet work?
Internet = billions of
connected computers & servers
With so many computers, how do
we identify each one?
IP Address	
http://74.125.224.72/ 	
How does the internet work?
http://74.125.224.72 	
=	
http://google.com 	
How does the internet work?
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
Domain Name System (DNS)
• If that doesn’t make sense, think of it this way…
Hostname
DNS
IP Address
What are HTML + CSS?
Websites = Files
.jpg		/ 	.png	/ 	.gif	
	
.doc	/	 	.pages	
	
.html	
.css
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
Let’s take a <br>
Take a break!
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
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
Let’s take a <br>
Take a break!
Make Your Website
● Open a NEW window
● Go to CodePen.io
● Make a new pen
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 —>
60 minutes
Make Your Own
Website
Share your work
● Any volunteers who want to share their work?
Thank you!

More Related Content

What's hot (20)

PDF
Bootstrap
Jadson Santos
 
PPTX
Web html table tags
Kainat Ilyas
 
PDF
Lesson 1: Introduction to HTML
Olivia Moran
 
PPTX
HTML Lesson 1
Danny Ambrosio
 
PPT
Presentation on HTML
satvirsandhu9
 
PPT
Intro Html
Chidanand Byahatti
 
ODP
Html
irshadahamed
 
PDF
Div tag presentation
alyssa_lum11
 
PPTX
Html Basic Tags
Richa Singh
 
PPT
PHP - Introduction to Object Oriented Programming with PHP
Vibrant Technologies & Computers
 
PPTX
Microsoft FrontPage PPT
anushreekmurthy
 
PPTX
HTML: Tables and Forms
BG Java EE Course
 
PPTX
Complete Lecture on Css presentation
Salman Memon
 
PDF
1. web technology basics
Jyoti Yadav
 
PDF
jQuery for beginners
Arulmurugan Rajaraman
 
PPTX
html-table
Dhirendra Chauhan
 
PPTX
Html
yugank_gupta
 
PDF
Php Tutorials for Beginners
Vineet Kumar Saini
 
PDF
Introduction to HTML5
Gil Fink
 
Bootstrap
Jadson Santos
 
Web html table tags
Kainat Ilyas
 
Lesson 1: Introduction to HTML
Olivia Moran
 
HTML Lesson 1
Danny Ambrosio
 
Presentation on HTML
satvirsandhu9
 
Intro Html
Chidanand Byahatti
 
Div tag presentation
alyssa_lum11
 
Html Basic Tags
Richa Singh
 
PHP - Introduction to Object Oriented Programming with PHP
Vibrant Technologies & Computers
 
Microsoft FrontPage PPT
anushreekmurthy
 
HTML: Tables and Forms
BG Java EE Course
 
Complete Lecture on Css presentation
Salman Memon
 
1. web technology basics
Jyoti Yadav
 
jQuery for beginners
Arulmurugan Rajaraman
 
html-table
Dhirendra Chauhan
 
Php Tutorials for Beginners
Vineet Kumar Saini
 
Introduction to HTML5
Gil Fink
 

Similar to Build a Website Using HTML + CSS (20)

PDF
Rails Girls - Introduction to HTML & CSS
Timo Herttua
 
PPT
Essentials of HTML (2007)
Matteo Wyllyamz
 
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Erin M. Kidwell
 
PPT
Html intake 38 lect1
ghkadous
 
PDF
Punch it Up with HTML and CSS
mtlgirlgeeks
 
PPT
Club website demo
blstov
 
ZIP
Html5 public
doodlemoonch
 
PPT
Introduction to Web Technology and Web Page Development
BhargaviDalal4
 
PDF
Code & Design your first website 4/18
TJ Stalcup
 
PDF
INT 1010 09-2.pdf
Luis R Castellanos
 
PDF
Introduction to Html
Vineet Kumar Saini
 
PDF
Girl develop It Orlando HTML Remix
Holly Akers
 
PPTX
0 csc 3311 slide internet programming
umardanjumamaiwada
 
PPTX
Web Publishing terminology 1
Beth Lovell
 
PPT
abdelwahab alsammak_Chapter 1-Internet concepts.ppt
David319172
 
PDF
Html for beginners
Florian Letsch
 
PPTX
Untangling fall2017 week1
Derek Jacoby
 
PPTX
Week 1 - Interactive News Editing and Producing
kurtgessler
 
PDF
Code &amp; design your first website (3:16)
Thinkful
 
PDF
Javascript Html Css A Stepbystep Guide Student Student
zorahpyzer7p
 
Rails Girls - Introduction to HTML & CSS
Timo Herttua
 
Essentials of HTML (2007)
Matteo Wyllyamz
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Erin M. Kidwell
 
Html intake 38 lect1
ghkadous
 
Punch it Up with HTML and CSS
mtlgirlgeeks
 
Club website demo
blstov
 
Html5 public
doodlemoonch
 
Introduction to Web Technology and Web Page Development
BhargaviDalal4
 
Code & Design your first website 4/18
TJ Stalcup
 
INT 1010 09-2.pdf
Luis R Castellanos
 
Introduction to Html
Vineet Kumar Saini
 
Girl develop It Orlando HTML Remix
Holly Akers
 
0 csc 3311 slide internet programming
umardanjumamaiwada
 
Web Publishing terminology 1
Beth Lovell
 
abdelwahab alsammak_Chapter 1-Internet concepts.ppt
David319172
 
Html for beginners
Florian Letsch
 
Untangling fall2017 week1
Derek Jacoby
 
Week 1 - Interactive News Editing and Producing
kurtgessler
 
Code &amp; design your first website (3:16)
Thinkful
 
Javascript Html Css A Stepbystep Guide Student Student
zorahpyzer7p
 
Ad

Recently uploaded (20)

PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
ICONIQ State of AI Report 2025 - The Builder's Playbook
Razin Mustafiz
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
ICONIQ State of AI Report 2025 - The Builder's Playbook
Razin Mustafiz
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Ad

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?
  • 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?