Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive, GRID, SASS

@SamyrOR

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everybody, i expect you have a nice day.

Here go another challenge, all feedback well be welcome.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Samyr,

View code button is not referencing to the GitHub files (maybe there is a general problem with it today). There is another way to arrange the blocks differently - column on mobiles, then two rows with two boxes (for tablets) and final design version on desktop, what do you think about it? Also, try to fix the HTML issues report above.

Greetings :D

1

@SamyrOR

Posted

Hi @SzymonRojek!

Yes, the view code unfortunelly was not working by my fault, now its fixed. And the two rows for tablets is a nice idea! Thank you!

About the HTML issues report is because the excessive h1's i add, now i know to avoid that!

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@SamyrOR

Generally, this project we can treat as a separate page. As you can see at the top you have got header - I would do h1 with two spans because these two sentences are related to each other:

<h1 class="heading-primary">
    <span class="heading-primary-main">Reliable, efficient delivery</span>
    <span class="heading-primary-sub">Powered by Technology</span>
</h1>
  • and underneath I would give a p tag.

What do you think about that?

1

@SamyrOR

Posted

Thanks @SzymonRojek ! Is an amazing idea, with certain i will code like this now! And, the other titles in the page, like the cards title, is better use h3 right?

0
Szymon Rojek 4,540

@SzymonRojek

Posted

@SamyrOR

I am thinking about it, for me, it is always tricky which one can become a heading from h2-h3 (has to be gradual). I think if you have h1 with the main and subheading then each card can get h2 but if you will give h3 should be ok too. Also, you have got icons but these are only a decorative so the alt text should be empty.

1

@SamyrOR

Posted

Ooh, ok @SzymonRojek!

You guys helped me a lot!

0
Szymon Rojek 4,540

@SzymonRojek

Posted

@SamyrOR

According to our conversation I can recommend this article from the blog CSS-tricks HTML for Subheadings and Headings. Let me know what do you think about it. IMO each article represents unique content

Greetings :D

1

@BasileRaiwet

Posted

Hi Samyr !

Great work ! I just see some points you can improve :

  • About semantics : avoid to use many h1 on the same page. h1 and h2 are here for the title and subtitle of the section. So It's better if you use h3 (or other, depend of the situtation) for the boxes titles
  • about the container width : design is based on a 1110px grid and I think it's better to limit the width of the container to this size because if your solution stretch to 80% of the viewport with (like it is actually), the result could be really different on larger screens. (As an example, look how this page container is defined. It's, I think, the most common way to define container width)
1

@SamyrOR

Posted

Hello @BasileRaiwet!

Thanks very much!

On next challenges with certain i will use this!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord