Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Coming Soon Page With Responsive Images And CSS Grid — No JS

P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! 🎉

ApplePieGiraffe’s questions for the community

Hey, everybody! 👋

I have to admit, this was a much trickier challenge than I thought! 🤔

I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).

I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.

I really wasn't sure about how to make this challenge responsive. 😥 Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).

Any help or feedback on this would be greatly appreciated! 😌

Happy coding, everyone! 😁

Community feedback

@trafiki

Posted

Hi, I;m curious, how did you achieve the email validation without JS. How did you make it display the error message and icon without js

1


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@trafiki

Hey!

The CSS-only form validation styles are done with this bit of Sass (mostly thanks to the :invalid pseudo-selector and CSS combinators):

.email-input {
    position: relative;
    height: 7rem;
    padding-left: 2.25rem;
    border: 1px solid var(--color-desaturated-red);
    border-radius: 10rem;
    background-color: rgba(0, 0, 0, 0);
    outline: none;

    &:focus:invalid {
        border: 2px solid var(--color-soft-red);
    }

    &:focus:invalid + img {
        opacity: 1;
    }

    &:focus:invalid ~ span {
        opacity: 1;
    }

    &::placeholder {
        color: var(--color-desaturated-red);
        font-family: 'Josefin Sans', sans-serif;
        font-weight: lighter;
    }
}

Basically, there a couple of elements that are always present but are just made invisible when the input element is not in focus or has valid input. :focus and :invalid detect whether or not the input element is in focus and has invalid input, and changes the opacity of those invisible elements accordingly.

1

@trafiki

Posted

Okay thanks, I see the selectors that made that possible now

0

Connor Z 5,115

@zuolizhu

Posted

Hey @ApplePieGiraffe, your solution is almost pixel-perfect as well 😁!

I think doing form validation without JS is actually a big improvement of accessibility (some situations such as JS just won't load or browser just not support).

I think there is a background pattern coming in the starter kit, the background is not just a simple gradient 😝. Also, you could put the background in main-wrapper to make the background responsive.

Since the page is a coming soon page (supposed no other content down below), so I think it make sense to stretch the picture on the right side to fit the height. Here is a shameless plug to my work 😎 I hope it helped!

Happy coding 🙌!

3


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@zuolizhu

Thanks for the feedback! 👍

I suppose allowing the image to scale would be a good solution after all!

Happy coding to you, too! 🙌

0

Roman Filenko 3,335

@rfilenko

Posted

Hey, nice work, but noticed a few issues:

  • check the responsivness, a scrollbar appears ~ 800 and higher, probably grid causes it;
  • on desktop there should be a bg pattern on whole left side;
  • on tablet would change some things to make it look great (bigger image, change layout a bit maybe, you can be really creative). Add some small adjustments to make it really appealing.😉

Cheers, Roman

3


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@rfilenko

Thanks for the feedback, Roman! 👍

I totally forgot about the background SVG not covering the entire left side of the desktop layout!

And I'll look into the other details, as well.

0

P

@LKA-LORIS

Posted

Hi ApplePieGiraffe,

I just updated my solution and I allow myself to share it with you :)

https://base-apparel-coming-soon-lka-loris.vercel.app/

Thank you

2


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@LKA-LORIS

Oh, hey that's very cool! 😀

I like the loading screen you added and the emoji favicon! 🤩

Good job! 👍

0

P
Anna Leigh 5,135

@brasspetals

Posted

While I'm not finished with the challenge yet, I am seconding @zuolizhu 's recommendation to put the background in the wrapper so that it covers the entire design (even behind the img). The gradient is actually layered with the background pattern on the desktop version, which took me a lot of eye strain to figure out! 😂

Kudos on getting the form validation to work without JS! I'll probably be coming back to this as a reference for mine. 👏

And yes...all the media queries. The responsive layout struggle with this one is real.

2


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@brasspetals

Thanks for the feedback! 👍

And the tip on combining background SVG with the gradient—I might have missed that one!

😃

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!