If you click on the GEAR ICON in YouTube - you can set the speed (2x or very slow) and the resolution.
Research:
The last example in Chapter 11 demonstrates the CSS Property "vertical-align" But where do all these definitions come from?
The DOM - Every Language has a DOM - Document Object Model
They are the rules that govern the proper syntax for coding.
For each VERSION of a Language, Script, Code - there is a DOM
And each Browser interprets the DOM to its rules, and the Browser Version rules.
CSS Vertical-Align = Aligns an image with the text around it.
W3schools is a great site to learn new Web concepts
CSS - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
CSS Try it - http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align
HTML- http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_verticalalign
Research four(4) other CSS Properties that you find interesting. Use the "Try it Youself" editor to learn what it does. Give me 50 words for each one, links to where you found the information. You may even want to include a link to demonstrate what it does.
After you have done a Google Search from the Google Tool Bar: Tools > Anytime > Past Year
To Refine your search follow these rules https://support.google.com/websearch/answer/2466433?hl=en
The FULL Advanced Search Form: https://www.google.com/advanced_search
Before+After: do 3 Before & After examples from the Chapters, put links to them on your Google Web Site's Assignment06 web page.
When you are ready for JilMac to grade you, put a LINK to the Google Assignment06 web page in Moodle.
Workshops & Videos
· Minifiers - Un-minifiers
Web Site Development On-Line CIS 1151-VS01-V16FA & On-Ground CIS 1151-VS01-V16FA
Assignment06 of 14 due in 1 week (note it may take longer - so be patient with yourselves)
Updated: 06/13/2017 by http://JilMac.com
eMail: Jil@JilMac.com or JilMac.MacRand@gMail.com
Phone: 802-254-8628 M-F 6am-8pm, S-S 8am-8pm or for additional hours call to setup
Read: Chapter 11 Layout with Styles
· Testing Code - Developers Tools in Chrome
· Intro to DOM & W3Schools
Project Outline
Advanced "Things"
An interesting website course from Code Academy
The finished website "Upgrades the Image Rollover" with an Image Zoom on Mouse-Over.
The course is expensive (but not as much as College Credit Courses!)
Example Website Jumpstart:
The Extra Credit question is - what CSS or JavaScript libraries do they use to Zoom the Image on Rollover?
HINTS: The Image Carousel is jQuery SLICK http://kenwheeler.github.io/slick
In the CSS file:style.css Lines 143-148
usese webkit ... here is a W3Schools tutorial on it https://www.w3schools.com/css/css3_2dtransforms.asp
.image-container img:hover {
opacity: 1;
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}