Reponsive Page Built Using CSS Flexbox
Solution retrospective
♈Hello, Coding Community
This is my solution for the Stats Preview Card
Had a lots of fun building this challenge under record time!
I also got to know about Google page speed Insight, which helped me in page speed optimization. I Scored 97% on Google Page speed Insights! 🤯🤭😬
Layout was built responsive via MOBILE FIRST WORKFLOW
Feel free to leave any feedback and help me to improve my solution (or) make the code clean!
I made some custom tweaks to my code` CUSTOM TWEAKS..🌐 : I used Global declaration for variables :root{} Added smooth box shadow that roll out the shadow every 4s.
Also some hovering on the card while in desktop mode. 👨💻 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks Ill be happy to hear any feedback and advice!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Alexandra2888
Hi! Congrats for finishing challenge! Your solution is very close to the design! Here are some things I think you can improve:
- use semantic HTML,
- use figure for img,
- reset also psudo-elements' styles: *::after, *::before,
- use relative units instead of px (px are recommended mainly if you code for a newspaper or magazine),
- implement BEM naming convention, it will help you to keep your code cleaner, more organized, mainly when you will work with SCSS.
Happy coding!
Marked as helpful - @Scorpiojk
Very clean code! I'm using to :root for colors and some variables, hope keep this workflow. I recomend for cleaner hover animation to add the border before the :hover, you can made this whit the transparent color(eg: border: 2px solid transparent). This will prevent the change of size of the button. Hope to continue whit the code! Greetings!!
Marked as helpful - @sliyarli
You've done a great job with your HTML and CSS for the 3-column preview card component! Your code is clean and well-structured. Here are some specific tips to further improve it:
1 - Use Semantic HTML: Your use of HTML elements is good, but consider using more semantic HTML5 elements like
<header>,<nav>,<section>, and<footer>to provide better structure to your page. For instance, you can wrap your header and footer content in these elements.2 - Add a Favicon Description: In your
<head>section, you have a<meta name="description">tag, but it's missing the description text. Add a description to improve SEO and accessibility.3 - Responsive Design: Your design is already responsive, which is great! Continue testing it on various devices and screen sizes to ensure it looks good everywhere.
4 - Font Loading: You're using custom fonts, which is good for design. However, consider using the
font-display: swap;property in your@font-facedeclarations. This ensures that if the custom fonts take some time to load, the browser will use fallback fonts in the meantime, preventing a "flash of unstyled text."5 - Consolidate CSS: While your CSS is organized, some properties are repeated across different sections. Consider consolidating common styles into a single class and applying those classes to the appropriate elements. This reduces redundancy and makes your code easier to maintain.
6 - Button Styling: You're using buttons with different background colors and hover effects. Consider creating a CSS class for button styles and applying it to all buttons. This makes it easier to maintain and change the button styles consistently.
7 - Accessibility: Ensure that your images have appropriate
altattributes. They should describe the image content for users who rely on screen readers.Overall, your code is in good shape, and these tips should help you refine it further. Keep up the excellent work!
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