Digital Imaging Fundamentals Class Notes

:: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES

CLASS :: 11

04.12 2017 3 Hours

AGENDA

HTML CODING YOUR HOMEPAGE :: HEADER

CSS CODING FOR HOMEPAGE [

1 :: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES

images from watchdogs 2

PART II – CREATING THE HOMEPAGE HTML [ index.html ] [PARTI

CSS [ style.css ]

HTML [ index.html ] \

Preview in Browser

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

[ For Following Layout ]:

Styles for .wrapper div element [ Container for each Thumbnail, Heading, figcaption, & hyperlink button]

Preview in Browser

ALT. HTML & CSS FOR FIGURE FULL IMAGE BACKGROUND

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:

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

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

 Watch Videos  Ensure your images are sized correctly

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-11

1 index.html

2 style.css