"Fundamental Layout Comprehension" assessment

MDN Learn
#1

This thread is to ask for help with, or marking for, the “Fundamental Layout Comprehension” assessment.

1 Like
#2

Hi there!

Could you please share the finished CSS example for this exercise? Thanks!

Below is my CSS. The result looks pretty much the same as in your image, but I’m not sure if I used the most efficient techniques.

Interesting that in my final version with line-based placement, the text in the “article” was overlapping with images in “aside” (running behind them) until I put “width: 100%;” in there. It was pure guess and I have no idea why it helped and why it went wrong in the first place. Could you please advice on the correct solution?

For .grid, I also tried to use “grid-template-areas”, but the columns overlapped:

  .grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
    display: grid;
    grid-template-areas: 
      "article aside"
    grid-template-columns: 4fr 1fr;
    grid-gap: 20px;
   }

  article {
    grid-area: article;
  }
  
  aside {
    grid-area: aside;
  }

Final version:

    body {
    background-color: #fff;
    color: #333;
    margin: 0;
    font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
  }

  img {
      max-width: 100%;
      display: block;
  }
  
  .logo {
    font-size: 200%;
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 980px;
  }
  
  .grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
    display: grid;
    grid-gap: 20px;
  }

  article {
    grid-column: 1 / 5;
    grid-row: 1;
    width: 100%;
  }
  
  aside {
    grid-column: 5;
    grid-row: 1;
    width: 100%;
  }

  nav {
    background-color: #000;
    padding: .5em;
    position: sticky;
    top: 10px;
  }
  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  
  nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
  }
  
  .photos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 1px;
  }

  .feature {
      width: 200px;
  }

  article img {
    float: left;
    margin-right: 1em;
  }

Thank you!

1 Like
#3

By the way, the link in the Fundamental Layout Comprehension article leads to “Fundamental CSS comprehension” thread, not this one. :slight_smile:

#4

Hi there @kabeiro; congratulations on finishing the exercise!

Here is our version of the code for you to check out:

You shouldn’t need to use those. In fact, I just tried your CSS and then removed the width: 100% declarations, and it didn’t seem to make any difference. So something else must have been causing the problem.

I also tried that version of your grid CSS, and it seemed to work OK (not identically, but fine)

#5

Thanks for the reply!

You were right, it works fine without “width: 100%”. :thinking:

I have also figured out what went wrong with “grid-template-areas” - I forgot semicolon after one of the lines. :woman_facepalming: Now it is also okay.

Your version of the code is so much less complicated! I’d definitely need to read that module again. :smiley:

#6

I don’t undestand what this declaration mean for images

img {
display: block;
max-width: 100%;
}

Please can you Help me

#7

@kebabtop1 so this pattern is a nice bit of code for making images responsive.

Normally imgs are inline elements (meaning that they will sit on the same line as other inline elements/nodes like span, strong, or pieces of text).

In addition, imgs are replaced elements, which means that what is actually seen on the rendered page is sourced from somewhere else (i.e. an image file, in this case), and that the default dimensions of the image on the page are taken from the image file’s intrinsic dimensions.

What we are doing here is to:

  1. Set the imgs to display: block, which means that they sit on their own line in the display, and won’t sit on the same line as other elements. This often makes it easier to position images in a layout with CSS.

  2. Set max-width: 100% on the images. This means that the images will sit inside their containing block (e.g. the column they are sat inside) and retain their intrinsic width, UNLESS the containing block becomes narrower than the images (e.g. it is a liquid layout being viewed on a narrow screen device like a mobile). When this happens, the images will shrink so that they still fit inside the containing block. If we didn’t have this set, the image would stay at the same size and break out of the containing block when it became narrower, which would look messy.

See the “Responsive Image” demo on this page — http://webdesignerwall.com/demo/responsive-css-tricks/ — try reducing your browser window width until it becomes narrower than the image sat inside it, and see what happens.

#8

Very Clear Thank you so much chrismills

but I have a probleme on my learning
i have 3 years on learning fronted development but i still learning the BIG THREE ( HTML CSS and Javascript ), i took a lot of courses about them , videos courses, on edx platfom by W3C, on Coursera …etc.
In summary the probleme is i don’t know what i should do now, should i stay learn them more deeply or building project with them or jump to sass maybe or go to learn functional JS or pick REACT, node js … the truth i really don’t know . I think my problem is the desire to know and learn every thing and the nitty-gritty about HTML CSS and JS. but also that take much more time and I need to take a job because i need money
what hurt me also that threre is people that learn learn fronted development just in 6 month and they land jobs , so i m frustrated so can you help me please

#9

@kebabtop1 This is a common problem with front end development — so many things to learn, and ways to learn.

I always recommend that it is good to have a solid understanding of HTML/CSS/JS, as this means that you are able to better understand what tools build on top of those are doing (e.g. Sass, React). We are all about the core web standards, and don’t tend to document tools like React, etc. — those project have their own documentation, and it would be difficult for us to compete with those (we don’t have enough time to cover everything, so we concentrate on our strengths.)

But I can also appreciate that you want to become job-market-ready as soon as possible. I’d suggest looking at the jobs you want to get, seeing what skills they ask for, and then concentrating on becoming strong in a popular niche, e.g. become a React developer, and learn the tools required for that niche.

Then while you are doing that, you can also concentrate on the core technologies as a side project, to make sure you have that deeper understanding too.

It is usually better to specialize than try to be a generalist.

1 Like
#10

chrismills Very big thanks to you for your advice
but what that mean " It is usually better to specialize than try to be a generalist"
It mean e.g. become a geek of backend developer is better than taking major of computer science ?

#11

Sorry, I should have used more intuitive wording here. I meant that it is better to learn one area really well (master it) than to try to learn everything, in which case you’ll end up being OK at lots of things.

If you become an expert in a single skill or small related set of skills, you’ll be able to make a name for yourself in that area, and be able to get good jobs, etc.

1 Like
#12 
nav {
  position: sticky;
  top: 0;
  margin: 0 auto;
  max-width: 980px;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav ul li {
  text-align: center;
  flex: 1;
}

main {
  display: grid;
  background-color: hsl(203, 100%, 89%);
  grid-template-columns: 2fr 1fr;
  grid-gap: 20px;
}

article img {
  float: left;
  margin-right: 10px;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}
#13

Hi, chrismills. I had finished the assessment “Fundamental Layout Comprehension”, could you please give some feed back about my work? Below is my css code.:wink:

/* my css code */
nav ul {
    display: flex;
    justify-content: space-between;
}

nav {
    position: sticky;
    top: 0;
}

img.feature {
    float: left;
    margin: 0 20px;
}

.grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
    gap: 20px;
}

ul.photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1px;
}
#14

Hi @Tom-Vanderboom!

So sorry for taking this long to get back to you. I’ve had a look at your code, and your CSS seems to work great — congrats!

If you want to explore our finished version, see the following links:

#15

It doesn’t matter. Thanks for your reply.:wink:

#16

Hi!
I also tried this.
As always, it is published on GitHub Pages.
Thank you.

#17

Hi there @amaryllis ! I have looked at this, and it looks like a really good effort. I don’t think there is anything really wrong with what you have done as such, although there are a few differences between our version (https://mdn.github.io/learning-area/css/css-layout/fundamental-layout-comprehension-finish/) and yours, which are interesting to explore.

First, the spacing in the nav items is a bit different. This is because your version has a max-width of 980px set in the nav > ul ruleset, as well as justify-content: space-around. Our version has no max-width set, so spans the whole width of the body, and it has justify-content: space-between.

The <main> element is laid out as a grid. Our version has

grid-template-columns: 3fr 1fr;
grid-gap: 20px;

whereas your version has

grid-template-columns: 4fr 1fr;
grid-column-gap: 1.2em;

which makes the layout slightly different.

I think that’s slightly it. These are not a big deal anyhow, but that’s the significant differences I observed. Nice work!

1 Like
#18

Hello,

I had a different approach to get the dimensions with < article > and < aside > what do you guys think?

body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}

img {
max-width: 100%;
display: block;
}

article img {
float: left;
margin-right: 22px;
}

nav {
position: sticky;
top: 0px;
background: black;
padding: .5em;
}

article {
margin-right: 10px;
width: 830px;
}

nav li {
text-align: center;
}

nav ul {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
padding: 0;
margin: 5px auto;
list-style: none;
}

nav a {
color: #fff;
text-decoration: none;
padding: .5em 1em;
}

.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}

.grid {
display: grid;
grid-template-columns: 4fr 1fr;
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
}

.photos {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1px;
list-style: none;
margin: 0;
padding: 0;
height: auto;
width: 350px
}

.feature {
width: 200px;
}

#19

Hi @tbrass007, thanks for sending your code in!

This looks like a pretty reasonable approach. The end result is a little different, but I think this is OK.

You might want to compare your code to ours, and have a look at the live example and marking guide:

If you want to explore our finished version, see the following links:

#20

Hello,

I use Responsive design, is this appropriate?

body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}

img {
max-width: 100%;
display: block;
}

.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}

/* If less than this width, the title will wrap */
@media screen and (max-width:383px) {
.logo {
font-size: 150%;
}
}

nav {
background-color: #000;
padding: .5em;
}

/* Don’t stack a menu on top if screen length is too short */
@media screen and (min-height:667px) {
nav {
position: sticky;
top: 0;
}
}

nav ul {
margin: 0 auto;
max-width: 980px;
padding: 0;
list-style: none;
}

nav a {
color: #fff;
text-decoration: none;
padding: .5em 1em;
}

/* Minimum width to accommodate all menus */
@media screen and (min-width:570px) and (max-width:767px) {
nav ul li {
display: inline;
}
}

/* Practice requirements */
@media screen and (min-width:768px) {
nav ul {
column-count: 5;
}

/* Fix height */
nav a {
padding: 0em 1em;
}
}

.grid {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
}

/* Enough width, multiple columns */
@media screen and (min-width:768px) {
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;
}

.grid article {
grid-column: auto / span 8;
}

.grid aside {
grid-column: auto / span 4;
}
}

.photos {
list-style: none;
margin: 0;
padding: 0;
}

/* Picture arrangement when at the bottom */
@media screen and (max-width:767px) {
.photos {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}

.photos li {
flex: 100px;
margin-right: 1px;
margin-bottom: 1px;
}
}

/* Picture arrangement on the right */
@media screen and (min-width:768px) {
.photos {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1px;
}

.photos li {
grid-column: auto / span 1;
}
}

.feature {
width: 200px;
}

/* Do not use float because the width is too small */
@media screen and (max-width: 441px) {
.feature {
width: 100%;
margin: 0 auto;
}
}

/* Practice requirements */
@media screen and (min-width: 442px) {
.feature {
float: left;
margin-right: 25px;
margin-bottom: 20px;
}
}