Create a Responsive Web design using CSS3 and HTML5

Показать описание

Responsive Web Design is an approach towards making your website to have have optimal viewing experience in various devices. With wide variety of devices available in market, people may view your website in an Iphone, Ipad, desktop etc. CSS3 responsive web design also called RWD uses various techniques to manipulate the information on your screen to render differently for different devices. It is imperative that our website be mobile friendly.
In this video I show you a few techniques where you can build an HTML 5 website from scratch and use CSS3 responsive web design techniques to build a simple website.
We look at how it displays in Ipad resolutions, Iphone resolutions and desktop resolution.

We will demonstrate how to adapt our site to various resolutions using the CSS3 media queries.

We also look at an example, where we render an image differently for different resolutions. We will not be simply hiding/unhiding an image, but will use CSS3 @media queries to render the optimal size image for various resolutions. Thus we will keep our page weight light so that its optimized for bandwidth as well.

We will also have a brief look at the Navigation. We will look at how we can change navigation and display an hamburger button, when we enter lower resolutions.

I will demonstrate an end to end HTML5 website building from scratch and use CSS3 @media queries and introduce the concept of picturefill to display images and also build a basic navigation.