Skip to content
OverviewSolutions
8
Comments
8

Bisturi

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

  • Bisturi•100
    @BistuBastian

    Very good job

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

    What I learned:

    1. more practice on the grid column and row spans.
    2. the grid putting in order. By adding "grid-column-start: -2" on the 5th card, I can make the 5th card the first one put in the grid layout.
    3. more experience on CSS specificity. If I only use "section.testimonial-card" selector to set grid-column and grid-row to span 1 on media query of the mobile version, the properties cannot be override. But if I add "nth-child(n)" to it, the selector's specificity increases and then overrides the span successfully.
    4. my first experience using background-image, background-repeat, and background-position.
    What challenges did you encounter, and how did you overcome them?

    I cannot find exactly the same spacing such as the layout method, padding, margin, line-height, or the exact color from the example jpg files, as I did not unlock pro to get the Figma files.

    Therefore I made all the magic numbers named variables, and putting them together under :root. It's more convenient for me to modify them for countless times by try-and-error to get closer to the example jpg.

    The spacing is still not the same as the example, such as the words' length and height on the last card on the mobile version. But I'm happy with the result and don't want to waste time on this trivial details.

    Testimonials grid section

    2
    Bisturi•100
    @BistuBastian

    good job

  • Bisturi•100
    @BistuBastian

    Very good job

  • ortiz-antonio•270
    @ortiz-antonio
    What are you most proud of, and what would you do differently next time?

    I learned a lot about intrinsic design by studying Andy Bell's code and making some adaptations.

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

    In the utopia font sizes, I did adaptations in the sizes by trial and error

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

    Accesibility

    • I did the perfume image as presentational because: Is identified and described by surrounding text.

    Intrinsic layouts

    • I’m also exploring ways to adjust container sizes without relying on media queries, as I’m not fully satisfied with my current solution.

    Produc preview card: Intrinsic layout, postcss

    1
    Bisturi•100
    @BistuBastian

    Great job

  • Bisturi•100
    @BistuBastian

    Good job

  • P
    Takuma•230
    @ysm0706glee
    What challenges did you encounter, and how did you overcome them?

    Styling without figma was hard.

    Social links profile

    1
    Bisturi•100
    @BistuBastian

    Good job, remember that good use of spacing between elements is essential

View more comments