Page 10 - CC2017_DW_Look_Inside

Contents

Project 6 Project 8
Kayaking CSS3 Site 261 Bootstrap Responsive Page 331

Stage 1 Working with CSS3 Selectors . . . . . . . . . . 263 Stage 1 Working with Bootstrap . . . . . . . . . . . . . . 333
Define HTML Articles.............................263 Create a New Bootstrap Page....................... 335
Add Rounded Corners to an Element..................266 Examine Bootstrap Media Queries ...................339
Define Transparency for a Background Color ............269 More about the Visual Media Queries Bar ..............339
Create Multiple Columns of Text..................... 271 Define the Bootstrap Page Layout Grid ................ 341
Learning More about CSS3 Properties................. 272 Insert Responsive Images..........................346
Copy Content into a Bootstrap Page ..................349
Stage 2 Working with Web Fonts . . . . . . . . . . . . . . 273
Use CSS to Format Page Content .................... 352
Activate Adobe Edge Web Fonts..................... 273
Apply Web Fonts to Page Elements................... 275 Create New Media Queries.........................356
Working with External Web Fonts.................... 278 Show and Hide Content in Different Layouts ............360
More about Showing and Hiding Elements .............362
Stage 3 Adding Video in HTML5 . . . . . . . . . . . . . . . 279
Place a Video in an HTML5 Page .................... 279 Stage 2 Creating CSS3 Transitions . . . . . . . . . . . . . 365
Video Tag Attributes .............................282 Restrict Element Height and Overflow.................365
Use the CSS Transitions Panel.......................367
Stage 4 Creating a CSS3 Image Gallery . . . . . . . . . 284
Define Absolute Positioning ........................284 Project Review ............................... 371
Work with nth-of-type Selectors.....................286 Portfolio Builder Project........................ 372
Define Hover Behavior ............................288
Add a Drop Shadow .............................290
Project Review ...............................292

Portfolio Builder Project........................293

Project 7
Vintage Car JavaScript Site 295

Stage 1 Using JavaScript Behaviors . . . . . . . . . . . . 297
Review Site and File Structure.......................297
Define Element IDs ..............................299
Preload Images with JavaScript...................... 301
Working with the Behaviors Panel ................... 301
Change CSS Properties with JavaScript ................304
Change Object Content With JavaScript ...............307
Define Links to Change the Cursor ................... 310
Understanding JavaScript Behaviors .................. 312

Stage 2 Adding jQuery UI Elements . . . . . . . . . . . . .314
Insert a jQuery Accordion.......................... 314
Add Accordion Content ........................... 317
Change Accordion CSS............................ 320
Grouping CSS Selectors ........................... 322
Using Inspect Mode in Live View .................... 326
Project Review ............................... 327

Portfolio Builder Project........................ 328

x