CSS - Styling Forms Part 2

Instructors: Jess, Carmen, and Eda

Styling Forms

Before this session, please:

• Try to complete as many steps as you can from Build a Game Settings Panel to cement your CSS understanding
• Complete Design a Feature Selection Page solo over the next few days
• Read Styling Forms Review and take notes
• Complete Styling Forms Quiz solo to test your knowledge of CSS and forms

During this session, we’ll:

• We’ll talk through key concepts and steps from Build a Game Settings Panel together
• We’ll look at Design a Feature Selection Page together to help prepare you to finish your features page lab on your own
• Review notes

After this session, please:

• Read Working with CSS Transforms, Overflow, and Filters: What Is Overflow in CSS, and How Does It Work? and take notes
• Read Working with CSS Transforms, Overflow, and Filters: What Is the CSS Transform Property, and How Does It Work? and take notes
• Read Working with CSS Transforms, Overflow, and Filters: What Is the CSS Box Model, and How Does It Work? and take notes
• Read Working with CSS Transforms, Overflow, and Filters: What Is Margin Collapsing, and How Does It Work? and take notes
• Read Working with CSS Transforms, Overflow, and Filters: What Is the Difference Between content-box and border-box? and take notes
• Read Working with CSS Transforms, Overflow, and Filters: What Is a CSS Reset, and What Are Some Common Examples? and take notes
• Read Working with CSS Transforms, Overflow, and Filters: What Is the CSS Filter Property, and What Are Common Examples? and take notes
• Complete all steps from Design a Rothko Painting solo over the next few days
• Complete Build a Confidential Email Page solo over the next few days
• Read CSS Layouts and Effects Review and take notes
• Complete CSS Layouts and Effects Quiz solo to test your knowledge of CSS layouts

Instructor notes

Build a Game Settings Panel

We’ll go through this workshop and practice styling checkboxes!

Design a Feature Selection Page

We’ll take a look at this exercise that goes over what we’ve learned so far.

Styling Forms Review

In this unit, we’ve learned a lot about styling forms!

Some of the concepts we’ve explored are:

• Best practices for styling inputs
• Using appearance: none for inputs for custom styles
• Common issues that arise when styling special input types such as datetime-local and color