Responsive 4 card page done by using flexbox and media query

👋 Hi Elvinas!

🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

• Accessibility
  • 👍 Well done on taking care of those images.
  • 👍 Good job on making all the page content live inside the main landmark.
  • The Reliable, efficient delivery Powered by Technology text only makes sense if read as one sentence. So, you can wrap the text with h1.

<h1>
  <span class="heading__top">Reliable, efficient delivery</span>
  Powered by Technology
</h1>

Note: You can make the span as a block element.
           That way the "Powered by Technology" will
           move to the next line.

• You can make the wrapper as the unordered list and wrap each item using li instead of using div.

<ul class="wrapper__sections">
  <li class="sections__column sections__card sections__card-cyan">
    <p>Supervisor</p>
    <p>Monitors activity to identify project roadblocks</p>
    <img src="images/icon-supervisor.svg" alt="">
 </li>
...more list items
</ul>

• Also, I would recommend making the bold text as a paragraph, since the content below it is too small. The heading is commonly used as a label for section or article.
• You can think of a heading is like a title on a document.
• Styling
  • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.

That's it! Hopefully, this is helpful!

Hi Elvinas.

Your projects looks similar to the design which is good. You also use BEM already which is pretty cool. That said, there are ways you could raise your game.

Firstly, I noticed your media query targets mobile with the max-width after you've already set the desktop styles. I would recommend you to always design mobile first, as in write the CSS for the mobile version, then add the media query to target the next version, usually with the min-width. This is the convention which should also provide better performance for mobile devices. Personally, I find it is much easier to expand a layout than to contract it. Not to mention it is annoying to have to work on the mobile version properly when you know you've already met the screenshot requirement.

Secondly, while your layout is fairly similar to the image, it is not pixel perfect. The cards are larger and not aligned, the fonts aren't aligning properly with the image, etc. That may or may not be a requirement in real life, but since these projects are for learning, I suggest you try to make it pixel perfect or as close as possible. There's a very very useful Chrome extension named "PerfectPixel" by WellDoneCode which I use to help with this.

However, the easiest way to make your design more accurate is to first map out the image in a Figma file (or XD or whatever software you would use). That way, you already know all the font settings for each section perfectly and also the exact distances between every div on the page. It's an absolute pain to use trial and error to figure out the fonts or any CSS property like paddings, margins, etc. when developing.

Furthermore, you ask about whether grid would be better. Grid will most likely make your markup flatter and clearer - you probably won't need that

<div class="sections__column column__tworows"> and so on. Grid takes most of the layout work out of the markup and into the CSS. Also, imagine you looking at your code 4 months later and trying to remember what's going on. Unlike flex, the CSS for grid will be a lot easier to understand at that time, especially if you use grid-template-areas and visually represent the layout in your CSS. I know it's a burden to have to learn another layout tool when you already have flex, but trust me that it's very useful for 2-dimensional layouts and you'll be learning it eventually anyways. So while you're here learning, use this as an excuse to get friendly with Grid too.

I would recommend you do all of the above and any other improvements you can think of yourself, and then start this challenge and submit the updated solution again.

I actually submitted this challenge with Flex yesterday, then added Grid and submitted again. (you can see changes to the markup and CSS that I was talking about in my commit history). Also, the my figma file is also in my repository. This is not FEM's figma file, this is my own, but when you look at it you'll see how clear it makes when you can map the layout and know the exact font settings and div dimensions. Oh, there's also some notes in there in learned.txt where I talk about the laptop layout, etc. You may find some of these useful.

Lastly, if you think re-doing the same project will be boring and slow you down, think of it this way. You are here to improve front-end. What difference does it make whether you do it in 4 projects or one? If you can make improvements to your code, learn and compare new techniques in one project, then you are just getting more value and benefit out of a single project without having to start another one from scratch.

All the best.

Hi Elvinas,

Great to see another solution from you, you've smashed this one!

Interesting you mention about what to use Flexbox or Grid. I think this article is really helpful and explores this further. I think Flexbox is for one dimensional layouts and grid for two dimensional layouts, I chose grid for this challenge.

Anyway keep up the momentum!