Newsletter sign up page

Community feedback

• 

  P

  Maren Ehlers•220

  @MarenOelixtownPosted 25 days ago

  Hey there 👋, you have found a responsive solution, even if it sometimes differs slightly from the design ;)

  A few points caught my eye:

  • As a small thing I noticed there is a missing ‚meta-description‘ in the head-tag (summarizes the content of an HTML document  for SEO – it’s a basic meta-tag).

  • There are different ways to implement the javascript-file in the document, but if you prefer using the option with ‚defer script attribute‘, it belongs in the head of the html-document. FrontendMentor-Intro

  • It is recommended using only one h1-heading. Heading elements

  • A label element should be used to provide a label for an input field and is not ideal for displaying error messages. Error messages are normally displayed by another element, such as p or span. A solution could be the aria-describedby=‘emailerror’ at input: This links the input field with the error message and ensures that screen readers can read the error message in connection with the input field. Blog-Tip

  And here are some ideas for CSS:

  • In the css you mix camelCase with kebab-case for the class selectors. Kebab-case is generally used as the standard in the CSS community.

  • You also use IDs as class selectors. IDs have a very high specificity in CSS, which makes them difficult to overwrite. If an ID selector is used, the style will only be overwritten if a rule with even higher specificity or !important is used. This leads to unnecessarily complex and difficult to maintain CSS. IDs are only permitted once in HTML, which makes them unsuitable for repeated style assignments. Classes, on the other hand, can be used multiple times and allow the same styling to be applied to multiple elements. This keeps the CSS code leaner and better structured.

  • Perhaps you would like to have a look into BEM to make CSS easier to read. https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

  I hope it inspires you...all the best!

  Marked as helpful

  1