<p> :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>CLASS :: 11</p><p>04.12 2017 3 Hours</p><p>AGENDA </p><p>HTML CODING YOUR HOMEPAGE :: HEADER <header>, <div id=”logo”>, <nav> :: WORKS <div class=”wrapper”>, <figure>, <img>, <h1>, <figcaption>, <a></p><p>CSS CODING FOR HOMEPAGE [ <header> & works <section> ]</p><p>1 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p> images from watchdogs 2</p><p>2 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>PART II – CREATING THE HOMEPAGE HTML [ index.html ] [PARTI</p><p>CSS [ style.css ]</p><p>3 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>HTML [ index.html ] \</p><p>Preview in Browser</p><p>4 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>CSS [ style.css ]</p><p>Styles for Your section</p><p>Styles for Your figure [ ADD After Styles for section ]</p><p>Styles for Your thumbnail heading, figcaption, & view more button</p><p>5 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>[ For Following Layout ]:</p><p>Styles for .wrapper div element [ Container for each Thumbnail, Heading, figcaption, & hyperlink button]</p><p>Preview in Browser</p><p>6 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>ALT. HTML & CSS FOR FIGURE FULL IMAGE BACKGROUND</p><p>HTML</p><p>YOU MUST DELETE YOUR 3 THUMBNAIL IMAGES FROM HTML: IN FIGURE ONE, LOOK FOR/DELETE: IN FIGURE TWO, LOOK FOR/DELETE: IN FIGURE THREE, LOOK FOR/DELETE: </p><p>7 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>CSS</p><p>Styles for each figure background NOTE: Replace thumb1.jpg, thumb2.jpg, & thumb3.jpg with the thumbnail filenames for your website. They must be saved inside of your images folder [ the one within your public_html folder structure </p><p>Styles for .wrapper [ Will only wrap around heading, caption, and button ]</p><p>Preview in Browser</p><p>8 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES </p><p>HW-11 Homework DUE :: 04.19 REVIEW ::</p><p>1. Class Notes</p><p>2. DEV TIPS: CSS Basics (Part5) — Advanced Selectors SOURCE URL: https://youtu.be/oh2JLo2yxCM </p><p>3. DEV TIPS: CSS Basics (Part6) — Specificity SOURCE URL: https://youtu.be/fy07HYm-geM </p><p>4. DEV TIPS: CSS Basics (Part7) — CSS3 SOURCE URL: https://youtu.be/Qkx3avfK28k </p><p>5. DEV TIPS: CSS Floats and Clears Explained SOURCE URL: https://youtu.be/xFGBNv2KeVU </p><p>6. DEV TIPS: CSS FlexBox Essentials SOURCE URL: https://youtu.be/G7EIAgfkhmg </p><p>7. Watch HTML5 Tutorial For Beginners [ 6 of 6 ] - CSS Page Layout SOURCE URL: http://youtu.be/CPcS4HtrUEU </p><p>DO ::</p><p> Watch Videos  Ensure your images are sized correctly</p><p>SEE HOMEWORK PAGE FOR COMPLETE DETAILS </p><p>BRING :: HW-11</p><p>1 index.html</p><p>2 style.css</p><p>9</p>