Skip to content
Submitted over 2 years ago

Fylo Landing Page (CSS Grid & Flexbox ❤✔ )

bem, accessibility
Ezequiel•1,250
@3eze3
A solution to the Fylo landing page with two column layout challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This challenge has been very good to practice a lot, especially for me, with the mobile design, and the CSS grid, I had some delays in terms of the measures of each section, but I think I had a good result with this challenge, and you know that any improvement or any suggestion to improve my code you can tell me in the comments. Happy coding ❤

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Ezequiel Córdova Sotomayor! 👋

    Alternative text for the logo should not contain the word "logo".

    "Get early access today" should be <h2>. It is not a sub-section of the previous section.

    Use aria-label to label the <input> since there is no visible label on the design.

    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! 😄

    Marked as helpful
  • Tryt4n•940
    @Tryt4n

    Firstly in your header navigation aria-label is not needed, because element nav explain itself what it is. Nice though with aria-hidden with img or label without text. Another thing with your footer. a elements with email phone etc. could have something like this: <a href="tel:+48123456789">+48 123 456 789</a>

    <a href="mailto:example@example.com">example@example.com</a>

    And with that if you click on that element it will automatically open application for phone calling or email etc. In overall it's good.

    Marked as helpful
  • FETYagency•1,280
    @FETYagency

    hey, it a nice attempt , i didn't read the code but i will tell you what i can see your webpage need alignment improvements at the 800px until what's less also there are some texts are overflowing out of the containers and to solve this you can go with overflow-wrap though it is not recommended and if you want to get advaced you can use the clamp function and the @container and the container width. i wish i helped even a bit, have fun brother ;)

    Marked as helpful

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