P
Mayank Arora• 470
@mayankdrvr
Posted
Congratulations @corolaweb023 for completing this challenge. Your design matches the solution very well.
Here are a few observations-
- Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
- Below 400px width of screen, the text and card gets partially hidden, the text does not wrap and the image does not resize. Maybe, you can make it more responsive by setting the maximum width of card to be upto 100% of width of its parent container. See if using this CSS property in image styling can make the image more responsive- max-width: 100%;
- Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
- Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
- Google Fonts provides the option to load fonts via <link> tags or an @import statement. The <link> code snippet includes a preconnect resource hint and therefore will likely result in faster stylesheet delivery than using @import version. Importing google fonts in the html head section is a good practice instead of importing them in the css file-
<head>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&family=Outfit:wght@400;700&display=swap" rel="stylesheet">
</head>
Awesome solution and keep it up.
Marked as helpful
1
corolaweb023• 20
@corolaweb023
Posted
Good feedback @mayankdrvr. This will help me make my solution better.
1
