HTML/CSS online learning
http://www.codeacademy.com
http://learn.shayhowe.com
http://www.lynda.com/HTML-training-tutorials/224-0.html
Responsive Web Design:
http://www.html5rocks.com/en/mobile/responsivedesign/
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
More jQuery effects
-
Sliding Panel
-
Show/Hide
-
Chained Animation
- Simple jQuery Slideshow
http://www.tutorialspoint.com/jquery/
Makes the code wait for document to load first:
$(document).ready(function(){
}
jQuery Plug-ins
Javascript libraries that extend the functionality of jQuery.
Thousands of plug-ins are available on the web due to the flexibility of the jQuery architetcture.
jQuery Plug-ins
Image Slideshows
http://
www.slidesjs.com/- http://unslider.com/
http://responsiveslides.com/
-
http://dev7studios.com/lean-slider/
Parallax Scrolling
- http://markdalgleish.com/projects/stellar.js
- http://ianlunn.co.uk/plugins/jquery-parallax/
-
https://github.com/Prinzhorn/skrollr
- http://lodep.com/best-free-parallax-scrolling-jquery/
- http://inspirationfeed.com/resources/tools/5-best-jquery-plugins-for-parallax-scrolling/
Parallax Scrolling - stellar.js
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div data-stellar-ratio="0.7" data-stellar-vertical-offset="-450" ></div>
</div>
https://plugins.jquery.com/
http://www.unheap.com/
http://www.jquery4u.com/plugins/
Final Design Project - Due May 14th
Design A Responsive Tourism Website of your Hometown
-
4 pages - Home Page/Points of Interest/Gallery/HTML Form
-
Responsive Design and Nav Menu
-
Image Slide Show
-
HTML Form (quiz/sweepstakes entry/request for info)
Final Design Project - Due May 14th
Responsive CSS templates
http://speckyboy.com/2012/09/03/20-free-responsive-html-css-templates/
http://html5up.net
http://blog.crazyegg.com/2014/01/24/flat-design-responsive-site/
http://w3layouts.com/