I was unsure of when to use flexbox or grid. I tend to use the former. Any suggestions on which would have been best here?
I also avoided using em as I did not want any recursive scaling. What are examples of em use vs rem?
I was unsure of when to use flexbox or grid. I tend to use the former. Any suggestions on which would have been best here?
I also avoided using em as I did not want any recursive scaling. What are examples of em use vs rem?
I think flexbox will work just fine for this project.
Flexbox is best suitable for one-dimensional layouts, like a navigation menu or a gallery of images where the layout needs to adjust from desktop to mobile view.
Grid, on the other hand, is a two-dimensional layout module that allows devs to place content in rows and columns. It is best suited for creating complex, multi-dimensional layouts and it enables a precise and consistent layout with rows, columns, and spaces to position and align items better. Both can be used together but ideally Grid should be used for the layout and flexbox can be used for alignment
And REM is relative unit of measurement used to adjust the size of an element based on the ROOT HTML font size, While EM, on the other hand, is a relative unit of measurement used to adjust the size of an element based on the size of its parent. However, REM is usually preferred over EM because it's easier to maintain .
I hope I’m able to help you understand few things.
I have questions about how to make content responsive for mobile.
First and foremost, create external file for your CSS and link it the the head section of your html using the <link tag>
Example: if you save your external css file as “style.css” then in the head section of your HTML, link your external style sheet with the below tag
<link rel=“styleshert” href =“style.css”> Then you have successfully linked your css file to your html. This makes it easier to maintain your webpage as it scales larger. Bugs can be easily detected and fixed too.Now back to you question about media queries.. Media queries are used to change the css property or layout of a page depending on the screen size. You have to learn the various breakpoints for all devices.
The best way to learn is by watching tutorial videos on YouTube and make notes. (I strongly recommend Kevin Powell YouTube channel) and or register for a css media query course on Coursera.
Dedicate a few days to learn media query and you won’t regret the decision.