Product Landing Page With Technical Issues

Code Feedback
1

Hi, I finished my Product Landing Page and I would very appreciate, if someone gives me feedback about the code part. =)

Designwise I know it is a disaster, but i am not focusing on it right now. What I wonder is about my coding; is it clean enough? How should i tidy it better ? Basically questions like this…

There is a problem that annoys me so far; when I narrow the screen width and click the hamburger button sometimes it does not get clicked or does not run the js functions. Can someone help me fix it please?

Btw I’m new on here so big, first thanks to all devs on FCC for creating such an awesome community. =)

2

@ozukoc WOW! That looks really good. One thing I will say is that on codepen you don’t need to have the html tag, or the head tag, or the body tag. You can just put what would be inside of an html documents body on codepen. Otherwise, your project looks really good. I had no problem with the navbar and the page looks nice and simple. I really like it. Happy Coding! :smile:

1 Like
3

Thank you for your feedback :smiley: I am writing in VScode and then copying to Codepen. I didnt had courage to remove them just left there to prevent crashing :smiley:

If you click the hamburger icon enough you will see that there is an issue, but I could not understand it. It is like there is a cooldown for functions to run :smiley:

Hope someone figures it out =)

4

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

  • Run your HTML code through the W3C validator.
    • There are a couple of little HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens.
  • I see what you’re saying regarding the nav’s hamburger menu. It’s hard to replicate and those are the hardest bugs to squash.
1 Like
5

Thanks for feedback. I corrected some of my mistakes like making iframe element responsive, so there is no overflow on Y axis on smaller screens, and i did get rid of <br> element and instead i used display:block; . I also added alt tag to the img element as mentioned in the W3C validator. Thanks again for the tips. :slight_smile:

1 Like
6

If you click the hamburger icon enough you will see that there is an issue, but I could not understand it. It is like there is a cooldown for functions to run

I see what you’re saying regarding the nav’s hamburger menu. It’s hard to replicate and those are the hardest bugs to squash.

I solved the problem while I was trying to create another hamburger menu with javascript. I should have added another click event listener to hamburger menu for both the wrapping div and the hamburger line as well. If ı add just one of them it will not get triggered when I click just the wrapping div because lines are also position:absolute I will fix it in this project also. I’m just too excited to solve this alone and decided to write the solution here just in case someone needs it someday.:smiley:

Edit: To be more Spesific I am adding the code

window.onclick = function (event) {
    if (!event.target.matches(".hamburger, .lines")) {
      if (navLinks.classList.contains("open")) {
        navLinks.classList.remove("open");
        links.forEach((link) => {
          link.classList.remove("fade");
        });
      }
      return;
    }
  };