Skip to content
OverviewSolutions
7
Comments
7
P

Tibor

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

View more solutions

Latest comments

  • P
    Tibor•120
    @totibor

    Hello @Antonex, good job implementing the design. I think You could further improve it by giving the testimonial cards more space by removing width: 65% and width: 90% on smaller screens from the .container class. In my opinion the padding on the .container gives enough distance from the edge of the screen.

    Other approach would be to define a smaller (like 13px) font size in the html element.

  • P
    Tibor•120
    @totibor

    Hi @VladimirVrhovski, Really great implementation of the design. Simple and responsive. Probably I should update my solution based on your approach 😄

    Two minor things I would like to mention:

    • In <div class="section-header"> you have <h2> before a <h1> which is not considered good practice. <h1> should go first.
    • Creating separate classes just for the colored card decorations may seem overkill but I would still go that way over inline styles.
  • P
    Tibor•120
    @totibor

    Hi @AndresFGutierrez,

    Really good recreation of the original design! The fade-in animation when the page first loads is a really nice touch.

    You may consider the following suggestions for improvements:

    • The component width on desktop could be smaller. Instead of 800px, you could use 600px.
    • The hover state of the Add to Cart button is not implemented. It should have a darker shade of green when hovered.
  • P
    Tibor•120
    @totibor

    Hello @dttrang196,

    Really great recreation of the given design!
    I especially liked your styling solution for the instructions' numbered list.

    Here are a few suggestions you can consider regarding responsive design:

    • On smaller screens, you can use @media queries to tell the browser when to change layouts. For example, on screen sizes smaller than 375px:
    @media (max-width: 375px) {
  body {
    padding: 0;
  }
  .your-card-class {
    padding: var(--new-smaller-padding-value);
  }
}

    This way, you can make your card component take up the full width of the screen on mobile devices, with less padding to create more space for the content.

    • You should use CSS variables because they make your styles more maintainable and consistent by allowing you to reuse values throughout your CSS.
      You can define CSS variables in the :root selector and use them later in your design.
    :root {
  /* Colors */
  --white: hsl(0, 0%, 100%);
  --stone-100: hsl(30, 54%, 90%);
  --stone-150: hsl(30, 18%, 87%);

  /* Spacing */
  --spacing-100: 8px;
  --spacing-150: 12px;
  --spacing-200: 16px;
}

    Then, in your CSS rules, you can reference them like this:

    h1 {
  color: var(--stone-100);
  margin-bottom: var(--spacing-200);
}

    For further information on responsive desing you can check out this article I found on Frontend Mentor: A practical guide to responsive web design.

  • dangduomg•60
    @dangduomg
    What are you most proud of, and what would you do differently next time?
    • What I am proud of: Writing the solution took much less time compared to before
    • What I would do differently: Add different themes, including support for dark mode, using a button on the corner
    What challenges did you encounter, and how did you overcome them?

    Challenge: Measuring exact pixel values for spacing between elements (margin, padding)
    How to overcome: Use a pixel ruler, such as the one from RapidTables

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

    Using media queries to make the card more mobile-friendly

    Social links profile

    1
    P
    Tibor•120
    @totibor

    Hi @dangduomg! Your solution looks good, keep up the great work!

    You may consider my suggestions for improvements:

    • Add some padding to <body> so the profile card does not touch the edge of the screen on small screens.
    • For quoted text, you may consider using the <q> tag instead of <p>. It will add quotation marks automatically, and you can add a property for citation if needed. <q>: The Inline Quotation element
    • The list of social links is wrapped in a <nav> tag. I would typically use <nav> for links that navigate within the current document or to other documents, but not for external sites. I think wrapping it in a <div> would work just fine, or you could argue for using <address> since it represents contact information.

    I hope this helps.

    Marked as helpful
  • P
    Tibor•120
    @totibor

    Hi @abstruse-scientia! That’s a very accurate recreation of the original design.

    Regarding responsiveness, I’ve also just started learning about the topic, so I can't give you detailed instructions. However, as a starting point, you can check out the video linked in this article I found on Frontend Mentor: A practical guide to responsive web design.

    In this challenge, I used the following CSS to introduce a breakpoint in the design, for example, to change the font size:

    @media (max-width: 375px) {
  .class-to-change {
    font-size: var(--new-font-size);
  }
}
    Marked as helpful
View more comments