Create a responsive photo grid with html5 and css3

Course details

The Goal of this course is to learn how to use dedicated picture techniques with html, css and javascript to enhance photos and pictures on the web.

These techniques are focused on the needs of painters, artists and photographers who need to personnalize the display of their pictures on the web without installing any gallery template but learn how to do it themselves with a few simple webpages.

IN THIS COURSE, YOU WILL LEARN HOWTO:

- Create responsive photo grids to show a collection or an event gallery.

- Blur photos to reduce theft or to hide logos or persons in photojournalism.

- Zoom and magnify pictures to get details on painting techniques.

- Play with transparency and Opacity to make enhance each photo at a time.

- Create text captions when hover on pictures to display additionnal information (camera, date, author, price..) like in flickr.

- Display different image resolutions in terms of devices.

- Prevent from downloading pictures.

- Adding links and buttons on overlay to send users to sell page.

And much more specific image techniques to come ;)

....

This course starts with the technical basics of html and css coding and goes ahead with the creation of a complete responsive image grid portfolio from scratch.

Then you will learn some javascript simple techniques to use dedicated libraries like magnify dot js for example.

At last we will make all this alive on the web but putting the content on a webserver dedicated to this course.