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.
Course info
Level
Beginner
Updated
Mar 24, 2015
Duration
2h 16m
Table of contents
Description
Course info
Level
Beginner
Updated
Mar 24, 2015
Duration
2h 16m
Description

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.

About the author
About the author

Saif Ebrahim is a Web Developer at LinkedIn with a focus on client-side technologies, JavaScript, responsive design, and performance optimization.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hi everyone, my name is Saif Ebrahim. I'm currently a Front-end Web Developer at LinkedIn. My latest projects include making the Cafepress. com site fully responsive, and creating an HTML5 base mobile app for Target. In this course, we are going to coair a responsive website from scratch, without the use of tools such as Bootstrap or jQuery mobile. Some of the key takeaways from watching this course include learning how to turn a mockup into a fully responsive website that looks great on all devices. Code a fluid grid that works off proportions instead of pixels. Write Semantic HTML markup with a responsive website in mind. Utilize CSS and JavaScript techniques which ensure your website adapts to any screen size. By the end of this training, you will have learned how to code websites that look great on desktops, phones, and everything in between. I'm extremely excited to work with Digital-Tutors and share these techniques with you. So let's get started with the first lesson.