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
Instructed by Franck Du Mesnil Design / Web Design
25% off
Take This Course
  • Lectures 38
  • Length 3 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2014 English

Course Description

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.

What are the requirements?

  • You can start with no web skill

What am I going to get from this course?

  • 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)

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

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


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

Keyboard Shortcuts for Mac OS X
1 page

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

Section 2: The basics

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

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.


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

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
Section 3: CSS

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

Margin and Padding Source code
5 pages

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

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

Section 4: Responsive Images

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

Responsive background image with media queries - Source code
3 pages
Section 5: 10 Great CSS picture Techniques
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
Section 6: Create a complete Responsive Image Grid Using CSS
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
1 question

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 ?

Display text captions when hover the images
CODE: Display text captions when hover the images
5 pages

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Franck Du Mesnil, 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.

Ready to start learning?
Take This Course