Skip to content
OverviewSolutions
4
Comments
4

Ruan Costa Oliveira

@umenorin60 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

  • P
    finkusuma-dev•100
    @finkusuma-devSubmitted 28 days ago
    What are you most proud of, and what would you do differently next time?

    I implements both px and rem unit. px is used for horizontal margin and padding and other properties that don't need to scale with the default font size.

    rem is used for font-size, vertical margin and padding and also horizontal spacing that has direct relation with text, such as spacing between bullet and list item text, horizontal spacing in the th and td.

    When I tested it by increasing the default font-size to more than 40px, it showed the increased size of certain element properties as expected.

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

    I faced some number of challenges:

    • How to stretch the marker to the list item height. To solve this I create a custom bullet by using ::before pseudo-element and centering it vertically using flexbox.
    • How to set the horizontal spacing of the marker. To handle this, first I align the marker with any text above the list. Then set the spacing according to Figma.
    • There are four divs in the page and three of those have the same class. The challenge: even if they have the same class, each of them has different border sides in the vertical direction. I resolved this by utilizing :nth-of-type() pseudo-class.
    What specific areas of your project would you like help with?

    I got feedback from Grace Snow for not using sections for this challenge as they don't add benefit. Each of block already has headings that can be used as accessibility navigation. But I still don't understand in which cases the sections are necessary. So if anyone already has clear understanding about this please let me know!

    Responsive Recipe Page utilizing both `px` and `rem units

    1
    Ruan Costa Oliveira•60
    @umenorinPosted 28 days ago

    the only thing that would change is the color you forgot to change in the titles, other than that it's perfect, good job

    0
  • Ruan Costa Oliveira•60
    @umenorinPosted about 1 month ago

    Your heading is too large, and you're missing hover effects on your buttons. A tip for you: set the initial margin and padding to 0.

    Ex:

    • { margin: 0; padding: 0; }
    Marked as helpful
    0
  • ammarshakeel1•40
    @ammarshakeel1Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of being able to complete this project much faster than the last because it shows me that I've made an improvement in my development skills. I'd probably just go about the order of things that I coded different if I was to do it again just to make everything make more sense to me.

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

    Had a bit of a hard time making sure the card wasn't changing sizes when the screen was a different size. It ended up being a quick fix. Simply setting a fixed width to the card did the trick.

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

    Getting started is a bit difficult and my main challenge is just creating a solution in my head and trying to figure out how to approach getting started with it.

    Blog preview card using CSS

    1
    Ruan Costa Oliveira•60
    @umenorinPosted about 1 month ago

    The only thing I could tell you to improve would be to use the B.E.M standard, the other things are well done

    0
  • Ruan Costa Oliveira•60
    @umenorinPosted about 1 month ago

    Your exercise demonstrates solid foundational work! To further enhance your approach, here are two actionable suggestions:

    Incorporate Classes in Tags Consistently
Even in smaller projects, using classes in your HTML/CSS structure is a best practice. This habit ensures scalability and maintainability, especially as projects grow in complexity. Early adoption of this practice will prevent challenges related to styling conflicts or code organization down the line.

Improve Text Contrast for Readability
The current color choice for subtitles/content reduces legibility. Consider increasing contrast—for, use the color scale in the "style-guide.md"

    Overall, great effort! These refinements will elevate both the technical quality and user-friendliness of your work.

    0