Skip to content
OverviewSolutions
4
Comments
4

Paulo Vitor Ferreira Gonçalves Pivotto

@high-rolls40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Paulo Vitor Ferreira Gonçalves Pivotto•40
    @high-rolls

    Nice job! It looks very good, and it's a nice touch that you included your own social links already.

    You got the sizes correct for the most part, but forgot about add padding to the card element and some margin between the user summary and the links. That makes your solution look a bit more crammed than the intended design.

    Your solution is also using the browser's default font (Times New Roman in my case). That not only is different from the type of the design font (serif instead of sans-serif), but the default font varies wildly between user devices, sometimes even breaking the layouts.

    I also would follow the hint from the CSS report and not set the font-size attribute in pixels. To make the whole page default to "14px" use "875rem" instead, so that it scales when users change their browser's font size.

  • P
    Heath Babb•60
    @hbabb
    What are you most proud of, and what would you do differently next time?

    Being able to figure out the basics of figma and how to "translate" the figma design into HTML and CSS elements.

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

    I found a few issues understanding some of the thing in the figma design, like when it says the padding is 24hug. Luckily, a little google and Ai provided the answer and I was able to write the correct CSS code for this.

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

    I think I could do more with adding media queries to help the responsiveness be smoother.

    Responsive Blog Preview Card

    1
    Paulo Vitor Ferreira Gonçalves Pivotto•40
    @high-rolls

    Hey there!

    You did a very good job on the card's positioning, sizing and shadows, as well as internal spacing and alignment. The only part that deviates from the design are the font sizes. Most of the text in your card has a smaller font size than that of the design, except for the author's name, which is larger.

  • AqsaRani22•230
    @AqsaRani22
    What are you most proud of, and what would you do differently next time?

    All feedback is welcome

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

    All feedback is welcome

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

    All feedback is welcome

    1st attempt QR code component

    1
    Paulo Vitor Ferreira Gonçalves Pivotto•40
    @high-rolls

    Nice work!

    Some things I've found that diverge from the design:

    • The card is not vertically centered on the page.
    • The card's text content should have an extra spacing horizontally, to make them stand out further from the image.
    • The title font should be slightly less bold, and a bit lighter in color.
    • The image seems to be larger in your solution.

    Hope that helps!

  • Paulo Vitor Ferreira Gonçalves Pivotto•40
    @high-rolls

    Thanks a lot for the help guys. I changed the code to include the accessibility landmarks, but I still kept them inside of the <div> with the card class, the reporter now shows no issues. I'll study more about landmarks and how to properly use them, but this is good enough for today.