2015
Lynda
Chris Converse
2h 8m
English
While there are plenty of prebuilt sliders, carousels, and marquee tools available for free on the web, there will come a time when you need a design that's more custom. In this course, Chris Converse shows you how to build your own responsive promotional marquee from the ground up with CSS, HTML, and JavaScript. The end result is interactive, attractive, and responsive, adapting both the content and user experience to fit small screens. The skills you learn will allow you to build the marquee featured in the course, create your own design, or modify the prebuilt galleries you find on the web. Download the free exercise files to get started.
Introduction
3m 46s
Introduction to this course
58s
About this course
59s
About the exercise files
1m 49s
1. Setting Up the HTML for Structure and Content
21m 9s
Creating SEO-friendly markup for the marquee data
4m 52s
Adding a debug area to the HTML
1m 44s
Linking CSS and JavaScript files
1m 46s
Hiding the markup used for the data
2m 53s
Creating a JavaScript object for the variables
4m 6s
Populating the HTML debug area with JavaScript variable values
5m 48s
2. Manipulating and Storing HTML with JavaScript
48m 21s
Gathering data from the marquee data markup
11m 29s
Running a function with the jQuery document ready function
2m 0s
Measuring and storing the browser screen size
4m 37s
Creating the marquee timer
3m 56s
Injecting custom markup for the design
3m 49s
Injecting markup for the large marquee stage
3m 9s
Creating a navigation button for each panel
3m 14s
Halting animations based on user interaction
4m 36s
Loading and cross-fading new panel content
11m 31s
3. Creating CSS for Layout and Design
20m 17s
Adding style and a layout to the stage
4m 26s
Styling the panel content
3m 39s
Creating a semitransparent gradient with CSS
2m 40s
Styling the navigation buttons
4m 52s
Styling the next and previous buttons
4m 40s
4. Setting Up JavaScript Times and Interactions
17m 57s
Advancing the panels with the timer
5m 37s
Adding selected states to the navigation
4m 43s
Activating the next and previous buttons
7m 37s
5. Making Adjustments for Smaller Scenes
16m 39s
Injecting markup for the small marquee stage
6m 4s
Adding style to the small marquee stage
1m 42s
Using media queries for more precise responsiveness
7m 8s
The final details
1m 45s
www.lynda.com/CSS-tutorials/Creating-Responsive-Homepage-Marquee/366450-2.html
Download File Size:261 MB
|
