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!
Ad

More Related Content

What's hot (20)

Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
shabab shihan
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
TurnToTech
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
SiddhantSingh980217
 
Html coding
Html codingHtml coding
Html coding
Briana VanBuskirk
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
Ishtdeep Hora
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
PrakritiDhang
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
Ian Jasper Mangampo
 
Javascript
JavascriptJavascript
Javascript
mussawir20
 
Java script ppt
Java script pptJava script ppt
Java script ppt
The Health and Social Care Information Centre
 
Html tags or elements
Html tags or elementsHtml tags or elements
Html tags or elements
Webtech Learning
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
Manoj kumar Deswal
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Html
HtmlHtml
Html
Lincoln School
 
Css Ppt
Css PptCss Ppt
Css Ppt
Hema Prasanth
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
Aarti P
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
Kalyani Government Engineering College
 
HTML
HTMLHTML
HTML
chinesebilli
 

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

Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu
 
Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producing
kurtgessler
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
St. Petersburg College
 
Class1slides
Class1slidesClass1slides
Class1slides
Alexis Goldstein
 
Web development basics
Web development basicsWeb development basics
Web development basics
Kalluri Vinay Reddy
 
WebDev project using html , css, js , python and deployment of the site.
WebDev project using html , css, js , python and deployment of the site.WebDev project using html , css, js , python and deployment of the site.
WebDev project using html , css, js , python and deployment of the site.
gdgoncampusbbit
 
Unit 01 (1).pdf
Unit 01 (1).pdfUnit 01 (1).pdf
Unit 01 (1).pdf
sayalishivarkar1
 
Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1
BeeNear
 
Getting Started with Coding
Getting Started with CodingGetting Started with Coding
Getting Started with Coding
Bohyun Kim
 
Getting started with dev tools (05 09-17, santa monica) upload
Getting started with dev tools (05 09-17, santa monica) uploadGetting started with dev tools (05 09-17, santa monica) upload
Getting started with dev tools (05 09-17, santa monica) upload
Thinkful
 
Introduction web tech
Introduction web techIntroduction web tech
Introduction web tech
Liaquat Rahoo
 
Lecture 2 - HTML Basics
Lecture 2 - HTML BasicsLecture 2 - HTML Basics
Lecture 2 - HTML Basics
KULeuven-OnlinePublishing
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
TJ Stalcup
 
Drupal - What is it?
Drupal - What is it?Drupal - What is it?
Drupal - What is it?
TroyDeRego
 
Wp 3hr-course
Wp 3hr-courseWp 3hr-course
Wp 3hr-course
Rich Webster
 
Girl develop It Orlando HTML Remix
Girl develop It Orlando HTML RemixGirl develop It Orlando HTML Remix
Girl develop It Orlando HTML Remix
Holly Akers
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Pm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodologyPm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodology
prashant mishra
 
What's a web page made of?
What's a web page made of?What's a web page made of?
What's a web page made of?
Charlie Allen
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu
 
Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producing
kurtgessler
 
WebDev project using html , css, js , python and deployment of the site.
WebDev project using html , css, js , python and deployment of the site.WebDev project using html , css, js , python and deployment of the site.
WebDev project using html , css, js , python and deployment of the site.
gdgoncampusbbit
 
Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1
BeeNear
 
Getting Started with Coding
Getting Started with CodingGetting Started with Coding
Getting Started with Coding
Bohyun Kim
 
Getting started with dev tools (05 09-17, santa monica) upload
Getting started with dev tools (05 09-17, santa monica) uploadGetting started with dev tools (05 09-17, santa monica) upload
Getting started with dev tools (05 09-17, santa monica) upload
Thinkful
 
Introduction web tech
Introduction web techIntroduction web tech
Introduction web tech
Liaquat Rahoo
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
TJ Stalcup
 
Drupal - What is it?
Drupal - What is it?Drupal - What is it?
Drupal - What is it?
TroyDeRego
 
Girl develop It Orlando HTML Remix
Girl develop It Orlando HTML RemixGirl develop It Orlando HTML Remix
Girl develop It Orlando HTML Remix
Holly Akers
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Pm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodologyPm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodology
prashant mishra
 
What's a web page made of?
What's a web page made of?What's a web page made of?
What's a web page made of?
Charlie Allen
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 
Ad

Recently uploaded (20)

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
How analogue intelligence complements AI
How analogue intelligence complements AIHow analogue intelligence complements AI
How analogue intelligence complements AI
Paul Rowe
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
How analogue intelligence complements AI
How analogue intelligence complements AIHow analogue intelligence complements AI
How analogue intelligence complements AI
Paul Rowe
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
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?