Latest solutions
Latest comments
- @Desenvolvedor-DavidDanielAlves@ShrixJs
good use of semantic html, its better for class names to be in english, not responsive from around 1200px to 500px.
- @Horizon-87@ShrixJs
-
There are big differences between the solution and the design:
- the width of the card is much smaller
- spacing is not consistent with the design
- fonts are not the same
You can view the spacing in figma by selecting an element with ctrl click and then hold alt (if you are interested about more figma details frontend mentor has this article
-
card is not responsive on some resolutions
- this is mainly because you dont have a set width, and you are using dynamic css units for spacing, where the spacing is expected to be consistent.
-
html can be cleaned up a bit:
- indentation needs to be fixed, unnecessary inline styles, good job about adding semantic tags there are some that could be improved for example learning h3 and date h2 could be a p as they are not really titles
-
- @IlyosbekKarimovWhat are you most proud of, and what would you do differently next time?
I am mostly proud of the style and I would like to change it for modern test cases
What challenges did you encounter, and how did you overcome them?I have encountered style problems and I have fixed them. Just can't centered the class but I have found solution so that is good now
What specific areas of your project would you like help with?I would like help with styles mostly because I don't understand much about it for now and I should learn front-end more faster. I have encountered style problems in vue.js too
@ShrixJsThe solution has some differences from the provided design, for example the qr card paddings are not matching the ones in the design,font sizes seem to be bigger and have color mismatches with the ones in the design,the QR image is smaller.
Steps you can take to improve this:
-
You can check the exact spacings in figma by clicking a part of the design with ctrl and after selecting you can hold alt and hover toward another element to see the value of the space between the two elements. Then you can apply the appropriate spaces using padding for example.
-
Regarding the fonts you can search for your font that is specified in the design system tab (in this case the Outfit font) in the googlefonts website https://fonts.google.com/, once you have your font you can add it with a link tag that is provided with the font or download the fonts and add them to your project where you can declare and import them using the @font-face css rule (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
-
You can also do some minor improvements such as using consistent background-color values rather than mixing HSL and HEX code values and for better maintainability you can also move the styles to a separate sheet and add them to the html via a <link> tag.
Besides this the html structure looks good with semantic tags and is responsive. Good job keep it up and happy coding!
-