Skip to content
Submitted over 4 years ago

Responsive coming soon page with Grid/JavaScript

tediko•6,700
@tediko
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello👋!

I found it good to use the grid and its multidimensional system in this challenge. I've problem with background on higher than 1400px resoultions. I know that design was projected to that width but i tried to find solution that also provide good look to higher res devices, but I didn't make it. My other question is about .message__hero images. I put both of them in HTML with img tag and disable one of them on mobile devices and vice versa. Would it be better practice to put them in CSS as background? And last but not least. While building my form invalid message I thought about screen readers users. By removing default alerts from the input and inserting own styles for invalid email input I guess they won't get the message. What should I add then?

In JavaScript I wrote function to validateEmail input and display error on screen. Also added listener to form itself to prevent submiting form on key press (enter) and while input is empty/invalid.

Thanks! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Emmilie Estabillo•5,600
    @emestabillo

    Hey Tediko, great job with this project!

    • For your image question: my opinion would be to use the background property for this case, only because I think the woman image is decorative rather than directly meaningful to the sign-up form. You can use media queries to handle the image change. Going forward, if you use the img tag, you can use srcset as stated here.

    • The error message for the form is causing a 'jump' of other contents. I would look into visibility or opacity to keep the error hidden. This way, they are already occupying space initially, rather than inserting it with display: block/none

    • Also, you may be able to do away with some of the containers in your html. There are barely any styles applied to .message and .message__container, and whatever is there can be added to .message__wrapper.

    Hope this helps!

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, tediko! 👋

    Good job on another challenge! I like the little animation you added to the heading when the page loads! 😄

    I had some trouble with the position of the image on the page when I did this challenge, too! If I were to do it again, I'd suggest allowing the image to maintain 100% of the viewport height and simply set object-fit to cover so that it doesn't distort when the screen is resized (or allow the width to grow with the height, too). As emestabillo suggested, you can use CSS background images (in which case you should set background-cover to cover instead, I guess). The image will be cropped when the available space decreases, but at least it'll cover the entire space of the page it occupies. 😉

    Keep coding (and happy coding, too)! 😁

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