Today’s Progress
Today’s lesson continues to look at floating. It particularly looks at document flow and how it works with floating. The lesson begins with two videos.
One goes over document flow while the other gets in floating. The second video talks about two new CSS properties developers can use to help them float elements on a website. Skillcrush defines document flow as a system that tells people how to arrange and position elements on the document.
The default document flow keeps inline elements inline and block elements will stack on top of each other. It directs where elements are aligned and in what order they appear in HTML. Floating is one of the ways you can interrupt document flow to get elements lined up next to each other.
However, if you aren’t careful it can cause problems. CSS has properties that can help you fix any floating issues. One of the new CSS properties is the clear property.
The clear property watches the flow of elements on a website and can tell elements to move below (i.e. clear) other elements. Just add the clear property and set the value to both to this. The second property is overflow.
Overflow has been talked about in past lessons, but in today’s lesson, Skillcrush focuses on the auto value for this property. When developers use the auto value, it helps the browser decide how much background to add to a parent container using the size of the child elements. Developers like using the auto value because it can change the amount and size of floated elements very easily.
Just add the overflow property to the parent element and set the value to auto. The parent’s elements height will automatically adjust to include the child elements. Another property developers can use is the box-sizing property.
The box-sizing property figures out the width and height of the calculated elements. The border-box value will include the content, padding, and border for the width and height of a component. That means CSS subtracts border and padding from the width and height that is being set.
This means you can modify the border and padding of an element without having to change the width or height. So basically the browser is doing the work for you.
Quiz and Coding Activities
The quiz was a little tougher today. Mostly because my vision was blurry so items were harder to see on my computer today. I missed one of the drag-and-drop questions.
I switched the border-box and padding for one of the questions. Then I put the wrong value for the box-sizing property. I took my time on the coding activities for the same reason.
I was able to accomplish the objectives of each activity and attempted the bonus challenges. I used my CSS cheat sheet a lot more today to help with all the activities and make sure I can use the right values with the right properties. Although I made simple mistakes, I understood the errors I was making and needed to be careful reading my code.
Tomorrow’s Plan
The next lesson is about HTML and CSS best practices. This lesson will share what the best standards in HTML and CSS are. New developers learn tricks and tips to make sure their code matches these standards.
At this moment, you know enough about HTML and CSS to start building projects. So tomorrow’s lesson will start moving into building websites using what you have learned so far. If you need more of a review or just want more practice, head over to my Skillcrush 101 series to get more in-depth reviews.
This post was written on December 21, 2024 during the 2024 holiday break.
Top comments (0)