Skip to content
Submitted over 2 years ago

Responsive Fylo landing page with two column layout

Jhon Michael Manik•30
@jhonmicc
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Please give feedback on my result landing page.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hello there, Jhon! 👋

    Congratulations on completing this challenge! 🎉

    I have some feedback on this solution:

    • Accessibility
      • The first section of the page should not live inside a header. The only element that lives inside the header is the nav element. So, the first section should live inside a main landmark. Usually, the first section of the page is called hero section.
      • Wrap all the section elements with main landmark.
      • By doing those two things, the document or page structure should look like this:
    <body>
  <header>
     nav element lives here...
  </header>
  <main>
    all section elements live here...
  </main>
  <footer>
      the last page content (e.g secondary nav, address, logo, etc)...
  </footer>
</body>
    • The alternative text for the logo should not be hyphenated. It should be human-readable.
    • Also, alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, etc). It's already an image element so the screen reader will pronounce it as an image. 🙂
    • <button>Get Started</button> Always specify the type of the button. In this case, set the type of them as type="submit". It's going to prevent the button from behaving unexpectedly.
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
    • Not all images need alternative text. These images are known as decorative images. So, for any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only except the logos.
    • <h4>Kyle Burton</h4> Don't skip heading level! Use h3 instead. Heading tags can be used by users of assistive technology to navigate the website. If headings are not in a logical order, those users might get confused.
    • Add aria-label to each social media link. Use the social media platform name as the value of the aria-label="Facebook".
    • The logo inside the footer element is also as important as the logo inside the header.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
    • Styling
      • On 769px width, the first ul and the second ul element are too close to each other. I would recommend adjusting the breakpoint for the media query.
      • I would recommend writing the styling using the mobile-first approach. It often makes me write less code.
      • There's no error state for the email form. You can create form validation with only HTML and CSS. CSS Tricks has a great blog post about it. Also, add required attribute to the input element to prevent the user submits an empty value.

    I hope this helps! Happy coding! 😁

    Salam kenal dari Lampung! 👋

    Marked as helpful
    0
    Jhon Michael Manik•30
    @jhonmiccPosted over 2 years ago

    @vanzasetia Wow that's such great feedback for me, I got much knowledge 🙏. Thank you, Salam kenal dari Malang! 👋

    1
  • Samarth Mali•760
    @SamarthMaliPosted over 2 years ago

    Congratulations on completing this challenge! 🎉

    0
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    hay! Jhon Nice work

    0
    Jhon Michael Manik•30
    @jhonmiccPosted over 2 years ago

    @Crazimonk thank you, I appreciate it

    1
  • Abdo Achhoubi•330
    @abdoachhoubiPosted over 2 years ago

    Great work! Visually... But technically you still have some CSS errors that needs to be fixed, and also some accessibility issues...

    0
    Jhon Michael Manik•30
    @jhonmiccPosted over 2 years ago

    @abdoachhoubi thank you man, I will see and fix it later

    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