Basic HTML and CSS style using grid

Community feedback

• 

  Tamarchika•250

  @TamarchikaPosted almost 4 years ago

  good work for the first challenge. Also I recommend import font in the head of HTML. for example : <link rel="preconnect" href="https://fonts.gstatic.com">

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet"> U have to write this code in the head , so U import the font, and when u put ur solution here, the font doesnt change, it appears as it is imported.. Have a nice coding ! Also, look at my solutions, if u have a wish, an send me feedbacks ^_^

  Marked as helpful

  0
• 

  Aishwarya Mali•280

  @aishwarya-maliPosted almost 4 years ago

  Hello George!

  Good work on this challenge! Your solution looks great and is responsive as well! I would only suggest to add width to .main class and to reduce font-size, padding and margin.

  Happy Coding!

  Marked as helpful

  0
• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  Hi George,

  I think there's still a lot of work to do on this I'm afraid.

  I don't think you're fully understanding

  • how to import and apply fonts
  • how to use margins and paddings correctly - this is a big one, a really fundamental concept you've not grasped here and need to read up on. I would remove all paddings and margins from all elements and start again on those after learning more.
  • what font sizes to use (some should be defined in the style guide)
  • html semantics - you've used multiple paragraph tags where a list should be, you've used a main class but no main element etc
  • when to use a button vs a link (this also needs focus state)
  • when to use widths (rarely needed)
  • how to make css grid work... In this challenge i recommend you only use grid on the grid itself, not on the whole page as I think you'd find that easier. To make it work on the whole page, you probably need to be doing 4 minmax columns, something like minmax(1rem, auto) repeat(2, minmax(auto, 350px)) minmax(1rem, auto)
  • how to ensure content doesn't touch the side of the screen (or it's container)

  I hope these tips point you in the right direction

  1

  ---

  

  George_alex•140

  @GeorgeCaldarescuPosted almost 4 years ago

  @grace-snow thank you. I update the code and I think this time I used in the right way the grid and everything. Can you explain better what you mean by using a button vs link?

  0

  

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  @Oskar2323 sure

  A button is for an action. Like a submit in a form, or clicking to open a mobile menu.

  A link (<a href="url-path">) is for navigation

  The styles for these can be whatever you like, a link (anchor tag) can be styled to look like a button, or a button can be styled to look more like a link.

  The choice of html element is all about what that item is doing.

  In this case, sign up would be a link to a sign up page/form. It's not an action, it's navigation

  1