One new thing to learn this week - advanced CSS
A lot can be done with just basic CSS to make a web site or app pretty and colourful, but you might have a specific layout in mind or would like your web site or app to have a specific layout when viewed on desktop browsers and another on mobile browsers. Maybe you’d also like to have a bit of animation but don’t want to add a Javascript library just for that. CSS can handle animations too.
Two popular ways to lay out a web site or app using CSS is with flexboxes or CSS grids. With flexboxes, items stretch/shrink to fill the available space (hence the “flex” in the name). Grids provide uniformity and you can control how much space the rows and columns in a layout take up. Flexbox Froggy and CSS Grid Garden are fun ways to learn about them.
With the help of media queries, you can control what layout is displayed on a desktop browser and a mobile browser by selectively applying CSS based on a set of criteria(s), usually viewport dimensions. These are called breakpoints. Responsive web design is a popular approach that makes use of these media query breakpoints alongside relative sizing units.
CSS can also handle animations with transitions like for button hover state animations. This is done by specifying the property to transition, the duration, the timing function which takes care of the speed/way the transition happens. You can also specify a delay before a transition starts.
Three questions to ponder
- When would it be ideal to use CSS grids vs flexboxes for a layout?
- Is there a way to implement responsive images that doesn’t involve just scaling down an image based on a set of breakpoints?
- Why is it better to use CSS for simple animations?
Kimmi Gan
Kimmi Gan is a self confessed girl geek who enjoys learning about what’s new in the world of front end development to enable her to build web apps, sites and the occasional data visualisation or CSS art.
Join our slack channel: https://join.slack.com/t/womenwhocodefrontend/shared_invite/zt-gaic5y90-pDJK4H_NbObZ_MU_rcYc0A
Find us on social media