Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using HTMl,CSS,Javascript and Bootstrap

@ralindugeeman002

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had to take sometime to divide the columns and rows. Also have a question about how accurately have i divide those columns.

Community feedback

@KaustubhMaladkar

Posted

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

@ralindugeeman002

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord