Landing Page Feedback - Crazy Kettlebells

Code Feedback
1

Hello everyone! My first post here on the forum. I wanted to share my landing page here.

https://codepen.io/segerkers/full/ZEBEaZE

What do you think of it, what could be improved? Does it work well on your devices?

1 Like
2

Hi @segerkers !

Welcome to the forum!

I think your page looks good.

You have a few errors in your html. Run your code through the html validator

You have an error in your css. Run your code through the codepen css analyzer.

I might remove the underline here because the styling makes them look like links.

Screen Shot 2021-01-30 at 10.48.17 PM
Screen Shot 2021-01-30 at 10.48.17 PM1090×636 54 KB

I would consider adding smooth scroll to the page.

html {
  scroll-behavior: smooth;
}

I would also add the cursor pointer for the button in the form.
{cursor: pointer;}

Keep up the good work!

2 Likes
3

Hi, Seger!

Amazing work! I really like the look of the page. It’s colourful, fresh and easy to read and understand.

I agree with @jwilkins.oboe that the underlining makes it look like it’s meant to be a link. I tried to click them :smiley:

The newsletter submission form doesn’t fit the overall look of the page. The text box and button are too small. Additionally, if you can make a stylized button that would make it even better.

And lastly, the Email button on the bottom doesn’t work for me. I know it’s supposed to open an email client, but it leads me to an empty page saying: “This content is blocked. Contact the site owner to fix the issue.” Maybe because I don’t use an email client, I don’t know. Anyway, I think it’s a good idea to have either an email form or have the email address on the page so I can copy it.

:slight_smile: Good luck!

1 Like
4

Thanks a lot! I will work on this.

5

Thank you very much! I will resolve the issues you found!

6

Welcome to the forums @segerkers. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address. (This is HTML5 so you’ll want to adhere to the standards)
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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). (You want to keep selectors together)
    • (The one for HTML misses things which is why I recommend W3C)
7

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