SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Downloaden Sie, um offline zu lesen
WDES105
HTML and CSS 3




                 about.me/babon
WDES105: Description
This module will explore a richer understanding
of the following:

● CSS selectors
● layout
● web strategy




                                   about.me/babon
WDES105: Objectives
Review:
• HTML and CSS Review
• Floats and Clears Review

New:
• CSS Positioning
• CSS Layout types
• CSS Compound and Contextual Selectors
• CSS Rules of Rule Conflict
                               about.me/babon
WDES105: Topics to Cover
Day 1 -- CSS

● Positioning
  ○   Static
  ○   Relative
  ○   Absolute
  ○   Fixed
● Top, Bottom, Left and Right
● Z-index


                                about.me/babon
WDES105: Topics to Cover
Day 2 -- CSS Layout Types

● Fixed
● Liquid
● Responsive
  ○ only briefly introduce media queries do not spend
    too much time here!
● Elastic


                                         about.me/babon
WDES105: Topics to Cover
Day 3 -- CSS

● Compound and Contextual Selectors




                               about.me/babon
WDES105: Topics to Cover
Day 4 -- CSS Rules of Rule Conflict

● Specificity
● Importance (point system)
● Cascade




                                  about.me/babon
WDES105: Exercises & Deliverables



● What color will the text be?
● Castle Exercise
● Cocktail Project




                                 about.me/babon

Weitere ähnliche Inhalte

Ähnlich wie Wdes105 overview

Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...Rodrigo Castilho
 
Object oriented css. Graeme Blackwood
Object oriented css. Graeme BlackwoodObject oriented css. Graeme Blackwood
Object oriented css. Graeme BlackwoodPVasili
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSSDerek Bender
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
 
Object oriented css graeme blackwood
Object oriented css graeme blackwoodObject oriented css graeme blackwood
Object oriented css graeme blackwooddrupalconf
 
CSS2inCanWestGlobalTemplates
CSS2inCanWestGlobalTemplatesCSS2inCanWestGlobalTemplates
CSS2inCanWestGlobalTemplatesDigital Systems
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourOsama Ghandour Geris
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSJer Clarke
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressGerald Glynn
 

Ähnlich wie Wdes105 overview (14)

Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS,...
 
What is Modular CSS?
What is Modular CSS?What is Modular CSS?
What is Modular CSS?
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 
Evolution of CSS
Evolution of CSSEvolution of CSS
Evolution of CSS
 
Object oriented css. Graeme Blackwood
Object oriented css. Graeme BlackwoodObject oriented css. Graeme Blackwood
Object oriented css. Graeme Blackwood
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
Object oriented css graeme blackwood
Object oriented css graeme blackwoodObject oriented css graeme blackwood
Object oriented css graeme blackwood
 
CSS2inCanWestGlobalTemplates
CSS2inCanWestGlobalTemplatesCSS2inCanWestGlobalTemplates
CSS2inCanWestGlobalTemplates
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSS
 
DW unit 3.pptx
DW unit 3.pptxDW unit 3.pptx
DW unit 3.pptx
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
 

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 03
Lesson 03Lesson 03
Lesson 03
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 

Wdes105 overview

  • 1. WDES105 HTML and CSS 3 about.me/babon
  • 2. WDES105: Description This module will explore a richer understanding of the following: ● CSS selectors ● layout ● web strategy about.me/babon
  • 3. WDES105: Objectives Review: • HTML and CSS Review • Floats and Clears Review New: • CSS Positioning • CSS Layout types • CSS Compound and Contextual Selectors • CSS Rules of Rule Conflict about.me/babon
  • 4. WDES105: Topics to Cover Day 1 -- CSS ● Positioning ○ Static ○ Relative ○ Absolute ○ Fixed ● Top, Bottom, Left and Right ● Z-index about.me/babon
  • 5. WDES105: Topics to Cover Day 2 -- CSS Layout Types ● Fixed ● Liquid ● Responsive ○ only briefly introduce media queries do not spend too much time here! ● Elastic about.me/babon
  • 6. WDES105: Topics to Cover Day 3 -- CSS ● Compound and Contextual Selectors about.me/babon
  • 7. WDES105: Topics to Cover Day 4 -- CSS Rules of Rule Conflict ● Specificity ● Importance (point system) ● Cascade about.me/babon
  • 8. WDES105: Exercises & Deliverables ● What color will the text be? ● Castle Exercise ● Cocktail Project about.me/babon