Base Apparel - Coming Soon Page (Responsive) in HTML/CSS/JS

Community feedback

• 

  Arne•1,140

  @Dudeldups

  Posted about 2 years ago

  Hello 👋🏻

  The solution looks close to the design on desktop but let me point out some things you can improve:

  • The site is not responsive. You should always try to code a mobile-first workflow. Set the base CSS rules for mobile and then work your way up with media queries for larger screens.

  • When working with mobile-first approach, you should consider screen sizes from 320px and up. Since you worked desktop-first, your site acts very weird when the screen comes to mobile screen sizes.

  • Try to avoid importing the font via CSS. It's better to load it into your HTML, but even better considering loading time is to have it hosted inside your project and then importing the file (there is a download button for the google fonts on the top right of the page)

  • Font sizes should be declared using rem and not px. This way, the size will adapt for people who have set a bigger base font size in their browser.

  • Same goes for other sizes that you set like margin, padding or width. If you have set an element to have a width of 50px it is a fixed state. If the user has set a bigger font size, they probably want to see not only the text bigger, but also the other content

  • In your CSS you should avoid using ID selectors but rather use class selectors. ID selectors have a higher specificity and you may end up overwriting something that you didn't want, also it may cause unwanted errors that are hard to debug.

  • You are not using a modern CSS reset. By having all default element properties deleted, you can style everything the way you want and you don't have any unwanted styles in your design. https://andy-bell.co.uk/a-modern-css-reset/

  • Instead of using height: 100vh, you should use min-height. This way, the content can still expand the 100vh if necessary.

  • In your HTML, you have the <label> hidden by default and not a descernible text on it. Screen readers will not be able to announce to visually impaired users what the label reads. It's better to always have a label that can be read, even if you have to visually hide it with CSS because it's not supposed to be actually visible.

  • Input and label should always be connected and have a proper description. Use the for attribute on the label and the same word as the id on the input.

  • If an image is only decorative, leave the alt text blank like so: alt="". This way, screen readers will skip the image. In all other cases, always provide a descriptive alt text for images.

  • Don't use a div with an ID of header, use the <header> element

  • Instead of writing out the words in uppercase, use CSS to transform them to uppercase. Screen readers may pronounce the letters one by one which would be a bad user experience

  • And you should check your email validation. You can type in "a@a." and the email is validated

  It would be a good practice if you started this challenge anew. Since you seem to have developed many bad habits regarding your code, you should try to wipe them out quickly 😉

  If you have any questions, feel free to ask. Happy coding 👾

  33

  Marked as helpful