"Fundamental Layout Comprehension" assessment


(Chris Mills) #1

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


#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!


#3

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


(Chris Mills) #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:


(Kebabtop1) #6

I don’t undestand what this declaration mean for images

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

Please can you Help me


(Chris Mills) #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.


(Kebabtop1) #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


(Chris Mills) #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.


(Kebabtop1) #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 ?


(Chris Mills) #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.


(Renanmartineli) #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;
}