Skip to content
OverviewSolutions
4
Comments
4

Marvelous Chiwanza

@Chiwanza16Gauteng, South Africa80 points

I am a Front-End Developer

Latest solutions

Latest comments

  • Marvelous Chiwanza•80
    @Chiwanza16

    well done keep it up

  • Balaji-webdev•80
    @Balaji-webdev
    What are you most proud of, and what would you do differently next time?

    nowadays i write the code bit faster than before

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

    really i didn't face any issues while doing it

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

    position of the container

    social links using html and css

    1
    Marvelous Chiwanza•80
    @Chiwanza16

    I liked the property you used, "font-optical-sizing." It is good for responsive design. Also, try using Rems they are good for responsive design.

    Marked as helpful
  • Marvelous Chiwanza•80
    @Chiwanza16

    well done you did an amazing job to bring the design into code

    Marked as helpful
  • P
    tomhaeck•120
    @tomhaeck
    What are you most proud of, and what would you do differently next time?

    Vertical centering of the card in the browser window can be done by setting the body's height to 100vh and declaring it a flexbox container. Flexbox items with margin: auto are centered both horizontally and vertically within the container.

    CSS variables with a global scope can be declared in a pseudo :root element.

        :root {
      --white: hsl(0, 0%, 100%);
    }

    Customization of default CSS values for all elements can be done as follows:

    *, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
    What challenges did you encounter, and how did you overcome them?

    The figma design file was inspected to check paddings, line heights and word spacings. Although these spacing values were adopted in my implementation, there is still a small vertical offset between the card text in my implementation vs. the frontendmentor.io solution.

    001-qr-code-component - HTML, CSS custom properties, CSS Flexbox

    1
    Marvelous Chiwanza•80
    @Chiwanza16

    well done the design and the solution is on point