2016
Udemy
Franck Du Mesnil
3:00
English

Create a responsive photo grid with html5 and css3
Learn how to build a photogrid from scratch and enhance your portfolio

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

Section 1: Introduction
Lecture 1
What does the course cover ?
01:30
Lecture 2
Tools used in the course
01:26
Lecture 3
Keyboard Shortcuts for Mac OS X
1 page
Lecture 4
Hello world
01:50
Section 2: The basics
Lecture 5
Create a html5 page
02:54
Lecture 6
Structure of a HTML5 Web page
1 page
Lecture 7
Folder structure of images
02:09
Lecture 8
Style a page with css3
04:11
Lecture 9
Fisrt style with css
2 pages
Test 1
What is the right css style ?
1 question
Test 2
What is the result of the css code in bold ?
1 question
Section 3: CSS
Lecture 10
Class and ID'S
05:02
Lecture 11
Margin and Padding Source code
5 pages
Lecture 12
Margin and Padding
05:41
Lecture 13
Relative and Absolute Positionning
05:54
Lecture 14
Div''s in HTML5
3 pages
Lecture 15
Divs
16:19
Lecture 16
Div's Source code
4 pages
Lecture 17
Lists with UL and LI
02:01
Section 4: Responsive Images
Lecture 18
Background image scale Responsive
03:02
Lecture 19
Cropped background image Responsive
01:08
Lecture 20
Full Responsive background image
10:18
Lecture 21
Responsive background image with media queries - Source code
3 pages
Section 5: picture 10 Great CSS Techniques
Lecture 22
Z-index
04:54
Lecture 23
Transparency and Opacity of images
04:19
Lecture 24
CODE: Transparency and Opacity of images
1 page
Lecture 25
Display text captions when hover the images
07:12
Lecture 26
CODE: Caption text hover images
2 pages
Test 3
How to display a caption text verticaly on the right ?
1 question
Section 6: Create a complete Responsive Image Grid Using CSS
Lecture 27
Create a responsive container
10:10
Lecture 28
CODE: Create a responsive container
2 pages
Lecture 29
Creating the grid columns
09:49
Lecture 30
CODE: Creating the grid columns
3 pages
Lecture 31
Styling text over the pictures
05:06
Lecture 32
CODE: Styling text over the pictures
3 pages
Lecture 33
Create the media query for small devices: One column
04:02
Lecture 34
CODE: Create media query for small devices: One column
4 pages
Lecture 35
Create the media query for medium devices: Two columns
04:19
Lecture 36
CODE: Create media query for medium devices: Two columns
4 pages
Test 4
How to create a Fourth columns of picture grid ?
1 question
Lecture 37
Display text captions when hover the images
08:28
Lecture 38
CODE: Display text captions when hover the images
5 pages

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.

udemy.com/coding-for-artists

Download File Size:454.4 MB

---