Skip to content
Submitted 11 days ago

in this project i tried to implement BEM techniques

Ifechukwu Osakwe•60
@Icode-designs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

i like how responsive it is and how easy it was to achieve that, however there is still work to be done and i know.

What challenges did you encounter, and how did you overcome them?

it was mostly smooth sailing as this project was right at the edge of my comfort zone

What specific areas of your project would you like help with?

code based reviews, how improve my codes and make them cleaner, how to improve my BEM naming techniques, how to write better css and media queries

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 10 days ago

    Hi, @Icode-designs

    I checked out your solution and I have some thoughts:

    • Width Properties on body and Block-Level Elements: There’s no need to set max-width: 100vw on body or max-width: 100% on block-level elements, as they naturally expand to the full width of their container. You can safely remove these styles.
    • Structural Elements: Good use of header and footer! Since section tags and .buttons represent the main content, they should be wrapped within a main element for semantic structure.
    • Content Grouping: Consider grouping "Keep track of your snippets," "Access Clipboard anywhere," "Supercharge your workflow," and "Clipboard for iOS and Mac OS" into individual section elements. The current .info, .brands, .outro divisions and .buttons div (which isn’t associated with any section) could be organized more meaningfully.
    • CSS with Sass/SCSS: I noticed you’re following the BEM naming convention in your CSS. Switching to Sass/SCSS could streamline your styling with nested selectors, variables, and mixins. Also, instead of linking fonts in the HTML, you can import them directly into your CSS/SCSS file for a cleaner structure.
    • Semantic HTML: To improve semantics, consider replacing generic divs with more descriptive tags like hgroup, article, etc., to better convey the page's content.

    Hope this helps!

    Marked as helpful
    0
    Ifechukwu Osakwe•60
    @Icode-designsPosted 9 days ago

    @huyphan2210 thank you, your review helped a lot

    0

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