:: MULTIMEDIA TOOLS :: CLASS NOTES

1

CLASS :: 10

04.20

2018 3 Hours

AGENDA HTML CODING YOUR HOMEPAGE [ SETTING UP SECTION TWO & FOOTER ] :: WORKS <section> [ <figure> , <div id=”wrapper”> ] :: ABOUT <section> [ <div id=”profile”> , <div id=”bio”> ] :: FOOTER <footer>

:: MULTIMEDIA TOOLS :: CLASS NOTES

2

HTML [ index.html ]

\

:: MULTIMEDIA TOOLS :: CLASS NOTES

3

CSS [ style.css ]

Styles for Your section

Styles for Your figure [ ADD text-align and position properties to your figure element styles ]

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

:: MULTIMEDIA TOOLS :: CLASS NOTES

4

Styles for Your thumbnail heading, figcaption, & view more button

:: MULTIMEDIA TOOLS :: CLASS NOTES

5

PART III – CREATING THE HOMEPAGE [ About/Bio Section ]

<div id=”profile”>

<div id=”bio”> <div id=”all-about-me”>

<h1> <p> <div id="view-resume"><a>

HTML [ index.html ]

:: MULTIMEDIA TOOLS :: CLASS NOTES

6

CSS [ style.css ]

ADD IMAGE TO PROFILE

Preview in Browser

:: MULTIMEDIA TOOLS :: CLASS NOTES

7

REFERENCE FOR RIGHT COLUMN ONLY

HTML [ index.html ]

\

Preview in Browser

:: MULTIMEDIA TOOLS :: CLASS NOTES

8

CSS [ style.css ]

CSS [ style.css ]

Styles for Your Bio heading, paragraphs, & resume button

Preview in Browser

:: MULTIMEDIA TOOLS :: CLASS NOTES

9

Footer Logo, Copyright, Menu, & Social Media Buttons

HTML [ index.html ] \

CSS [ style.css ]

HTML [ index.html ]

:: MULTIMEDIA TOOLS :: CLASS NOTES

10

STYLES [ For Following footer Layout ]:

Styles for footer child elements [ #footer-menu, .copyright, footer ul (unordered list) / li (list items) / a (hyperlinks) &

#social / #social a (hyperlink element) / #social a img (clickable images) ]

Preview in Browser

:: MULTIMEDIA TOOLS :: CLASS NOTES

11

Homework HW-10

DUE :: 04.27

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. Watch HTML5 Tutorial For Beginners [ 6 of 6 ] - CSS Page Layout SOURCE URL: http://youtu.be/CPcS4HtrUEU

DO ::

• Watch CSS Videos • Ensure your code is without errors & displays well in the browser

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-10

1 index.html

2 style.css