Today's Progress
Today's lesson opens with two videos. One video features Adda explaining width and height while the second video has her describing the difference between margin and padding. Size and dimensions were a tough lesson for me when I started learning how to code back in 2015 so don't worry to any new developers struggling with this topic today.
To help explain these brand new CSS properties, Adda talks about the CSS box model and what elements can be found in this model. I already wrote about the box model in my Skillcrush 101 series so if you want to learn more head over to that post to see the box model graphic and learn more about these elements. Once comfortable with the box model, you can start playing around with the CSS properties.
You can use pixels (px) or em in all today's properties to set the size. I often use px in my posts so it is easier for new developers to understand. However, I've seen a lot more developers use em in their code so don't be afraid to try em in your projects.
Be careful setting the width and height properties of an element. Using both properties can result in overflow if the content is longer than the height size. Skillcrush advises students to remove the height property to let the container automatically resize itself or they can use the overflow property.
Scroll bars are rather tricky for me these days since they can be harder for me to see on websites. So new developers might want to be careful in creating a scroll bar with the overflow property. Skillcrush reminds students not to confuse line height and padding.
The line height amount of an element (i.e. headlines or p tags) is proportional to font size. That means larger text's line height will be greater than for smaller text. There are a couple of different ways to write the padding and margin values for these properties.
One you can customize specific sides using top, right, bottom, and left. For example, you can change the padding on the top of your container using padding-top or using margin-bottom property to adjust the margin at the bottom. The other is writing all the values on one line.
The secret is to put the values in clockwise order (top, right, bottom, left) so the sizes are for the right sides. If you are just starting to code, you will want to stick to writing each padding side for now. Then once you feel comfortable try writing out all the values on one line.
Quiz and Coding Activities
I did ok on today's quiz. I mostly made silly errors by forgetting the px value on the width property for one of the fill-in-the-blank questions putting the padding values in another question. There were three coding activities today.
These activities give students a chance to practice using all the new CSS properties in code. I was able to complete all these activities with no issues. It still takes me a while to read through some of the instructions and double-check my code, but I made sure to check the solution code and I had the right CSS properties with the right selectors.
In the last activity, Skillcruch uses the universal selector(*) in the style sheet. This selector targets all the elements at the same time. Skillcrush uses a dotted outline to help students see an element's margin and padding.
The universal selector helps with debugging so it doesn't add width or height to your elements. That way it doesn't impact your design. Once you are done with your code, developers can delete or comment out the universal selector.
Tomorrow's Plan
Tomorrow's topic is classes and ids. Skillcrush will explain why developers need classes and ids in code as well as how to add them to your code. New developers might want to use this time to brush up on HTML if you are following along with this series since HTML tags work well with classes and ids. Feel free to head over to my Skillcrush 101 series to review all the HTML concepts I've talked about so far.
Top comments (0)