4h 1m – Beginner
This course covers CSS best practices and techniques for styling and structuring forms. Author Ray Villalobos explains how forms work, best practices for structuring HTML, new additions to forms in HTML5, and how to style individual elements. The course discusses how to use CSS to style traditional and custom elements and reviews browser discrepancies, custom elements, and custom fonts and how to style for different types of user feedback. Advanced CSS layouts and design patterns and issues specific to styling for handhelds are also covered.
Topics include:
Creating forms with the
element
Adding labels and basic usability features
Navigating elements between browsers
Styling the background
Creating input and button fields
Working with select fields
Floating and positioning grouped elements
Using HTML5 input types
Resizing elements and adjusting the view for mobile devices
Adding jQuery navigation
Designing validation feedback
Introduction – 6m 47s
Welcome – 42s
What you should know before watching this course – 33s
Using the exercise files – 49s
Setting up the working environment – 4m 43s
1. Understanding Form Structure – 18m 29s
Creating a form with the form element – 5m 29s
Adding labels and basic usability to your forms – 4m 59s
Normalizing form elements between browsers – 8m 1s
2. Styling Basic Elements – 1h 20m
Creating a background with textured gradients – 8m 41s
Using a seamless background with radial glow – 6m 23s
Using custom fonts – 9m 32s
Creating custom input and buttons fields with CSS3 PIE – 14m 55s
Working with text fields – 12m 21s
Designing labels – 9m 53s
Custom radio and check box styles – 13m 11s
Working with select fields – 5m 50s
3. Laying out Forms – 48m 47s
Floating fields – 7m 23s
Organizing forms with lists – 10m 3s
Grouping elements – 12m 26s
Floating groups – 5m 36s
Positioning groups – 13m 19s
4. Using HTML5 Additions – 11m 33s
Exploring new input types – 4m 32s
Working with new attributes – 7m 1s
5. Styling for Handhelds – 29m 44s
Creating a responsive form – 13m 25s
Adjusting the viewport – 4m 36s
Using media queries – 7m 13s
Resizing elements – 4m 30s
6. Advanced Design Patterns – 44m 15s
Styling for progressions – 10m 20s
Visualizing navigation – 11m 3s
Adding jQuery navigation – 13m 20s
Designing validation feedback – 9m 32s
Additional Resources – 1m 12s
Next steps – 1m 12s