Submitted about 1 year ago

QR Code Components with HTML/CSS

BINTANG RIZQI PASHA• 10

@BintangRP

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

i was difficult on writing css best practice and dont know the order of syntax like

.container {
 object-fit: cover;
 display: flex;
 flex-direction: row;
 margin: 5px
 width: 500px
 height: 1000px
}

I still don't understand the preparation of the best practice.

it's my first try on frontendmentor.

Community feedback

Federico Nicoletti• 0

@FedeNicoletti

Posted about 1 year ago

Hi! I encourage you to read about CSS BEM. It can be helpful and provide you with a strong understanding and confidence about your CSS code. Feel free to adjust the order according to your preference, but ensure that you are consistent throughout the project. Maybe something like this: Display and Positioning (e.g., display, position, top, bottom, left, right) Box Model (e.g., width, height, margin, padding, border) Typography (e.g., font-family, font-size, color, text-align, line-height) Background and Borders (e.g., background-color, background-image, border-radius, border-color) Visual (e.g., opacity, z-index, box-shadow) Transition and Animation (e.g., transition, animation) Flexbox or Grid (if used)

Kamania• 170

@Kamania

Posted about 1 year ago

Job well done @BintangRP, just noted that the background color is different from what is provided on the design. I suggest add the following in your css

html, body{
background-color: hsl(212, 45%, 89%);
}

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord