Responsive landing page using CSS Grid

Community feedback

• 

  Lukáš Říha•225

  @lukasrihaPosted about 1 year ago

  Hi Priyanshu!

  Great attempt!

  To give you a hint with media queries, check out something called "mobile first". The core idea is that you start styling your page/app for mobile devices. Once you're done with that, you start increasing the viewport width, and once something breaks or start looking bad, you add a media query to fix your styles. :)

  Also I checked out your code on github, and usually you don't have to take devices with width 200px into account - as far as i know, mobile devices start at 300 or 320 px.

  As far as the amount of code is concerned, I think it's fine. There are however some practices I would recommend.

  Firstly: using id's or tag selectors is considered bad practice. Id's should be unique on your page, but image the case that you have a list of blogposts, then you couldn't have an id on the parent element anymore - so stick to classes.

  Secondly: Look something up called BEM - that's a way to style components. It stands for block, element, modifier. It makes sense to think of elements as components (or blocks). That way, you don't get lost in your css and don't have clashes in your project once it grows.

  Lastly: get an extension for your editor which formats your code - i recommend prettier, that makes your code more readable.

  Overall, good job and keep hacking! :)

  Marked as helpful

  0

  ---

  

  Priyanshu Pramanik•380

  @Priyanshu-WDPosted about 1 year ago

  @onenKokos Thank you for recommendations.

  0