My assessment project code link: https://github.com/Zheng7426/MDN-Doc-Practice/blob/main/css/mobile_first_layout/rwd_task.html
The end result is shown below:
(Mobile screen width)
(Desktop screen width)
Initially I was trying to avoid writing media query. But in the end I thought only using Grid layout would not let me push down the sidebar when the screen size is small. Thus, I wrote one media query to change the element to grid under desktop screen width.
If you have any suggestions please share them! Thank you.