Product Landing Page (arranging)

Just a quick one for you pro’s. I like to do my projects (micky mouse as they are) in a text editor and paste across to codepen, as you can imagine I don’t tick many texts when they are performed. But I don’t understand the necessity of some of them e.g:- Why would FCC insist on having a nav-bar AND an image in the #header element ? Between padding and margin’s it’s a disaster, they both want to occupy the same spot and if I do manage to manipulate them enough to force them where I want them to the last .1 of an em, I’m only then made an even bigger idiot of when it comes time for media queries and trying to make it suitable for small screens, I’m back to square one. Do you just need to do a new div for every word of code ?

Ok, so first thing, I very rarely use divs nowadays. Instead, we have header, main, article, section, aside, footer and many other “semantic” tags. Just as a mention, I really find div tags largely unnecessary.

Now, I do the same – I usually build in a better text editor and cut-and-paste, it’s a thing. I will usually do a paper layout first, and get close, then start hacking HTML as blocks:

  <header>
    <figure>...</figure>
    <nav>...</nav>
  </header>
  <article>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
  </article>
  <footer>
  </footer> 

I usually have a template along those lines that I start from (though I agree with you, I’ll often put the nav in a <section class='sidebar'> rather than in the header as FCC expects). That said, using relative measurements (vw or %) rather than fixed measurements (px, for example) will allow for a more flexible design flow.

As you move along, you may find that things like display: grid and display: flex are very powerful, flexible layout tools. They will allow you to define grid areas, and position elements in those areas, and to define different grid areas depending on media type (so your nav, which may be a left-side navigation menu, can be just below the header instead).

FCC tests are pretty strict, they look for very specific ids on elements nested in a certain way – but that’s the only way the testing hooks can work. Personally, I do the challenges and pass the tests, but I also know I’ll be doing a bit more tweaking before it’s something I am willing to stick in my portfolio. I really have an issue with ID’s all over the place, so becomes a thing. :wink:

That helps thanks, I’d fiddled with display: flex; but I’ve found it’s not particularly helpful with things like images and iframes, because when you allocate it’s flex: 1; the items then swallow all the space available and don’t leave you much room in terms of background styling, I like to do a colored rounded border, but the items end up over the borders somehow even though they’re pushing into a separate div and annoyingly when I try to press down the images and videos with height, width: 10%; e.g. they end up just ignoring me eventually ? I have to reluctantly use px and em which again, punish me on media queries, the even bigger problem however is that display: flex is the only way I know how to get these items side by side ?

The header is just the container and the nav and image (logo) should have no problem being inside the same parent container. I will say if you want to learn about layout you have to look at other places then just FCC. Well, that pretty much goes for everything, not just CSS. I will say CSS looks and feels deceptively simple but it can be a real pain. Sometimes it makes perfect sense, other times it’s just infuriating.

Just keep practicing making header/navs and you will be able to throw it together in 5 minutes, minus all the things that make it look nice, that takes a bit more time.

Hey there! One thing I’ve been using is Grid for page layouts, then flex, if necessary, on the contents of each of the elements that I’ve “laid-out” with Grid. This video helped me understand Grid pretty quickly.

Also, Firefox 's “Grid Inspector” can help visualize the layout you’re creating by showing you the containers edges and overlaps and things.


And, the “Want to learn more?” and “Further reading” sections will have you creating layouts in your sleep. R. Andrews and J. Simmons are Grid Gurus, imo.

Good luck!

What are you trying to do exactly?

Thanks for the help guys

Hi again, for those who are interested and wanted to know where I was going wrong, I was trying to make something similar to sweetwater.com, this involved mostly displaying images in flex boxes, a nav, newsletter simple stuff, for the flex boxes I tried to just style .box .box2 .box3, and use these three boxes generically for displaying 12 odd images in other flex boxes thinking I could just make a new container and display the images the same as the first flex box. As you can imagine the browser was reading this as me trying to squeeze 12 images into the first flex box, the allocation of flex: 1, not making much sense lol. Fixed now.

  1. You can get rid of most of the overflow by adding flex-wrap: wrap; to the video and product sections. To make it easy, you can just add flex-wrap: wrap; to all sections. In this case, I don’t think it is too bad here, but targeting elements is not something you want to do in general.
section {
  flex-wrap: wrap;
}
  1. Then you also don’t need to use display: block; on the videos in the media query (they are off center with it).

  2. The 100vw on the footer in the media query is causing an overflow and is not needed. I would also use flexbox on the footer and align things using it. You might want to give the footer links their own container (it can be a flexbox container as well).

  3. I’d remove the default margin on the body.

  4. The negative margin-top on .qsc-touchmix will cause the image to overlap the text once you have set the sections to wrap.

.qsc-touchmix {
    height: 200px;
    width: 210px;
    /* margin-top: -4%; */
}

Anyway not bad, the responsiveness just needs a little love.

1 Like

FCC just has a way of doing things. it used to bother me but then i’m reminded of all the jobs i’ve had and all the weird ways i was asked to do something i thought didn’t make sense or could have been done better.

i’ve just been doing what they ask and then going back and redoing the project the way i think makes more sense. sometimes i find there were reasons why FCC chose to do a thing and sometimes i find there is no reason i can think of.

1 Like

Thanks that was helpful, now you mention it, tutorials I’ve watched have said to be biased towards responsive metrics (%, em, rem), I feel like there is some glaring tripwire somewhere here though, why do most FCC template pages use px etc, or in that matter why use px at all ?

Yes, you should use relative units as much as possible. Sometimes when just playing around or making some mock-up stuff it doesn’t really matter as much and then px is fine.

By FCC template pages are you referring to the example projects?

The Responsive Web Design Principles part of the curriculum is a bit underwhelming. But FCC isn’t the only place to learn and at least gives the basics of it. I think a lot of people just starting out expect FCC to be all-encompassing but that just isn’t the case. It teaches an important concept, Read-Search-Ask. One of the most important things you can learn.