Day 3

Completed the Responsive Web Design Challenges and working through the CSS Flexbox Challenges on FreeCodeCamp.

Today I am working through some code challenges on FreeCodeCamp. Both sets are related to making websites responsive to different screen sizes and resolutions. A lot of these areas I have come across through my Treehouse courses on Responsive Designs, so it has been a really good refresher on what I have learned previously (as that was a while ago now!).

For example – Add a media query, so that the ptag has a font-sizeof 10px when the device’s height is less than or equal to 800px:

A screenshot of my Media Query code, from FreeCodeCamp

New things I’ve learned:

  • Previously I have always used em or px to size text. The fourth Responsive Web Design challenge introduced the concept of using viewport units for responsive typography. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.
    • vw: 10vwwould be 10% of the viewport’s width.
    • vh: 10vhwould be 10% of the viewport’s height.
    • vmin: 10vminwould be 10% of the viewport’s smaller dimension.
    • vmax: 10vmaxwould be 10% of the viewport’s bigger dimension (height vs. width).

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.