HTML/CSS Assessment Question on Grid Layout and CSS Elements

Help / Questions Learning Challenge Questions
#1

Learning Challenge

HTML/CSS Assessment

Question

  1. When they ask for a grid layout for 600px or greater, I’ve seen some forms where it’s like a flexbox layout which is what I feel I have (a stack of rows) and I’ve seen some that have a grid layout where you have rows and columns eg Name and Biography would be in the first column and Email and Biography would be in the second column. Is it safe to assume that the assessment is asker for the latter and not the former?

  2. I’ve found lots off use CSS elements in MDN web docs. I actually formatted and styled the form using most of what I got out of the lecture readings and videos. I’m noticing that the CSS elements on MDN web docs are easier to use such as .grid, .card, .container etc. I did not use any of these in my CSS but my outcome seems pretty similar to what’s being asked for. Should I go ahead and rewrite everything with the elements I’ve found in MDN web docs?

#2

  1. Not sure what you mean by your question. Can you give more context?

  2. No need to rewrite everything. You should use the things you find and read as building blocks to give you a better understanding of CSS and improve on your style when writing css. I’d say apply what you learned the next time you’re writing more CSS :smiley:

#3

Thanks for your response. Let me give you an example for question number 1.

Below the first screenshot will be what I’m getting with my code which I feel is what they call a flexbox layout. In the second shot I’ll include a picture of what another person in the forums did which I feel is a grid layout. Do I go with the layout I already have (screenshot 1) or with the grid layout (screenshot 2)?

image
image1877×997 238 KB

image

#4

Actually I fixed the first screenshot so it doesn’t stretch across the whole screen.

image
image1475×626 48.8 KB

1 Like
#5

For all intent and purposes, if the assignment asks for a flex layout, I’d say use it. Each layout has its purpose despite some people having preferences over the other. It all comes down to what you’re trying to produce. For example, it’s easier (in my opinion) to create a responsive webpage using flex and an ecommerce site using grid.

The magic behind this is that you can combine both to make a powerful layout. To get a better understanding of each, I recommend checking out flex froggy and grid garden. Although they are games, they will deepen your understanding of the two. Hope it helps!

1 Like