Today's Progress
Today's lesson is about layouts and floats. Adda starts this lesson with only one video today to show page layouts. The key note to remember is that developers need to think about how information needs to be organized before they do any coding.
There are many different layouts developers use, but common ones are:
- one page
- two page
- three page
- gridded layouts (think of a photo gallery website or Pinterest as examples)
- masonry layouts (news websites love these layouts.
I've seen some developers use this layout for their portfolio sites)
To create these layouts, Skillcrush identifies 3 techniques developers use. One is floats. Floating is how to position elements in a row. Floating can be tricky. It was for me when I was getting started but it is a good place for new developers to start.
Next is Flexbox. Flexbox is defined as "system" that lets developers create rows or columns inside a container to make layouts. Flexbox is good for intermediate coders. I have used Flexbox a little bit throughout my coding journey, but it is something I need to learn more about and play around with.
The advanced option is CSS Grid. CSS Grid lets developers create both rows and columns in a container. Once you feel very confident with CSS, this is another system to try out. I have used CSS Grid a little bit in projects, but I need practice using this system without the help of a tutorial.
This lesson focuses on floating so it is time for the second video. Adda returns to demonstrate how to use the float property in code. The float property is another CSS property you can use to position elements in a container.
The default value for float is none, but you can also set the value to left, right, or inherit. The inherit value means that it will use the float value of the parent element for any children elements. For example, take a look at this code:
div {
text-align: center;
width: 400px;
height: 500px;
float: left;
}
main {
background: #6cd092;
height: 200px;
width: 200px;
float: inherit;
}
aside {
background: #80b4d1;
height: 200px;
width: 200px;
float: inherit;
}
We could just float the main and aside selectors separately. However, Skillcrush uses the inherit value. These are children of the div tag.
So they inherited the left value from the div tag to use. If Skillcrush wanted to change that float value for the div tag, it would also change the values for any of its children. As you create layouts, keep the box model in mind because it will help you figure out the right position.
This might be reducing the width of the child elements by 20px or adjusting the space between elements with the margin-right property to one of the elements before adjusting the width of one of the elements. It depends on what layout you are using. Either way, you will want to take time to do some calculators to get the spacing just right.
Skillcrush shares a great tip for new developers on how to debug their floats. The secret is to use the outline property for individual elements or set the universal selector (*). This way you can see the box content without worrying about changing the container's size.
Quiz and Coding Activities
Only missed two questions on today's quiz. I put margin instead of margin-right for one of the fill-in-the-blank questions. In the last question, I only found 3 errors instead of 4.
Scanning makes the typo questions rather tough so I need to slow down more. There were two coding activities today. My pixels weren't the same as the solution code, but I got extra practice using the techniques Skillcrush discussed in the lesson. During the last activity, I played around the width of the column layouts a bit to see how it works with creating layouts.
Tomorrow's Plan
Floating might still be a little tough so Skillcrush has another lesson ready to go tomorrow. This one is about document flow and floating. It means diving deeper into how the document flow works and how floating can help. Then students get more practice using the float property.
The holidays are coming so tomorrow's post will be the last post for 2024. Then I'll be taking a break for the holidays. I'll still write posts when I can during the break and get them ready to publish after New Year's.
Top comments (0)