Skip to content
Submitted over 2 years ago

Responsive access page using flexbox

Nicolás Pírez•40
@NicolasPirezGit
A solution to the Pod request access landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey everyone! 👋🙂 I'm submitting my second project since starting out on this platform.

While I believe I managed to make it look decently similar to the original I'm not 100% satisfied with the end result.

I have a couple of questions I'd really appreciate you helping me out with:

  • The project is "responsive", if by that you mean it looks as it is supposed to on a 1440 * 900 desktop, 768 * 1024 tablet and 375 * 667 mobile device. But if I try to dynamically adjust the viewport it just looks awful. Have I misunderstood the assignment? Should I make it look good at ANY device's width and height?

  • Since I couldn't come up with anything else to properly place the 'Pod' logo and those dot patterns where they should be, I had to resort to absolute positioning. Same for the 'Request access' button inside the email form. Was there a better way to position those elements without using absolute positioning?

  • Due to previous feedback I've gotten from the community on my first project I decided to add HTML semantic elements to make the page somewhat more accessible. Can you find any major mistakes on my code regarding that aspect?

  • BONUS QUESTION: I wanted to keep this to three questions only but this one is just bugging me so much. When developing the mobile layout, specifically, when trying to add the mobile image as a background, I came across this weird behavior from CSS who consistently ignored the image's relative path. I tried like a million things but in the end I just had to give up and place a copy of the mobile image on the 'css' folder and only then it worked. Why would that happen? Did I mess something up with my files or is it like a CSS bug?

That will be all. Thanks in advance to anyone kind enough to leave a comment and hope to be back with another project really really soon. Happy coding! 🥳🎉

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Nicolás Pírez!

    About your questions:

    • As a front-end developer, you should make your website looks good at all screen sizes, including smaller, larger, and everything in between. If the website only looks good at some screen sizes, it is not a responsive website.
    • No, you don't need absolute positioning. I recommend making the <header> live inside the same container as the <section class="outer-content-box">. After that, you can try giving some white space between the <header> and the <section> with margin.
    • I am not sure about your "bonus question". Let me tell you what I think. Previously you were putting all the images in the root folder, then you are trying to use the image as the background image. Then, you failed. I wonder what you were trying before.

    For the HTML suggestions:

    • Each page should only one <main> element. Replace the <main class="site-access-container"> with a <div> element.
    • Swap <section class="outer-content-box"> with a <div>. <section> element is the element that should live inside the <main>.
    • Remove the word "logo" from all alternative texts.
    • Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (<img>) so the screen reader will pronounce it as an image.
    • Don't use <label> elements for the error message. Use one <p> element instead.
    • Give the <input> an accessible name or label by using aria-label. For example, aria-label="Email" to tell the users that it is an email input.
    • <figure> does not need to wrap every <img> element. Only use <figure> when you need to include a <figcaption>.
    • 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 don't add any information and serve only aesthetic purposes.

    Some suggestions on the 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.
    • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset

    I recommend learning to create accessible form validation. Accessible form validation means that the error messages get pronounced by screen readers, each input has a label, and using the correct type of input.

    How To Create Accessible Form with Boring Design?

    I hope this helps. Happy coding!

    Marked as helpful
  • Aldo Adabunu•310
    @KwakuAldo

    Your site isn't responsive, it doesn't look good on mobile. It really looks good on desktop based on the screenshot comparison with the design. You should make the mobile design as the jpg in the design folder.

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