More CSS and Responsive Layouts!

I didn’t get a chance to write yesterday – I was continuing the HTML/CSS Skillshare course, and before I knew it, it was much later than I had planned to be up. I got through most of it, except the last bit on responsive design which I finished today.

A few things I learned:

  • Another selector! This time I learned about attribute selectors. You can, for example, look for all img elements with a specific title, and the style will only be applied to those! I didn’t realize you could get this level of specificity with selectors without having to create new classes or IDs, so this was pretty exciting.
  • I learned about the z-index. The z-index is the “depth” an element has on a page, and determines how elements layer if positioned next to each other. Elements are, by default, at a z-index of 0. If you give an element a higher z-index it will be positioned in front of an element with a lower z-index. Z-indexes can also be negative numbers.
  • I also learned that you can use image sprites to easily change an image when its state changes, by shifting the image using CSS.
  • I was also very excited to learn about media queries today. I have wondered for a while how to get the browser to recognize the size of the device you are using, and this is the solution! I’d like to practice more with responsive design. It seems like it could be a really fun and creative exercise.

Things that were good refreshers:

  • nth child in CSS. I had known about this, but hadn’t really used it before so it was nice to revisit. I also learned that you can specify odd/even for children, which is fantastic for alternating line colors in tables.
  • It was good to review clearing floats and the clearfix hack. This is something that’s not intuitive, and it was great to have the video walk through the various styling issues that can result from using floats, and what to do to work around each one. Previously I had been told to use clearfix and clear floats, but I didn’t really understand what each was doing. Clear:both (or left, or right, if you want to clear only one side) will prevent the content under the floats from pulling up in the layout. Using a clearfix in the parent of a float will prevent the parent from collapsing and will preserve the height.
  • I also reviewed positioning. Static positioning is the default positioning of an element. Relative positioning moves the element a specified number of pixels away from where the static position would be. Absolute positioning positions an element at a specified place in the window, but if the parent has relative positioning it will be at a specified place in the parent instead. Fixed positioning positions an element at a specified place in the window, and it will remain there when you scroll the page.

I didn’t finish the website that I was making as I was going through the HTML/CSS course, because it was taking up so much time and it was significantly slowing down my pre-work progress. My plan is to go back to it at a later point.

For now, I’m moving on to git! I know the basic commands, but I haven’t had experience with branches or reverting to older versions, so I’m looking forward to getting more comfortable with the rest of it! I’m starting it tonight, and tomorrow my goal is to finish the Git/Github section and get started on Ruby.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>