Skip to content
OverviewSolutions
7
Comments
7

Isaias

@Isa696Bueno Aires, Argentina120 points

I started programming with the goal of creating practical applications. Specialized in React JS for front-end development and studying React Native, I aim to expand my knowledge in mobile applications. I plan to study back-end development to complete my software development education.

I’m currently learning...

React.Native

Latest solutions

View more solutions

Latest comments

  • Isaias•120
    @Isa696Posted 2 months ago

    Great work! I noticed you used grid-column-start and grid-column-end instead of grid-column: 1 / 3; and grid-row: 1 / 2;. Both approaches work the same, but the second one is a bit more concise. However, your way can be more readable, so it really comes down to personal preference.

    Here’s a small suggestion: you could centralize your color variables by defining them in the :root like this:

    css Copiar código :root { --Moderate-violet: hsl(263, 55%, 52%); --Very-dark-grayish-blue: hsl(217, 19%, 35%); --Very-dark-blackish-blue: hsl(219, 29%, 14%); --White: hsl(0, 0%, 100%); --Light-gray: hsl(0, 0%, 81%); --Light-grayish-blue: hsl(210, 46%, 95%); } Then you can reuse them as var(--color-name) in your CSS. It helps keep the code more maintainable and scalable. What do you think? 😃"

    0
  • Isaias•120
    @Isa696Posted 5 months ago

    You did great! I just recommend adding some gap or padding inside the cards to ensure they all maintain the same size. I noticed that in windows smaller than 768px, some cards are a little bigger due to different text lengths. Additionally, you might consider using the main tag instead of a div. These are just slight adjustments. 🙌

    0
  • Isaias•120
    @Isa696Posted 5 months ago

    Hi you did a good job. Real good css clear and readable. But i see flex direction no working on my browser. I 'm using brave Browser

    Marked as helpful
    0
  • Isaias•120
    @Isa696Posted 6 months ago

    Your desing its almost identical on desktop. Only diference its the margin bottom.

    I would recommend checking the mobile design. It will require some media queries to remove the card container and make the image and card width at maximum.

    I know this exercise is quite simple, but I think using a CSS reset will ensure total control over margins, paddings, etc.

    Also, in my opinion, using relative sizes for paddings, margins, and fonts will result in better responsiveness.

    You did a great job!!! 🙌

    Marked as helpful
    0
  • Isaias•120
    @Isa696Posted 6 months ago

    Hi, you did a good job! To fix the background color, check the styles README guide. It contains all the styles, colors, fonts, etc.

    0
  • Isaias•120
    @Isa696Posted 6 months ago

    i got same problem with gap and padding / margings so i cant help 😔. i ll recomend checkout the figma file. The border-radius i think its 20px. its just a minor detail. You did it great 👍!!!

    0
View more comments