Responsive landing page using HTMl,CSS,Javascript and Bootstrap

Community feedback

• 

  Kaustubh Maladkar•230

  @KaustubhMaladkarPosted almost 2 years ago

  Hi, congratulations on completing your first Frontend Mentor challenge. Great efforts!! I have a few suggestions for you

  • In the style guide, it was clearly specified that the desktop width was 1440px. Any width less than that should have been treated as mobile. However, you used 992px as the break point. Owing to this, at a screen size of 1000px, the layout looks terrible . The 'new' sidebar does not have enough place, and hence wraps on a next line. The bottom items too do not have enough space, and collide.
  • You should have used grid. CSS grid is a new CSS Layout model and is used creating complex layouts like this one. Flexbox can also accomplish this but, you need to use a lot of containers, like you have. A great place to learn about CSS Grid would be this video by Kevin Powell
  • There shouldn't be side scrolling. The navigation bar is what is causing this. You could have simply used margins to avoid this
  • The image does not change depending upon the view port. In the starter files, two images for the web 3 image had been provided. The image has to change based on whether the user is using a mobile device or desktop. You should have made use the srcset attribute this time
  • When the mobile menu is toggled, you see a text saying "Offcanvas". Was this supposed to be a comment? If not, you can just hide it.
  • You did not add the alt attribute to images. The alt attribute helps specify alternative text for an image. Example: <img src="myimage.jpg" alt="An image of me">
  • Headings levels should decrease by only one. For example if an h1's sibling container contains a heading it should only be an h2. If you want to edit the font size, you should use CSS not HTML
  • You have specified height and width attributes for images in the HTML code itself. This is not preferred. For anything styling related, always use CSS.

  You can take a look at my solution for a better understanding

  Marked as helpful

  1
• 

  Ralindu Geeman•20

  @ralindugeeman002Posted almost 2 years ago

  Hey thanx for the solutions i guess i had lack of use in CSS also had to use Bootstrap(css framework) will look up at the video you mentioned will be helpful a lot . Also again I appreciate for your solutions ill try to review your solution with mine and willing to reduce my mistakes.

  1