Product Landing Page by Eklavya

Code Feedback
1

Hi Everyone,

I have created a product landing page as part of my assignment.

I was hoping you guys would be kind enough to review it.

Here is the link https://codepen.io/eklavyasharma/pen/LYEwbNM?editors=1100

Note: I am confused / unsure of how media queries work. Would you suggest what code should I use to to make this landing page responsive?

Thank you so much.

3

Hi, Eklavya.

This is good work as a beginner. However I will give thorough feedback of the project which may include many mistakes and many will be very obvious but please do not discourage, your project is far better than my first.

First of all I woul like to clear your confusion regarding media queries. Initially, I was also very confused by these media querries and somehow scared to use them. But then I find easy unerstanding of it. I hope this will help.

1. Max-width : 600px : It means that from 0 to maximum of these given width (600px in this case) below define styles will be applied. Which you define in curly brackets {…} .

2. Min-width : 600px : It means that from this minimum width to infiinity width these below given styles will be applied. Which you define in curly brackets {…} .

To conculde now :

  • max width says that only from ( 0 to some given maximum width ) { these styles will be applied }

  • min width says that ( after this minimum width ) { these styles will be applie } and not before this minimum defined width.

Now about giving feedback to your landing pag project. Your project has passed all tests which is really good.

only issue with this page is in it’s Header. Our header is very congested andd not using up space properly. Also it is not responsive. I will explain why your media querries are not working.

You have given media querry that :

@media screen and (max-width: 600px){
  #header {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

Here you are saying that from 0 to maximum 600px width you want your header components to be show up in Column. So let’s see what that means.

Here is your Header component:

<header id="header">
      <div id="head" class="holder">
          <div class="logo-wrapper">
              <img id="header-img" src="https://climatelaunchpad.org/wp-content/uploads/2017/02/logo-for-random-dude-01-Copy.png" alt="logo"> 
          </div>
          <nav id="nav-bar">  
              <ul class="menu">
                  <li><a class="nav-link" href="#update">Subscribe</a></li>  
                  <li><a class="nav-link" href="#about">About us</a></li>
                  <li><a class="nav-link" href="#video-section">Features</a></li>
                  <li><a class="nav-link" href="#what-we-do">What we do</a></li>
                  </ul>
              </nav>  
      </div>
  </header>

As you know that flex-direction : column means all the child of that component will be display in column. But here is the catch you may have missed, It means that all the Direct Child of that component will be shown in column. Here as you can see Id #header has only one Direct child which is Id #head. So, it did not work.

Here is how you can achieve what you are trying to achieve.

First of all you need all the navlinks to be in column. which is contained by Class .menu so you should apply flex-direction : column on .menu. But after applying this you will see that although nav-links are in column but still navbar is in-line with your logo. Your logo and navbar both are direct child of your Id #head component. So next thing you should do is add id #head with .menu class and apply flex-direction column on both of them.
Your code will looks like this.

@media screen and (max-width: 600px){
  .menu, #head {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

You will get your navbar under the logo but everything still does not look pretty because navbar is getting stuck on left side but we want it to be in the middle and below the logo.

I will leave that to you now, that what would you do to get the navbar in the middle under the logo and center of the container or screen.

This is my first answer so, If I am not clear enough please feel free to ask any questions.

4

Hi, thank you so much for sparing your time to review my project. I love feedback and open to discuss my shortcomings. This is the thing that can improve my knowledge.

I have made quite a few changes into the coding. I have removed a chunk of padding from left and right to make the content in center. I used a legitimate way to do that. Added media queries as suggested by you. but I am still not confident my header on small screens. and how can I improve the form visuals like buttons/ labels etc without using JavaScript. Would you mind look into this? Thank you a lot.

5

I have reviewed your code and I see that your header has improved from last time. Yes, there are few issues but I think you just need this article of w3school.
Try to make your header exactly like it . Good Luck. Reply when you update the changes, I woul be glad to review it and guide you further.

If you do not undertand any part of code, just google it or reply here.