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

Landing page using grid and flexbox

#bem#accessibility

@jaycgreenwald

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Did I use the aria attributes correctly? I need to learn a lot more about this.
  • I'm still fuzzy on the times to employ min-width, max-width, or width? It works, but could it better? More flexible?
  • JavaScript - is there a difference between accessing an element directly and creating a variable then referencing the variable?
  • What about getElementById versus querySelector? Anything else you can suggest is much appreciated.

Cheers!

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

Hi, Jason Greenwald! 👋

It's great to see you completing another challenge! So, congratulations! 🎉

Regarding your questions:

  • In general, you want to do some testing after to see whether everything is correct or not. Have you tried using screenreader on the site? In this case, it's good that you have added aria-label to the input and the social media links. But for the social media links, all of them say the same thing ("Share the news on Facebook"). Also, I would recommend removing the label because it has the input already have the aria-label.
  • For the width, I rarely use it. Also, I rarely use min-width either. For max-width, in this case, I would set a max-width on the container (an element that wraps the page content) to make sure that they won't fill the entire page. I think for the logo, it's okay to set a width since it won't cause any issue.
  • Variable in programming is used to store data. This way, you won't have to type the same code over and over again. You can just reference it by declare the name of the variable. In this case, I notice that document.getElementById("btn-rounded") is repeated twice. So, you might want to create a variable. This way, if you change the id of the button for some reason, then you just need to change the code on the variable itself. Then, everything will get updated.
  • I would suggest using querySelector. Also, I recommend using all classes begin with js- to select DOM elements within the JavaScript. Keep in mind, that only use the js- classes only for JavaScript purposes. This is important to separate the classes for CSS and JavaScript. This will make sure that if you change the styling, you don't accidentally destroy or disturb the functionality. This practice is known as separation of concerns.
// Example
const form = document.querySelector(".js-form");

Some suggestions.

  • 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.
  • Why does when I submit a wrong email, the input filled with example@email/com? I would only expect the warning message to appear.

I hope this helps! Happy coding! 😁

Marked as helpful

0

@jaycgreenwald

Posted

@vanzasetia Thank you for the thorough feedback! I really appreciate it. In answer to the last question about the "example@email/com" - I saw it in the design photo and thought it was needed. I didn't realize it was in the field to demonstrate the error caused by an invalid email. I'll take it out when I resubmit. Thanks again!

0
Vanza Setia 27,855

@vanzasetia

Posted

@jaycgreenwald You're welcome! 😉

0

Please log in to post a comment

Log in with GitHub
Discord logo

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