Responsive interactive component with no flex/grid

Community feedback

• 

  Aaron Varga•370

  @avinnoPosted about 1 year ago

  Hey, nice job! I think it is interesting to try things like this without the quick and modern go-to approach such as grid or flexbox.

  I remember when I first started learning HTML/CSS back in 2002, flexbox and grid did not exist yet. We used floats and other ways to establish layouts. We had to. So it is cool to see someone try a challenge without grid and flexbox.

  I am curious and wanted to ask what your reason was for doing it without grid or flexbox? If there was a reason in particular, or maybe you just wanted to do it to do it.

  Also, I would challenge you to vertically center your article(s)! While it's not necessary, that was often a somewhat tricky thing to do before grid and flexbox existed, for me personally anyways. At least it was not always a straight forward thing to tackle depending on your layout, etc. With grid and flexbox, it is pretty automatic on how to center vertically and horizontally. But maybe you purposely just did not center it. Regardless, I like it!

  Thank you and nice job!

  Marked as helpful

  1

  ---

  

  Lamar•515

  @EverezzePosted about 1 year ago

  Hi Aaron, first thanks a lot for the feedback I appreciate it!

  I actually have chosen to do it without modern layout solutions because it's been a month or two now where I'm trying to have a deeper understanding of CSS and its behaviour, It's been quite fun and hard at the same time but I can see a vast improvment (in the way I'm building websites) as I'm more and more comfortable with it.

  That was the first motive for doing this challenge this way, and one of the benefit doing it this way is to realize how much your html structure changes depending on the solution you adopt which is quite interesting as I would normally just throw in there some flexbox and grid techniques but we can actually reduce the amount of code if we know a little bit more about CSS (display and box generation for example) and the browser (adding some defaults to elements).

  For why I didn't vertically center them It's because when doing challenges I'm imagining them in a website where above and below them there are other elements that would fill them empty spaces so I'm not bothering so much with this, but now that you raised the question I would do it by relatively positioning the article with respect to the body and offset it(top&left and then a translate to get the center of the element right in the center of the body) and of course set the height of the body to the viewport, that would do it I think.

  Anyway thanks again for the review, If you liked it I invite you to stay tuned because I got 2 projects done that really shows up how to place elements responsively without flex,grid. This one was easier as there are no other elements next to it,etc.

  NOTE: I intend to do most of the projects this way to just increase the difficulty and learn even more about CSS. I might re-do some of them with flex/grid as another solution but for now I'll stick to this way.

  1

  

  Aaron Varga•370

  @avinnoPosted about 1 year ago

  @Everezze I love it! Thank you for your insight! I agree with you. I look forward to seeing more of your solutions. You have inspired me to refresh my pre-grid/flexbox layout days 😉 great stuff!

  1