HTML5 Projects: Personalized Ads

with Joseph Lowery
please wait ...
HTML5 Projects: Personalized Ads
Video duration: 0s 1h 11m Intermediate


Imagine gathering some simple information about your site visitors (like gender, age, and location) and having that change the advertisements shown on the page. In this installment of HTM5 Projects, discover how to combine advanced HTML5 form elements to gather personal details from visitors and create a better user experience. Author Joseph Lowery shows how to leverage local storage to save and retrieve customization parameters, and work with the Canvas element to create a personalized ad on the fly. HTML5 technologies covered include HTML5 form elements, HTML5 local storage, HTML5 Canvas, and the HTML5 classList tag, which change classes on page elements without JavaScript.

Business Web
HTML JavaScript CSS


Hi, I'm Jo Lowery, and I'd like to welcome you to HTML5 Projects: Personalized Ads. Website visitors are often bombarded with a blizzard of product offerings, many of which don't fit their lifestyle or situation. If you could narrow the options so folks would be more likely to take advantage of an advertised special, wouldn't you think it would increase sales? In this course, we're going to bring some advanced HTML5 technologies to bear and create personalized advertisements based on user responses to basic questions.

We'll save those preferences on their own system so anytime they visit the site, they'll see the offer created just for them. After you've had a chance to see what we're going to build, I'll explain the underlying technologies, including localStorage, the slider form element, canvas, and CSS3 transforms. Then we'll dig into the project itself. First, we'll set up the invitation which we'll make more tempting with a canvas-drawn text on one side and an easy to answer questionnaire complete with slider on the other.

To keep people intrigued, we'll set up a card flipping transition between the two sides. Next, we'll create the offer page that will use HTML5 localStorage to handle the custom advertisement. Finally, we'll modify the initial page so that the users see a custom reminder of their special offer, all done with HTML5 canvas feature, and we don't ask them to fill out a form they've already completed. So let's get rolling on HTML5 Projects: Personalized Ads.

There are currently no FAQs about HTML5 Projects: Personalized Ads.

please wait ...