Skip to content
Submitted about 2 years ago

Clipboard Landing Page made with Flexbox

Jean Fischer Dirimasi•70
@jfcode101
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Working on this project was fun and a little challenging. Overall, I tried my best to make it look as close to the original design as I possibly could given the fact that I didn't have the Figma or Sketch original designs. If you have any feedback in mind, please feel free to share it with me. Thank you.

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    BODY MEASUREMENTS 📐:

    • The width: 100% property for body is not necessary. because it's a block level element which will take the full width of the page by default.
    • So feel free to remove width: 100% style rule from body this will help you to write efficient code and makes your code more reusable.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, Jean Fischer Dirimasi! 👋

    Here are some suggestions for improvements.

    • Do not wrap each <img> with <figure>. Only use <figure> if you also use <figcaption>.
    • Use <a> with download attribute for the download buttons.
    • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
    • For your information, decorative images are images that do not add any information and serve only aesthetic purposes.
    • The list inside the <footer> should be a list of links, not just text. The same goes for the social media icons, they should be links.
    • Remove width: 100% and height: auto from the <body> styling. Those are already the default styling.
    • Specify the font-size on the <body> styling. Do not specify it on the <html> element.
    • Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
    • Don't use id selectors for styling. There are two reasons for not using ID’s to style content:
    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.
    • Learn more — What the ID attribute is REALLY for

    I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

    If you use the desktop-first approach, then you need to write more CSS to simplify the layout (usually into a one-column layout).

    The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

    Learn more — Responsive design ground rules | Polypane

    I hope this helps. Happy coding! 😄

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