@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
-
Add a
max-width
to the component's container to prevent it from warping on larger screens. -
Apply the following code to have each side take up the equal amount.
Code:
.card > * {
flex-basis: 50%
}
-
Increase the
font-size
of all the text (in desktop view) to better match the FEM example. -
The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.
-
The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
-
Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
- A lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful
@filecc
Posted
@vcarames thank you, specially for the CSS reset. Helps a lot!