Start learning with our library of video tutorials taught by experts. Get started
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.