Feedback on my Poduct Landing Page

Code Feedback
1

Hi all, please provide some feedback on my project… Greatly appreciated.
The project is at:

2 Likes
2

Also W3C validator gives me an error from the icon tags I copied from fontawesome.com
Are they wrong?

3

Imo, you could make the background a little bit warmer and try something f.e. like shadow @ the Logo

4

Thanks @GeronimoRoeder, going to try it now quickly…

5

How’s it looking now?

6

Now I’m liking it a lot more. :slight_smile:

1 Like
7

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      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). (be wary of duplicating property: value: pairs)
      (The one for HTML misses things which is why I recommend W3C)
  • 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

An observation, with no section headers and lorem ipsum text the user cannot tell where they are when clicking on a nav link.

The only think that I see from W3C is the invalid use of the width attribute which you used on only one i element.

8

Hi @Roma,

I didn’t use body tags in codepen, I only used the body selector in CSS, which ones are you referring to, I’m confused…

I changed a few things after posting my codepen and checking W3C, but corrected them again. Also fixed the CSS duplicate.

The HTML5 validation for email is there. Not sure what you mean…

I got the i tag error meaning now… Was a little late for me when I tried to figure it out, but you made it clear for me now, thanks :blush:

9

I’ve been trying to get the page to land on specifically the h2 heading, which it does, but it is then obscured by the nav bar. Is this a flaw in HTML or CSS? I tried to google how to make the href land on a specific place to make the h2 visible, but didn’t find a solution.
Please advise about that…

10

In my post I said, codepen " only expects the code you’d put within the body element in the HTML editor. (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 ’ box".
The link to fontawesome would be in the head element. That’s what my comment was referring to.

If the email field is left blank the user should get an error message. This does not happen on your page. You learned how to do this when you coded the survey form.

It’s not a flaw. Remember, computers are dumb. The page is going where you tell it to and as you noticed, it’s covered by your navbar. You need to take into account the size (height) of your navbar. Do a search for scroll-padding-top and see how that can help you.

11

Ah, ok, I understand everything you explained, thanks @Roma. Appreciate your guidance… Will fix the errors.

12

I got it! I just used padding-top in CSS, now it shows correctly when you click on the nav links… Was that the right solution?

1 Like
13

Yes @ingwenya. That works too. Good job!

1 Like
14

Thank you @Roma . Learning alot… Practice makes perfect!

1 Like
15

I like the page , well done.

1 Like
16

Hi @kushuk, thanks so much! I added a modal image to the page with JavaScript. Check it out again. My first try at JS on a web page…

1 Like
17

That insta hover is amazing!

1 Like
18

Thanks alot @wavyhix!

1 Like
19

Yes Ingwenga, this is GOOD responsive web page .

20

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