Designing Modern Forms for the Web

In this course, you will gain a solid understanding of how to implement modern HTML forms. Software required: Sublime Text 2, Adobe Photoshop CC 2014.
Course info
Rating
(40)
Level
Advanced
Updated
Jul 8, 2015
Duration
1h 42m
Table of contents
Description
Course info
Rating
(40)
Level
Advanced
Updated
Jul 8, 2015
Duration
1h 42m
Description

In this course, you will gain a solid understanding of how to implement modern HTML forms. We will first spend a few lessons exploring HTML5 form attributes and elements, while viewing these results in the browser. Then we will step into Adobe Photoshop to design a mockup of a modern form sequence. After that, we will spend several lessons making it a reality in the browser by focusing on HTML, responsive CSS, CSS animations and jQuery. Software required: Sublime Text 2, Adobe Photoshop CC 2014.

About the author
About the author

Gary Simon has worked exclusively as a freelance designer and design instructor for over 15 years.

More from the author
Building Layouts with the CSS Grid
Beginner
1h 17m
Mar 2, 2018
Building Websites with Bulma
Intermediate
1h 42m
Oct 27, 2017
Building Websites with Skeleton CSS
Intermediate
1h 17m
Aug 9, 2017
More courses by Gary Simon
Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hi everyone, my name is Gary Simon, and I've been a freelance designer for the last 15 years, and have had the privilege of working with literally over 1, 000 clients on a wide variety of projects. In this course, we're going to explore the wonderful world of HTML forms. Understanding modern form techniques is absolutely crucial as a designer. If you need input from a visitor, then it's your job as a designer to maximize the user experience through proper form design. Initially, we're going to spend a few lessons doing a quick overview of HTML5 form attributes and fill types. Then we're going to design a mock-up in Adobe photoshop of a form sequence and write HTML and CSS to make it a reality in the browser. Then we're going to make it function with form validation, jQuery, and even CSS animations. Some of the key takeaways from watching this course include learning the latest HTML5 form techniques, developing mock-ups in Photoshop based on a grid, making responsive forms, utilizing CSS animations for transitions, and form validation techniques. By the end of this training, you will have learned how to design and build a modern form sequence based on HTML5. I'm excited to share these techniques with you, so let's get started with the first lesson.