Skip to content
OverviewSolutions
4
Comments
4
Kla Marius
@Smatsher

All comments

  • Kla Marius•40
    @SmatsherPosted 4 months ago

    Your implementation looks great. You can change the color of the list style type with

    li::marker {
    color: value;
}

    There is also more space between the marker and the text. You also add one more horizontal line after the Fat. You can think of adding more semantic HTML like main or other. I also looked at the mobile design and the image is not rendered as expected. You can achieve this by using

    section {
  background: var(--White);
  border-radius: 10px;
  width: 60%;
  margin: 120px auto;
}

    In the media query

    0
  • BegShoo•80
    @BegShooSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Took advice from previous project on board. Also made the card scalable upon screen resizing. Centred it properly and didn't use the font size hack.

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

    Had issues with media queries as it's been a while since I learned it. Also had issues with centering the divs inside the card.

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

    Code review and making sure I got the and parts right.

    Social Links Profile Page

    1
    Kla Marius•40
    @SmatsherPosted 5 months ago

    You did great but I didn't see the hover effect on your button

    .btn:hover {
  color: hsl(0, 0%, 20%);
  background-color: hsl(75, 94%, 57%);
}
    1
  • Kla Marius•40
    @SmatsherPosted 5 months ago

    Your implementation looks great but why did you use an h6 rather than a simple p tag?

    1
  • Ruzsa Balázs•30
    @celluxSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    This static site generator feels a bit over-engineered.

    We'll see how well it stands up to upcoming challenges.

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

    First I wanted to define all lengths via em units because I read that helps responsiveness. This made it almost impossible to match up my implementation with the original design. Once I switched to px units, my problems went away.

    Centering the solution on the screen was not easy, I had to read up how to do this via Flexbox.

    I spent some time on figuring out how to overlay the design JPG on top of my implementation and how to switch between the two for comparison purposes. Finally I placed the design JPG into an absolute-positioned div with z-index: 1 and visibility: hidden, then switched it on/off via DevTools.

    Had to play with letter-spacing and a blur filter to get a similar enough look for the fonts.

    For me the size of the font was not 15px but 15.5px, maybe this is due to the font rendering pecularities of Firefox under Linux Wayland.

    What really bothered me was that the length units felt quite arbitrary: the only way to assess their correctness was to compare my implementation with the design JPG. It would feel much better if there were some mathematical rules which I could learn and then follow.

    QR code component

    1
    Kla Marius•40
    @SmatsherPosted 5 months ago

    On a Desktop, your solution stays in the center but when changing from desktop to mobile, the component is no longer centered.

    0