Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Create a responsive photo grid with html5 and css3 to your Wishlist.

Add to Wishlist

Create a responsive photo grid with html5 and css3

Learn how to build a photogrid from scratch and enhance your portfolio
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
94 students enrolled
Last updated 12/2014
$10 $20 50% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 15 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

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.


- 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.

Who is the target audience?
  • If you are an artist; Painter, drawer, photographer, sculpter this course is made for you. you will learn how to display the pictures of your creations on your own template
Students Who Viewed This Course Also Viewed
What Will I Learn?
After this course you will be able to :
- Digitize your manual drawings or paintings
- Create well structured web pages with html and css
- Create a homepage with your nicer photo as a responsive background image
- Create a complete multi-columns responsive photogrid
Enhance your pictures with dedicated techniques (zoom, opacity, blur, maginfy..)
- Put all your content on a web server to display it on your own domain name
Enhance your pictures with dedicated techniques (zoom, opacity, blur, magnify)
View Curriculum
  • You can start with no web skill
Curriculum For This Course
Expand All 38 Lectures Collapse All 38 Lectures 02:44:44
4 Lectures 04:46

This video shows you with video captures what are the main parts of this course.

Preview 01:30

We will review all the needed tools to work in this course. Editing tools like Textwrangler and Browsers like chrome to execute the code.

Preview 01:26

Keyboard Shortcuts for Mac OS X
1 page

This will be you first webpage. It will display "hello world" on a web browser

Preview 01:50
The basics
5 Lectures 09:14

You will be able to create your firts html5 page with the right tags and syntax

Preview 02:54

Structure of a HTML5 Web page
1 page

This lecture explains how to code the source address of an image while it has differents folder locations.

Preview 02:09

What is css ? you will learn how to create a style and use it for a text legend and an image

Preview 04:11

Fisrt style with css
2 pages

What is the right css style ?
1 question

What is the result of the css code in bold ?
1 question
8 Lectures 34:57

Classes and ID's are css selectors. learn how to style a html tag

Class and ID'S

Margin and Padding Source code
5 pages

When placing differents elements on a web page, learn how to create space beetween them

Margin and Padding

Relative and Absolute Positionning

Div's in HTML5
3 pages

Div is like a box. Learn how to structure a web page with div's


Div's Source code
4 pages

Learn how to display lists of elements. Images may be listed as text. This lecture is important because we will use this css technique to display images on a grid further

Lists with UL and LI
Responsive Images
4 Lectures 14:28

Background image on the main page is a must have of the great web templates of today. Let's have a look on how to use them on your own.

Responsive scale background image

Responsive cropped background image

You will learn how to code a full width background responsive image. I show you a blended method with css only. We use image preloading and some css techniques.

Full Responsive background image

Responsive background image with media queries - Source code
3 pages
10 Great CSS picture Techniques
5 Lectures 16:25

Transparency and Opacity of images

CODE: Transparency and Opacity of images
1 page

Display text captions when hover the images

CODE: Caption text hover images
2 pages

How to display a text caption verticaly on the right ?
1 question
Create a complete Responsive Image Grid Using CSS
12 Lectures 41:54
Create a responsive container

CODE: Create a responsive container
2 pages

Creating the grid columns

CODE: Creating the grid columns
3 pages

Styling text over the pictures

CODE: Styling text over the pictures
3 pages

Create the media query for small devices: One column

CODE: Create media query for small devices: One column
4 pages

Create the media query for medium devices: Two columns

CODE: Create media query for medium devices: Two columns
4 pages

We have seen the creation of a Two and Three columns grid to display the pictures. How to display by code a Fourth columns grid ?

How to create a Fourth columns picture grid ?
1 question

Display text captions when hover the images

CODE: Display text captions when hover the images
5 pages
About the Instructor
3.9 Average rating
45 Reviews
439 Students
5 Courses
Web Developer and visual teacher

I'm Franck. I started working on web developpement in 1995 and as a freelancer in 2006 by building professionnal blogs with movabletype and now wordpress. I also work on creating audio and video content on the web, documentaries, voice over and storytelling webdocs.

I am both an artist and a technician. I'm passionate of painting and filming but my work is on the web.

Today a great part of my job is training for the web for multimedia journalism and i give courses in the field of digital production tools, video editing, web developpement and creating digital content.

I work on wordpress since several years and on Sony Vegas Pro, Final Cut Pro, storytelling with Klynt.

He discovered the Web in 1995 and became a webmaster. He is self-Employed since 2005 and began producing Professional Blogs.

He is interested in lending to the phenomenon of podcasting and wrote the first book in French on the subject published by Eyrolles French Editor in May 2006.

Since 2006 he is involved both in multimedia storytelling and web developpement focusing on multimedia.

Report Abuse