CSS CODING FOR HOMEPAGE [
1 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
images from watchdogs 2
2 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
PART II – CREATING THE HOMEPAGE HTML [ index.html ] [PARTI
CSS [ style.css ]
3 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
HTML [ index.html ] \
Preview in Browser
4 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
CSS [ style.css ]
Styles for Your section
Styles for Your figure [ ADD After Styles for section ]
Styles for Your thumbnail heading, figcaption, & view more button
5 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
[ For Following Layout ]:
Styles for .wrapper div element [ Container for each Thumbnail, Heading, figcaption, & hyperlink button]
Preview in Browser
6 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
ALT. HTML & CSS FOR FIGURE FULL IMAGE BACKGROUND
HTML
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:
7 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
CSS
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
Styles for .wrapper [ Will only wrap around heading, caption, and button ]
Preview in Browser
8 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
HW-11 Homework DUE :: 04.19 REVIEW ::
1. Class Notes
2. DEV TIPS: CSS Basics (Part5) — Advanced Selectors SOURCE URL: https://youtu.be/oh2JLo2yxCM
3. DEV TIPS: CSS Basics (Part6) — Specificity SOURCE URL: https://youtu.be/fy07HYm-geM
4. DEV TIPS: CSS Basics (Part7) — CSS3 SOURCE URL: https://youtu.be/Qkx3avfK28k
5. DEV TIPS: CSS Floats and Clears Explained SOURCE URL: https://youtu.be/xFGBNv2KeVU
6. DEV TIPS: CSS FlexBox Essentials SOURCE URL: https://youtu.be/G7EIAgfkhmg
7. Watch HTML5 Tutorial For Beginners [ 6 of 6 ] - CSS Page Layout SOURCE URL: http://youtu.be/CPcS4HtrUEU
DO ::
Watch Videos Ensure your images are sized correctly
SEE HOMEWORK PAGE FOR COMPLETE DETAILS
BRING :: HW-11
1 index.html
2 style.css
9
