Asking for Landing Page Feedback Please

Code Feedback
1

Hi everyone! I’m hoping to get some feedback on my landing page. Just note that I created it using Sublime Text and didn’t follow the the id name rules (I prefer classes and will change them to the proper id names later). I’m more concerned with the layout and responsiveness. Any feedback is much appreciated!

My landing page: https://codepen.io/ErnieE/full/OooPBQ/

I do have a question though. Can someone enlighten me on how on the FCC landing page example they got the icons next to “premium materials, fast shipping, quality materials” so cleanly in straight columns like that? I couldn’t figure it out so I just ended up floating my icons to the left.

Thanks!!!

2

If you are not concerned about the certificate, you may use classes ( The best way ) for styling or you can use id’s as mentioned by the test and style differently using classNames, you are not at all restricted to style differently unless it doesn’t fulfill the test cases.

Your code looks good :slight_smile: make sure you optimize well in mobile screens, the text content like headers and paragraphs can be given full width in smaller screens with some padding or margin to the left and right, it will make it look better.

They have wrapped the icon with a div, content with a div, and then applied flexbox properties to the parent container that holds the two div’s. You can see that by using dev tools ( Press F12 or right click on the page and select Inspect Element.

3

Your page looks good. It does not have any responsiveness or layout related issue. The color scheme is also nice:+1::+1::+1::+1:

The next thing you can work on is meeting FCC test suite requirements. Add this at the of your code to load the test suite.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

other then that, you have messed up your HTML a bit at lines:

  • line # 30…input should be self-closed.
  • line # 108 has an extra </div>

Additionally, you can link respective sections with the top navigation buttons by id.

<nav class="right">
				<ul class="site-nav">
					<li><a href="#Languages">Languages</a></li>		
					<li><a href="#pricing">Pricing</a></li>
					<li><a class="last" href="#Locations">Locations</a></li>
				</ul>
			</nav>
4

@Sujith3021 @ridafatima15h1

Thank you very much for the feedback. I’m really thankful for your help. I’ve made the changes advised:

*Added the FCC script and ids to pass the test all while keeping my use of classes.

*I removed the 1080px max-width so now the header, footer and body fill the screen.

*On widths over 800px the icons are aligned using flexbox and under 800px the icons are floated left.

*I fixed the incorrectly closed input and removed the extra div.

Any further advice is most welcomed.

Thanks again!

5

Awesome job, the design is really clean. Responsiveness works great for me. Very impressive, keep it up.