Landing Page | Feedback please?

Code Feedback
3

Hi Tech, beautiful work, but there are some things that I think you should improve:

  1. the .nav-link is kinda not centered 100% since you only set border bottom, my suggestion is that you should set a transparent border top to it.

  2. You made a scale animation for the .item, which is great, but, I don’t think it’s a good idea to also scale the text, only the image is enough, and the tile should maintain its position before and after the transitions (maybe the overflow hidden instead). Because as a user I would hate the contents jumping around when I hover on something.

  3. The input for email, I don’t like it to be centered by default.

  4. There’s always a horizontal scrollbar on your page which is annoying. It was caused by #header {width: 100vw;}, change it to 100% instead.

Regarding your questions:

  1. That was the “offset targeting” problem I mentioned before in the other thread. Simple solution is add a padding-top equals to or bigger than the nav height. My personal solution:
<ul id="navbar">
        <li><a href="#about-nav" class="nav-link">ABOUT</a></li>
        ...
 </ul>
...
<span id="about-nav" class="dummy-anchor"></span> 
<section id="about">...</section> /* Real about content */

CSS

.dummy-anchor {
  display: block;
  height: 50px; /* header height */
  margin-top: -50px; /* header height */
  visibility: hidden;
}

Basically this set the nav-link to targeting the invisible span (dummy anchor) which has the height equals to the header bar and is positioned right above the actual section. Anyway, this may fail the FCC test script since the nav-link ain’t targeting the actual section id but a dummy one. I just want to share this solution.

  1. I’m not quite unsderstand what’s the problem. Did you just set the header and footer to not display on smaller screen? Then what should we fix here?
3 Likes