Snezhana Petlova• 30
@snpetlova
Submitted
Narmin G. Mammadli
@narmingeybullayeva
All comments
@narmingeybullayeva
Posted
Alt Tag Usage:
The <p> tags are wrapped in <div> tags. While this is generally acceptable, you might consider using <p> tags directly for text content and avoid using unnecessary <div> tags.
Meta Tag Usage:
The <meta charset="UTF-8"> tag is used correctly. In HTML5, it is common to use the tag without a self-closing slash. In XHTML, the slash (/) might be used to close the tag. For HTML5, it is preferable to use <meta charset="UTF-8">.
HTML Tags:
For the <img> tag, self-closing tags are not recommended in HTML5. Therefore, it is preferable to write <img src="/assets/images/illustration-article.svg"> instead of <img src="/assets/images/illustration-article.svg" />.
Similarly, the closing slash (/) should not be used for <meta> and <link> tags.
CSS and Local Resources:
For the CSS link, <link rel="stylesheet" href="/styles.css">, you don’t need the self-closing slash (/).
Browser Compatibility and Performance:
You have used @import to include fonts. While this is a common practice, for better performance, directly linking the CSS file might be faster. @import can be slower to load.
Your code is generally correct. However, attention should be given to:
Correcting some closing and spacing issues to align with HTML5 standards. Importing fonts and style files more efficiently.
Using fixed height (height: 522px;) and width (width: 384px;) for .card-section may affect compatibility across different screen sizes and resolutions. Using min-height instead of a fixed height can provide a more flexible solution.
For .card-section__user-container, flex-direction: row; has been used, but the default direction for flexbox is row. If you are not using a different flex-direction, you can remove this line.
Marked as helpful
0- YunggBladez• 50
@YunggBladez
Submitted
@narmingeybullayeva
Posted
Overall, the project has some notable discrepancies when compared to the provided design:
Measurements and Layout: The dimensions of the project significantly deviate from those specified in the design. Although the project maintains a general resemblance to the design, the differences in measurements affect the overall alignment and presentation.
Font Usage: The fonts used in the project do not match the fonts specified in the design. This discrepancy impacts the visual consistency and alignment with the original design.
Font Sizes: The font sizes for both headings and content do not align with the measurements provided in the design. This affects the hierarchy and readability of the text.
To enhance the alignment with the design, I recommend revisiting the design specifications to ensure that dimensions, font choices, and font sizes are accurately implemented.
Marked as helpful
0
