Skip to content
OverviewSolutions
14
Comments
16

chamackstone

@yannmarcDouala, Cameroon470 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • chamackstone•470
    @yannmarc

    Hello, my friend! You've been doing an excellent job so far. I would like to offer you a few pieces of advice that I believe can be helpful.

    • Your <footer> .info of section .two and your section .four doesn't look good on mobile. By employing media queries, you can enhance the mobile optimisation of your work and elevate the user experience to new heights. Here you can maximise the full potential of your flexbox

    You can use the article from Fedmentor to lean more about media-queries

    Marked as helpful
  • chamackstone•470
    @yannmarc

    Great job, your solution is lit 🔥

    • Let your countdown timer be initiated and controlled by the server, this will make it more independent of the client's system clock. This helps prevent discrepancies that can occur due to variations in the client's device time or potential time zone differences. It provides a more reliable and consistent countdown experience for all users.

    Happy hacking, You rock! 🤘🏾💯

    Marked as helpful
  • chamackstone•470
    @yannmarc

    Great job dude 💯✨ Your solution rocks 🤘🏾 below are few recomendations to make it a banger:

    • Do well to prioritise the mobile-first approach for your frontend projects.

    • Your component-container class doesn't look good on mobile, here's a quick fix to make it awesome 😉 @media (max-width: 424px) { body { padding-inline: 24px; } .component-container { width: 100%; } } to make it more subtle on mobile viewports.👌🏾

    • To ensure optimal display on desktop and tablet views, it is recommended to utilise the max-width property instead of setting the width to a specific percentage, such as width: 50%. This approach ensures responsive and adaptable rendering across different screen sizes.

    Overall your code is neat, well connected, a masterpiece. Keep hacking, you're amazing!

    Marked as helpful
  • chamackstone•470
    @yannmarc

    Hi friend 👋🏾 Great job 💯

    Let me provide you with a comprehensive explanation to address your concerns regarding the use of the <main></main> tag alongside the <body></body> tag.🤓

    • In HTML5, the use of semantic elements is highly encouraged as it helps convey the structure and meaning of a webpage to both browsers and search engine crawlers. The <body> tag serves the purpose of indicating where the visible content of your website begins. It encompasses all the content that users can see and interact with, such as headings, paragraphs, images, and other elements.

    • On the other hand, the <main> tag has a specific semantic meaning. It is used to mark the primary or most important content of a webpage. By using the <main> tag, you are explicitly telling the browser and search engines that the content enclosed within it represents the core information or focal point of your webpage.

    • By employing the <main> tag, you are not duplicating the functionality of the <body> tag. Instead, you are providing additional information about the structure and significance of your webpage's content. This can be beneficial for search engine optimization (SEO) purposes, as it helps search engines understand and index your content more accurately.

    Hope you find this useful. Happy hacking, you're amazing!

  • chamackstone•470
    @yannmarc

    Hello there! Great job on your solution! I'd like to provide some feedback to further enhance your work:

    HTML Semantics: Consider adding a description to your images using the alt attribute. This will not only improve the accessibility of your page but also provide alternative text for users who may have trouble viewing the images. You can use the syntax alt="alt text" to achieve this.

    Container Styling: Instead of using a fixed width for your container, I recommend using max-width: 250px to ensure that it remains within a reasonable size on smaller viewports. Additionally, setting width: 100% will make your container card more responsive, adapting well to different screen sizes.

    Body Section: To create some breathing space around the corners on smaller viewports, consider adding padding-inline: 24px to your body section. This will introduce a bit of white space and improve the overall visual appeal.

    Container Image: To ensure that the image within your container fits the width of its parent, you can apply width: 100% to the container img style. Additionally, adding margin-inline: auto will centre the image horizontally within the container.

    By implementing these suggestions, your solution will become even more polished and user-friendly. Keep up the great work! 🤓

    Marked as helpful
  • chamackstone•470
    @yannmarc

    Hi @sorrasak-code!

    Great solution 🎊

    • You should try and follow the mobile first approach and use more of (min-width: breakpoint)
    • Also try to reduce some properties as the breakpoint decreases, .container { padding: 1.5rem }; can be reduce on breakpoints < 370px to make the spacing more mature.
    Marked as helpful
View more comments