Skip to content
OverviewSolutions
8
Comments
3

Brian

@briangesteban150 points

Software Engineer & Multimedia Designer

Latest solutions

View more solutions

Latest comments

  • mth-ani•20
    @mth-ani
    What are you most proud of, and what would you do differently next time?

    I'm most proud of finally completing the challenge Next time id like to improve on the time am taking in completing a challenge

    What challenges did you encounter, and how did you overcome them?

    The challenge I countered was assigning size to the main image, I overcame it by realizing that the image was at fixed size

    What specific areas of your project would you like help with?

    Any feedback on the codes that would make my webpage more responsive or better codes to be used instead of the one I used. THANK YOU

    Blog card using flex

    2
    Brian•150
    @briangesteban

    Hi @mth-ani,

    Great job on the challenge.

    I would suggest to use semantic elements next time. This will give your users a better accessible website.

    Why semantic elements? One example scenario would be, if your user uses a screen reader, screen reader reads your website and translate it into speech so if your user is blind they could still use and understand your website and it's content.

    With <div> elements or other non-semantic elements, it's not really that useful for the screen reader to understand because it doesn't have meaning. Unlike to it's counterpart, sematic elements. This gives the screen reader a better understanding of your website and content, and this will help your user to navigate better as the screen reader knows which part is the <main> content, <section> part of a bigger content, etc.

    In some cases, you might need to use a non-semantic element. On those scenarios, you could apply some role, aria-label, etc.

    To get better and deeper understanding on these, you could check the references attached below.

    References:

    Hope these helps. Happy Coding!

    Marked as helpful
  • P
    Jocelyne Teles•180
    @JocelyneTeles98
    What are you most proud of, and what would you do differently next time?

    This time I did almost everything by my own. I only had to research a little bit about hover state in CSS.

    What challenges did you encounter, and how did you overcome them?

    The most challenging part for me this time was the box-shadow. Since the free Figma version doesn't support dev mode anymore I had to "translate" the shadow aspect into code. But at the end it wasn't that difficult.

    What specific areas of your project would you like help with?

    I would like to receive suggestions about sizing and positioning for responsiveness. I think I managed it well but I would like to learn about the best practices or the easiest way to think about it when I have to code that part.

    My Blog Preview Card Solution

    2
    Brian•150
    @briangesteban

    Hi Jocelyne,

    It seems you've got sizing and positioning right. You've just missed a CSS default reset. As you can see, even when you already set your max-width for the blog-card, it still doesn't grow to your desired width limit since the box-sizing property of the element is set to default, which is content-box.

    The blog-card width on desktop is growing up to 456px because if you do the manual calculation in box-sizing: content-box it will add the margins + paddings + border + content size. It goes like this, Your margin is 12px on both sides, padding is 24px on both sides, and 384px for your content size, in total it would go up to 456px (12px + 24px + 384px + 24px + 12px = 456px).

    To fix this and get an accurate sizing. You'll have to change the default of box-sizing property to border-box.

    You could set it for all elements like this: (the * selector selects all elements, and change the default box-sizing for all elements)

    CSS Snippet: * { box-sizing: border-box; }

    References:

    P.S. You've missed the border of the blog-card and you could also reset the margins default to 0, right now it seems that you have a margin on the body element that you didn't set. You could also use the * selector for this.

    Hope this helps you. Happy Coding!

    Marked as helpful
  • Brian•150
    @briangesteban

    Hi @delacruzralph!

    What I could suggest is to code mobile first your CSS and use relative units such as em, rem, %, etc. After coding everything on mobile display then you could now adjust the size for the bigger displays using media query and max-width. This will also lessen redundant codes and a smoother load for mobile users.

    Using max-width means you are setting your element to how wide it could only go. Let's say you wanted it to be until 800px wide only for desktop, then set max-width to 50rem.

    Also on height, I just let it be. I don't usually set a specific height for my element unless I need it to be specific.

    You could also checkout (w3schools.com) for reference.

    P.S. For accessibility warnings, you should use semantic elements or give your elements role, name and value. You could check it out here to understand more on accessibility. (https://www.w3schools.com/accessibility/index.php). I'm also currently learning it. 😁

    Hope these helps you!

    Marked as helpful