Object-fit will specify how an img or object will deal with the available space.
Common options include
cover
contain
none
fill
Object-position is similar like background-position but for foreground objects.
Use this with object-fit to specify what area of the image that will be focused on. Useful if your image has been adjusted to maintain it's aspect ratio but default displays in a suboptimal spot
Topic 2: CSS Grid
Position items in a grid container with:
justify-items:
align-items:
place-items is like declaring justify-items and align-items at the same time
Set the columns and rows of a grid item
grid-column:
Set the column that an item starts at
1 / -1 syntax, span 2 syntax, 2 syntax
grid-row
Same as column but rows
Note that when it comes to images and images in containers in grid layouts, nesting is very important and how you set your widths and heights will effect how things display a lot. You will likely have to make different design choices to get things to look and operate in the best way for the situation
Topic 2: Create Accessible, Inclusive, and Meaningful Web Forms
Creating Good Forms - Some Guiding Questions
Forms are very intention specific, and more questions means more work for your user. Consider these questions when writing forms
For whom's benefit is the form?
ie: Optimizing a user's experience with tailored content, providng ways for users to express themself.
ie: Gathering user data in order to conduct research for app improvement
Is the data that your asking for necessary?
ie: is it legally required? will it be used for password recovery?
At what point will the user be filling this out?
ie: Do they have to sign in in order to access the main content?
ie: Is it going to be something they do at say checkout?
Is it a user survey?
What benefit is it to the user to do this?
Activity: Plan a User Form
Can be about anything
Try to use multiple select, radio buttons, text input, date input, and email input
Dropdown select menus are good to try to use as well
This form should be a bit longer. Try to kep to best practices as dicussed, but also try to use as many types of data as you can.
Wireframe a form
Draft content text (questions and answers)
Look up types of input syntax that you will possibly use for this, take note of all the syntax
If you want an extra challenge in the afternoon. Try to write out all the html code with only your notes and wireframe
Terminology
form
Forms are one of the most used ways for a user to interact with a website. They can be used to GET data or POST data.
GET and POST methods will be covered later in this course. Here we are just creating the forms frontend label
: every input needs a label to describe it. input
: a field that users can interact with. There are many types that can be learned about here
The main ones you'll likely use are - text - checkbox - radio - email - datetime
textarea
an input text box, this is like the text input but it provides the user a larger writing space than the single line that text provides
fieldset
group multiple related inputs together. It will draw a box around the inputs by default
legend
used to define a fieldset. This is especially important for screen readers.
button
Forms and input types need a way to submit requests to the server. This is normally done with a button tag
