Another Product Landing Page asking for feedback :)

Code Feedback
1

https://codepen.io/sidneyyin/pen/EzoMNd

I know this is not as good looking as others, and I still haven’t done a major component of the project, which is media queries. But can someone take a look to see if I am on the right track?

Thank you much!

2

@sidneyyin Quite nice looking project you have made.
When I click on “students” the word ‘student’ gets cut off by the menu. I think you need to set the sections to have 100% height, or 100vh.
You can also set body to scroll-behavior: smooth.
And of course, you need to get the media queries set up.
But you did a very good job.

3

Thanks!

I noticed that problem, too.

In #students I tried adding

height=100%;
or
height=100vh;

That didn’t seem to correct the problem. Or do you mean I need to add it somewhere else?

Thank you!

4

yin
yin1127×989 82.7 KB

I forgot to upload the image earlier.

Setting this looks a bit better.

#students {
height: 100vh;
margin-top: 50px;
}

What you can do is on the major divs add this during develoment phase.

border: red solid;

While you are positioning items, you will see where they line up, then remove the border once your are done.

1 Like
5

Thank you! Based on your suggestions, I have played around some more, added a media query, and made the background of the header transparent (also the logo) so that when the nav items become vertical, the header is transparent for the user to read better!

And here it is!
https://codepen.io/sidneyyin/pen/EzoMNd

Thank you!

6

Nice! One more tip. The price tiles probably can stay at a set size since they are so small. On certain screen widths they get squished.
I am glad that I was able to help you make improvements.

1 Like
7

Nice page. However, if you added a something like an image in the banner section such that words are not so plain; would have been better. Also the biography and video link are not working… Otherwise great page…

8

i am not a big fan of the nav bar, looks retro but otherwise looks good