Leveraging Fluid-width Principles for Responsive Design in jQuery
In this jQuery tutorial, we'll learn how to code a fluid-width website from scratch that looks great on all devices, using only a text editor and a browser. Software required: Sublime Text 2, Google Chrome 40, Photoshop CS6.
What you'll learn
In this jQuery tutorial, we'll learn how to code a fluid-width website from scratch that looks great on all devices, using only a text editor and a browser. The lessons will show you how to start with a blank document and code the HTML, CSS, and JavaScript needed to make the website look and behave as designed. While coding the website, we'll learn important fluid-width responsive principles to ensure the website scales down to any size. In later lessons, we'll learn about some of the more advanced techniques such as responsive images, CSS3 animations, and performance tricks to make our website perform optimally on any device. By the end of the jQuery training, we'll have leveraged fluid-width principles and media queries to make our website work on a desktop, mobile phone, and everything in between. Software required: Sublime Text 2, Google Chrome 40, Photoshop CS6.
Table of contents
- Setting up Our Base Project 11m
- Writing Semantic Markup 13m
- Creating a Responsive CSS Grid Layout 15m
- Adding Basic Styles to Our Site 12m
- Styling the Fonts and Beautifying the Elements of the Site 16m
- Handling Images Responsively 12m
- Using Media Queries for Content on Smaller Devices 12m
- Using Media Queries to Correct Outlying Display Issues 11m
- Incorporating JavaScript Functionality in Responsive Design 12m
- Improving Performance on Mobile Devices 11m
- Testing and Finalizing Our Responsive Website 10m
