Scrolling Website Demo
This site was a demonstration piece for hand coding a scrolling website with bookmark navigation and jQuery features.
Wireframe Demo
This demo wireframe showed students how to use a simple wireframe software to design the content placement from their thumbnail sketches to push the planning to a more realistic project stage after exploring ideas and creating personas.
Coded Site
Students followed along as the site was hand coded and CSS applied. Five sections are shown here using sections wrapped around articles and divs to contain the content. Students created a scrolling portfolio website using responsive media queries to make it mobile ready.
Animated Roll-out Drawer with Quote
Roll-out Drawer is an aside at the bottom of the HTML. This demo was shown so the students could learn absolute positioning of an element and jQuery programming to animate the element with hovering over the edge. Students also learned how to relatively position the circle graphic in the corner.
Accordion Drop-Down Feature
Students learned how to style a header to appear as a bar graphic and the programming required to make an animated accordion drop-down feature using jQuery.
