lesson 03
Post on 19-Jan-2015
62 Views
Preview:
DESCRIPTION
TRANSCRIPT
Front-End Web Development
Lesson 3Advanced 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
Review
Homework (sharing files)● Schoology● Shared Class Web Server● GitHub
HTML Template
template.html
reset.css > sourcenormalize.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.htmlstyle.css
Save as …box_model.htmlbox_model.css
Box Model
Apply this to … Wendy G. Bite
index.htmlresume.html
Nested Selectors
Not needed to complete Assignment
Makes more sense once the following is introduced in the next lesson:
<div> tagsIDs and classes
Getting Started
Assignment: Build Fashion Blog
starter codeimage_1image_2
Lab Time
Assignment: Build Fashion Blog
starter code > add external stylesheetimage_1image_2
Homework
Complete Fashion Blog
top related