A new set of eyes on the project

Code Feedback
1

Hello again fellow Campers!
I am once again asking for your feedback regarding on my work on the Product-Landing Page project. Any form of feedback will be greatly appreciated. Thanks for your time and have an awesome day.
Peace! : )

2

Your page looks good @stravse. Some things to revisit;

  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (Be wary of duplicating selectors as it can make maintenance a nightmare)
      (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    If you want to paragraphs then use two paragraph elements
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    You learned to do this when coding the survey form
3

Thanks for the reply.

Not really familiar with Codepen so thanks for the tip.

Already removed the <br> and replaced them with <p>. Is <br> simply not used due to accessibility reasons? When do you usually use it?

and lastly is <input type="email"> not enough for the email validation error?

4

Scroll up in the provided link and it explains the use of br although even then there are alternatives as shown in this quick pen.
I wanted to point out that there was a better solution to the way you were using it.

What did you do in the form project to give the validation error when the name or email field was left blank by the user and the submit button was clicked?

5

Just checked through the User story and the email form isn’t required it just need to check if the text placed is an email address.

Maybe since it is the only form in place I need it to place it as required then. Will go ahead and do the changes real quick.
Thanks for the reply! :grinning:

6

Overall this is a very nice job. Just wanted to point out one thing:

.button {
    outline: none;
    ...
}

This is not good for accessibility, in fact it is very bad. You should never get rid of the keyboard focus indicators. And I would also encourage you to give the outline property a custom style to make it stand out more since the default most browsers provide are terrible.

1 Like
7

I’m not sure which project user story you mean but;
For the prod landing page, user story #10 says
The #email input field uses HTML5 validation to confirm that the entered text is an email address.
(There is not test for this though there should be. One day I’ll get around to writing an error and the fix)

For the survey form user story #6 says
If I enter an email that is not formatted correctly, I will see an HTML5 validation error.

Don’t think of it as an email form. Think of it as a form that has an input field for an email address.

8

Yeah I meant the user story for the Landing page

I should have thought it logically I mean the user shouldn’t be able to submit a blank email text for mailing stuff.

1 Like
9

I just did the tab thing and I see what you mean. Must have been a trial and error stuff I tried to remove the borderline but somehow I placed border: 0; and might have forgotten to remove it after the fix. Will go ahead and do some cleaning for the CSS side.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.