preview

Mini-Class Report

Decent Essays
Open Document

This mini-class is going to expand a little on what you learned about floats in the RPGDU class and will be introducing more CSS transitions for you to use in your coding. In the last few classes you have been learning about absolute and relative positioning and while this is very useful, it means that elements basically ignore one another within their own structure. To have elements that are aware of each other, you need to learn to float them. Floating was covered on page 6 of the main class notes and while the concept is simple, learning to use it to your advantage is less so. While theory is good, learning how the interactions function on a practical basis is better so the project for this mini-class will give you an opportunity to practice. This class is also going to expand briefly on other pseudo-classes and elements and introduce the other things you can do to elements including filter, transform and translate them. We are also going to touch on browser compatibility. …show more content…

You are going to create a four-pane shipper template. Step one: Decide is if you want a grid, a horizontal line, or a vertical line of four. You are welcome to choose whatever you are most comfortable with. Once you know, create a parent element with your 4 child elements FLOATED within. Step two a: If you are confident in your abilities and you want to create an image with text on hover, you are welcome to do that. Add images elements to the four child elements and then separate elements that fade in on hover. (See Mini-class four for transition timing). Step two b: If you are not sure you could get that right, then make all four child elements overflow: auto, add a small image strip at the top, and then text beneath it. Step three: Add either the ::first-letter or ::first-line pseudo-element to your text elements and style

Get Access
Related
Get Access