Today I didn't get much done, but I was able to spend some time studying a bit at least.
I really want to make a responsive UI for Rock Paper Scissors because I want to learn and I am a fan of responsive design. I also happened to see [a tweet from Shashi (https://twitter.com/shashiwhocodes/status/1486789899399446535)
regarding using max-width vs width for a responsive web development. I'm hoping to try it out for my UI.
Next, I was feeling a bit uncertain about how I laid out my HTML and CSS so I asked my friend, Dwayne,for some feedback so he suggested using grid after seeing what I had. So this lead me to watching Traversy Media, CSS Grid Layout Crash Course.
CSS Grid Crash Course
Flexbox is 1 dimensional while Grid is 2 dimensional.
"The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time."
Normally for rows and columns, the preferable units to use is fractions, or fr, over percent because of padding and margin.
Resources
The Odin Project
Revisiting Rock Paper Scissors
https://www.youtube.com/watch?v=jV8B24rSN5o&ab_channel=TraversyMedia
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
Top comments (0)