SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
Front-End Web
Development
Lesson 3
Advanced CSS
Agenda
●
●
●
●
●
●

Review (15 minutes)
HTML Template (10 minutes)
Box Model (50 minutes)
Nested Selectors (20 minutes)
Getting Started (10 minutes)
Lab Time (60 minutes)
Review
Wendy G. Bite
● index
● resume
Homework
Shared Class Web Server vs. Schoology
HTML Template
template.html
reset.css > source
normalize.css > source
style.css
Box Model
Every element on a web page is a box.
What is an element?
Box Model
Box Model
Width = width +
padding-left + padding-right +
border-left + border-right
Height = height +
padding-top + padding-bottom +
border-top + border-bottom
Box Model
Let’s build this …
Start with …
template.html
style.css

Save as …
box_model.html
box_model.css
Box Model
Apply this to …
Wendy G. Bite
index.html
resume.html
Nested Selectors
Not needed to complete Assignment
Makes more sense once the following is
introduced in the next lesson:
<div> tags
IDs and classes
Getting Started
Assignment: Build Fashion Blog
starter code
image_1
image_2
Lab Time
Assignment: Build Fashion Blog
starter code > add external stylesheet
image_1
image_2
Homework
Complete Fashion Blog

Weitere ähnliche Inhalte

Ähnlich wie Lesson 03

Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourHtml week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourOsama Ghandour Geris
 
Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourOsama Ghandour Geris
 
From a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepFrom a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepEast Bay WordPress Meetup
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get startedDimitris Tsironis
 
Writing your own WordPress themes and plugins
Writing your own WordPress themes and pluginsWriting your own WordPress themes and plugins
Writing your own WordPress themes and pluginsStephanie Wells
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsLaurence Svekis ✔
 
Take your display template skills to the next level
Take your display template skills to the next levelTake your display template skills to the next level
Take your display template skills to the next levelElio Struyf
 
Back to Basics WordCamp Chicago 2011 TJList
Back to Basics WordCamp Chicago 2011 TJList Back to Basics WordCamp Chicago 2011 TJList
Back to Basics WordCamp Chicago 2011 TJList TJList
 
Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"Fwdays
 
Javajam coffee house case study chapter 5 (basic of web design html .pdf
Javajam coffee house case study chapter 5 (basic of web design html .pdfJavajam coffee house case study chapter 5 (basic of web design html .pdf
Javajam coffee house case study chapter 5 (basic of web design html .pdfezzi97
 
Building beautiful websites with bootstrap a case study (DevelopMentor webcast)
Building beautiful websites with bootstrap  a case study (DevelopMentor webcast)Building beautiful websites with bootstrap  a case study (DevelopMentor webcast)
Building beautiful websites with bootstrap a case study (DevelopMentor webcast)Michael Kennedy
 
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
 
Creational builder design_pattern
Creational builder design_patternCreational builder design_pattern
Creational builder design_patternbhaskara k
 
BITM3730 8-29.pptx
BITM3730 8-29.pptxBITM3730 8-29.pptx
BITM3730 8-29.pptxMattMarino13
 
BITM3730 8-29.pptx
BITM3730 8-29.pptxBITM3730 8-29.pptx
BITM3730 8-29.pptxMattMarino13
 
Cascading Style Sheets.docx
Cascading Style Sheets.docxCascading Style Sheets.docx
Cascading Style Sheets.docxwrite31
 
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
 

Ähnlich wie Lesson 03 (20)

Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
 
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourHtml week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandour
 
Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandour
 
From a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepFrom a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by Step
 
Lesson 12
Lesson 12Lesson 12
Lesson 12
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get started
 
Writing your own WordPress themes and plugins
Writing your own WordPress themes and pluginsWriting your own WordPress themes and plugins
Writing your own WordPress themes and plugins
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
 
HTML and CSS.pptx
HTML and CSS.pptxHTML and CSS.pptx
HTML and CSS.pptx
 
Take your display template skills to the next level
Take your display template skills to the next levelTake your display template skills to the next level
Take your display template skills to the next level
 
Back to Basics WordCamp Chicago 2011 TJList
Back to Basics WordCamp Chicago 2011 TJList Back to Basics WordCamp Chicago 2011 TJList
Back to Basics WordCamp Chicago 2011 TJList
 
Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"
 
Javajam coffee house case study chapter 5 (basic of web design html .pdf
Javajam coffee house case study chapter 5 (basic of web design html .pdfJavajam coffee house case study chapter 5 (basic of web design html .pdf
Javajam coffee house case study chapter 5 (basic of web design html .pdf
 
Building beautiful websites with bootstrap a case study (DevelopMentor webcast)
Building beautiful websites with bootstrap  a case study (DevelopMentor webcast)Building beautiful websites with bootstrap  a case study (DevelopMentor webcast)
Building beautiful websites with bootstrap a case study (DevelopMentor webcast)
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
Creational builder design_pattern
Creational builder design_patternCreational builder design_pattern
Creational builder design_pattern
 
BITM3730 8-29.pptx
BITM3730 8-29.pptxBITM3730 8-29.pptx
BITM3730 8-29.pptx
 
BITM3730 8-29.pptx
BITM3730 8-29.pptxBITM3730 8-29.pptx
BITM3730 8-29.pptx
 
Cascading Style Sheets.docx
Cascading Style Sheets.docxCascading Style Sheets.docx
Cascading Style Sheets.docx
 
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)
 

Mehr von Gene Babon

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysGene Babon
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingGene Babon
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Gene Babon
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web DeveloperGene Babon
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web TechnologyGene Babon
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things DoneGene Babon
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4Gene Babon
 

Mehr von Gene Babon (20)

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
 
Info Session
Info SessionInfo Session
Info Session
 
Info session
Info sessionInfo session
Info session
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 16
Lesson 16Lesson 16
Lesson 16
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
Lesson 11
Lesson 11Lesson 11
Lesson 11
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
Lesson 09
Lesson 09Lesson 09
Lesson 09
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 

Kürzlich hochgeladen

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 

Kürzlich hochgeladen (20)

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 

Lesson 03