Skip to content
Submitted about 1 year ago

Reponsive Page Built Using CSS Flexbox

Toluwalase•160
@Tolux001
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Alexandra•580
    @Alexandra2888Posted about 1 year ago

    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
    2
    Toluwalase•160
    @Tolux001Posted about 1 year ago

    Hello Coder @Alexandra2888

    Thank you for taking your time to reply my challenge and for the very helpful suggestions

    Happy Coding!

    1
  • scorpio•170
    @ScorpiojkPosted about 1 year ago

    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
    2
    Toluwalase•160
    @Tolux001Posted about 1 year ago

    Hello Coder @Scorpiojk

    Thank you for taking your time to reply my challenge and for the very helpful suggestions

    I looked into the hover animation and the suggestion was Gold

    Happy Coding

    1
  • Shahin Aliyarli•680
    @sliyarliPosted about 1 year ago

    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-face declarations. 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 alt attributes. 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!

    1
    Toluwalase•160
    @Tolux001Posted about 1 year ago

    Hello Coder @sliyarli Thank you for taking your time to reply my challenge and for the very helpful suggestions

    1
    Shahin Aliyarli•680
    @sliyarliPosted about 1 year ago

    You're very welcome, @Tolux001, feel free to reach out always!

    1

Please log in to post a comment

Log in with GitHub

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