CSS: Forms and Image Galleries

Name: CSS: Forms and Image Galleries
Author: Cliff Brozo

How to maximize user interest and ease of use.

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

(upbeat music) Welcome back to KnowledgeCity's course on Cascading Style Sheets. I'm Cliff Brozo, I'm your professor. Today, we're going to look at forms and how to apply CSS styles for a whole lot of things that you find in your average form. First, we'll look at the standard text input. Now, it could be a regular box, or it could be stylized with some 3D effects. We'll look into drop down list boxes, where once again, it could be a straight list of items or it could be stylized. We'll look at putting a calendar on our screen, and how we can stylize the calendars to make them look a lot nicer. We'll do something different with your average check box, maybe turn it into stars instead of boxes. We'll examine what happens when you hover over an item, how it can change colors, and we'll deal with the opacity factor. We'll look at some user interface features, where if I hover over an item, it might get bigger. It might change color. It might give me some information, or it might even not let me type anything in. Finally, we'll look at some responsive design, where we examine what device is looking at our page and act accordingly. I can do that with multiple style sheets, or I can do it with a media screen query, and change what you see based on how wide your device is. Let's take a look at these forms. As we've done in the past, Atom is our design software of choice, and what you see is a stylized form featuring some of the things that we just looked at. The HTML has a link to my Forms CSS page. I only have one, a little logo, and obviously you remember from your HTML knowledge that forms need some sort of action to make something happen to the data once it's typed in. I've created a table to line up all of my items and make them look more orderly, and for each of the table data, I've applied a class called bigger. And what that does is when you hover over an item, I have that item grow a bit, and I've applied that class called bigger on every single table cell. Let's move down our HTML. In order to enter States, we have a dropdown list box, which has every state available to it. When I click on the item, all of the states are listed along with a scroll bar. Those are easily available on the web, so you don't have to do all that typing. It especially comes in handy if you're putting in country codes. Moving down our list of form items, I've got a date feature, where I can select a date. When I call on the calendar, up pops the items, but you'll notice that there is a red circle on the screen, and that's telling me that I'm not allowed to type into that. I have the same item for State. I don't want people typing in that area, and we'll see how we can control that in our CSS code. The actual calendar is built right into HTML. I've got normal check boxes for a type of animal that you prefer, and a submit button that would grow when you hover over it. Moving down the page, I've got an area where you can type in some comments, and your comments are stored in this text area, along with scroll bars that allows you to move left and right as well as up and down. A different way of asking people for input is to choose stars. I Love This Class. Yes, it's okay, I like it, and hopefully you'll choose It's awesome. And all I've done is in CSS, I've changed the stars that are appearing. One of the issues that I use is opacity, where when I hover over a button, and I've made this button really big, the color changes to a darker green. Finally, around a button, and I could have put this around any of the objects, I've got some shadowing, which we've done in the past.

Intermediate Provider : Cliff Brozo 4 Lessons · 25m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

In this course, you’ll learn to create forms and style them to generate user interest and ease of use. You’ll also examine different progress bars and how sliders can show users where they are on a page. You’ll also learn to create an image gallery to display photographs in a visually appealing format for users, whether they’re on a desktop, tablet, or phone. Finally, you’ll see how to make adjustments in CSS without making changes to your website.

What You'll Learn

Create and style CSS forms for user interest and ease of use
Design forms with attention to user accessibility
Build image galleries that display photographs across desktop, tablet, and phone
Utilize sliders and progress bars to show users where they are on a page
Understand the visual components of CSS
Make adjustments in CSS without changing your website

Key Takeaways

CSS can be used to create and style forms that generate user interest and ease of use.
Different progress bars and sliders can show users where they are on a page.
Image galleries can display photographs in a visually appealing format across desktop, tablet, and phone.
CSS allows you to make adjustments without making changes to your website.

Frequently Asked Questions

What will I learn in this course?

You will learn to create and style forms for user interest and ease of use, examine progress bars and sliders that show users where they are on a page, create image galleries to display photographs on desktop, tablet, or phone, and make adjustments in CSS without changing your website.

What topics does this course cover?

The course covers forms across two lessons (Forms Part 1 and Forms Part 2) and image galleries across two lessons (Image Galleries Part 1 and Image Galleries Part 2).

What skills does this course help me build?

This course builds skills in CSS Codes, CSS Frameworks, Design Web Format, Form Layout, Object Oriented CSS, and Web UI Design.

Will the image galleries work on different devices?

Yes. You will learn to create an image gallery that displays photographs in a visually appealing format whether users are on a desktop, tablet, or phone.