Skip to content
OverviewSolutions
8
Comments
6
Tiago BW
@tiagobw

All comments

  • Joshua•130
    @dyntbnSubmitted over 2 years ago

    Hey everyone, 👋

    Would appreciate some insight on finding the right middle ground between the accessibility/semantic-html feedback and design challenges.

    My current layout has a section as the parent, and article as the child elements. I used section because it groups content, and article because it contains self-contained content.

    <section> # cards wrapper
  <article> # card
    <h2>
    ...
  <article>
    <h2>
    ...
  <article>
    <h2>
    ...

    Feedback suggests that page should have an a level one heading (h1), but the design doesn't call for one. Going away from design, I could add a h1 to completely fix it, but is that the right call?

    Or is there a better way of approaching this, maybe restructuring the html? I looked around in some recent solutions, but couldn't find a clear answer.

    I feel like it is an issue that I'm going to face a lot, and maybe you have before. Any help is greatly appreciated, thanks for reading!

    Responsive 3-column preview card component

    2
    Tiago BW•210
    @tiagobwPosted over 2 years ago

    Hi dyntbn,

    I had this question myself.

    So I came across this article: https://css-tricks.com/how-to-section-your-html/

    You can find the answer in Part 9: Don’t swap <div> for <section>.

    I hope that can help you as well.

    And congratulations on completing the challenge. :)

    Marked as helpful
    1
  • Samson Sham•140
    @samsonshamSubmitted over 2 years ago

    Please feel free to comment! Thank you so much!

    Could anybody shed me some light of what would be the proper way to start with desktop view? I would like to use grid-template and cut the entire page into 3 parts because I don't need extra wrapping in my html like using Flexbox. But I found it difficult to control the height and vertical alignment in my grids, especially while I am v-center my main.

    Social Proof

    1
    Tiago BW•210
    @tiagobwPosted over 2 years ago

    Hi Samson,

    you can remove your <div class="container"> and add height: 100vh + the flex properties directly to the body, like so:

    body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    I hope that helps.

    And congratulations on completing the challenge. :)

    1
  • Tiago BW•210
    @tiagobwPosted over 2 years ago

    Hi Elena,

    The Front-end Style Guide says that the design follows 1440px width for the Desktop version.

    So, for the proportions, the height should be 1024px.

    I hope that helps.

    Great job completing the challenge. :)

    Marked as helpful
    1
  • Tiago BW•210
    @tiagobwPosted over 2 years ago

    Hi César,

    Everything is working great.

    But maybe it would be interesting to add a cursor: pointer when hovering the share icon on the Desktop. That would be a good hint that you can click it.

    Keep up the excellent work.

    :)

    Marked as helpful
    1
  • Tiago BW•210
    @tiagobwPosted over 2 years ago

    Hi Nguyen,

    For the Desktop view:

    1 To use CSS Grid instead of Flexbox, change the main styles to:

    main {
    display: grid;
    grid-template-columns: repeat(3, 20rem);
}

    For the mobile view:

    1 To use CSS Grid instead of Flexbox, change the main styles to:

    main {
    display: grid;
    grid-template-columns: 20rem;
}

    2 @Hersonmei's answer is already great.

    I hope that helps.

    Have a great day. :)

    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoSubmitted over 2 years ago

    I'm not subscribed to pro, so I want to know how can I get the measurements right? I've been doing it trial and error, and it takes up a lot of my time. Can't seem to get the exact measurements no matter how hard I try.

    And can I get any advice in using BEM? And if there are still things I can improve on, please let me know. Thank you!

    P.S. Haven't applied shadows. I'll update this soon :)

    Responsive Single Price Grid Component - BEM, flexbox, media query

    1
    Tiago BW•210
    @tiagobwPosted over 2 years ago

    Hi Erel,

    You can probably get the exact measurements by opening the design .jpg inside Photoshop / Illustrator / Figma and using the Ruler tool.

    But I think that coding just by looking at the image and getting a good design is much more valuable. And yours is already great.

    And the same goes for your BEM methodology for CSS and structure, semantics, and accessibility for HTML.

    Great job.

    10/10.

    :)

    Marked as helpful
    0