Responsive Web Design with HTML5 and CSS3 - Intermediate
- Web Hosting, Dreamweaver or other WYSIWYG editor, Photoshop.
This course coves advanced responsive web design topics on HTML5 forms with sprite feedback, responsive video and sliders, and using sprites for social media. Additionally, it covers two different ways to deliver different graphics based on screen width, how to use fonts for icons, and lazy loading images for a gallery. We also toss in a unit covering the Add 2 Home capabilities of Apple handheld devices.
Prior to taking this course you should complete the introductory course in this series.
- Successful students will have completed the "Responsive Web Design with HTML5 and CSS3 - Introduction" course by Paul Cheney.
- Students should know basic responsive design including HTML5, adaptive navigation, media queries, Dreamweaver, etc.
- Introduction to Forms part 101:17
- Introduction to Forms part 220:24
- Overview of the Completed Page09:42
- Progress Bar03:01
- Build a Form Part 107:23
- Build a Form Part 213:12
- Style the Form08:09
- Building a Sprite in Photoshop01:49
- Implementing Pseudo Classes for Form Inputs09:46
- Hooking up the FormToEmail.php File08:17
- Giving Feedback with the Title Tag on Inputs03:23
- View the completed form on SpartanDesignUniversity00:10
- Introduction to Sliders01:41
- Setup the File07:57
- Add a Caption to the Sliders06:13
- Customize the Sliders04:33
- Overview of a Slider with Thumbnails01:27
- Build a Slider with Thumbnails06:12
- Overview of Flexible Video02:22
- Build a Page with Flexible Video08:41
- Overview of Sprites01:33
- Creating a Sprite in Photoshop02:12
- Coding a Sprite03:08
- Styling a Sprite07:54
- Additional Options for Styling a Sprite04:07
- View the Completed Examples on Spartan Design University00:32
- Overview of Images and Font Graphics05:16
- Responsive Images using CSS and background-image08:41
- Embedding a Twitter Feed into a Responsive Column07:50
- Using Fonts for Social Media Icons10:28
- Using Structured Data for your Address and Contact Information13:44
- View the Completed Examples on Spartan Design University00:11
- Overview of Lazy Loading02:30
- Create a Lazy Loading Responsive Gallery with Grey Placeholders10:19
- Modifying the Lazy Load Gallery using Greyscale Thumbnails04:07
- Implementing an Add To Home script for Mobile Devices10:28
- Examples created in this section can be seen on Spartan Design University00:45
Paul received his master's degree from Utah State University in Instructional Technology and worked as a civilian for the United States Air Force doing interactive computer-based firefighter training. He and his family then moved to Provo, Utah where he worked at Brigham Young University for five years in the Instructional Technology Center. While there, he was involved in authoring multimedia, digitizing video, training faculty in instructional technology. He then moved with his family to Buena Vista, VA where he joined the faculty at Southern Virginia University. While there he taught digital media courses. Ten years later he returned to Utah where he is now an Assistant Professor at Utah Valley University teaching courses in their Digital Media department in the Internet and Web Technologies degree.