Skip to content
Submitted about 4 years ago

Just HTML, SCSS and Vanilla JavaScript

Agata Liberska•4,075
@AgataLiberska
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any feedback on the project is welcome, but I also have a question about semantic HTML.

I initially planned to use CSS grid to position elements in desktop layout, but to achieve that, I had to pull the image container outside of the <main> element. I wasn't happy with having just a random <div>, so I thought of changing it to <aside> but I thought that it wasn't the best choice either as it literally has no content in it.

I ended up just positioning the image absolutely which I think is the simplest solution here and I'm happy with it, but would love it if someone could comment on my <aside> problem, just so I know for the future :)

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Dave•5,295
    @dwhenson

    hey @AgataLiberska amazing work! 👍 This looks total great and pretty much pixel perfect too - I can never get that right.

    Nice approach with the absolutely position div. I'm no expert, but I think that is more semantically correct than an aside here, which should really contain content "only indirectly related to the document's main content", which isn't really the case if you are using a background image.

    I can't really add much value to your work but here are some, very small, suggestions you might like to consider:

    1. Design-wise - as I said it looks great to me, my only small suggestion would be to add a max-width on the input so that it doesn't stretch too wide on smaller screens?

    2. My only other suggestion would be to add the novalidate attribute through the JavaScript rather than in the HTML. That way if the JS fails for any reason you can still take advantage of the in-built browser validation.

    Both these are really small points!! Really like what you've done here. Cheers! 🙌

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey there, Agata Liberska! 👋

    Just wanted to drop in to say good job on this challenge! 👏 Your solution scales up/down very nicely (something that I had a little trouble with when I worked on this challenge)! 😆

    One idea I had about your challenge with the layout is that it's very easy to overlay elements with CSS grid, so you could have put the image inside the same container as the rest of the main content of the page and then wrapped that container and the header in a grid container. Then, you could make the main content full screen and simply place the header in the top-left corner of the screen and overlay it over the main content. IDK it that's a best practice, but it's a thought. 😅

    Keep coding (and happy coding, too)! 😁

  • Sven•295
    @Sven72

    Hi @AgataLiberska, maybe ARIA-Label is what you are looking for. (In case you don't want to use randomly div's due to accessibility reasons.) If so, I found this explanation to ARIA, which is helpful: https://stackoverflow.com/questions/22039910/what-is-aria-label-and-how-should-i-use-it And especially this MDN article about img:role ttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img Cheers, Sven

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