LiamHilton

Latest comments

• 

  paddypeanut•100

  @paddypeanut

  Submitted 8 months ago

  What are you most proud of, and what would you do differently next time?

  Accuratly recreated the design using CSS grid.

  

  Responsive layout using CSS grid

  1

  30
  

  LiamHilton•20

  @LiamHilton

  Posted 8 months ago

  This seems like a great way to input @media screen for specific classes! great work!

  @media screen and (max-width:64rem) { .grid-container { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 18rem); max-width:50rem; } }

  @media screen and (min-width: 64rem) { .grid-container { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(4, 9rem); max-width: 70rem; }

  .card-2 {
      grid-column-start: 2;
      grid-row-start: 1;
      grid-row-end: 3;
  }
  
  .card-1 {
      grid-column-start: 1;
      grid-row-start: 2;
      grid-row-end: 4;
  }
  
  .card-4 {
      grid-column-start: 3;
      grid-row-start: 2;
      grid-row-end: 4;
  }
  
  .card-3 {
      grid-column-start: 2;
      grid-row-start: 3;
      grid-row-end: 5;
  }
  

  }

  @media screen and (max-width:42rem) { .grid-container { grid-template-columns: 1fr; grid-template-rows: repeat(4, 18rem); width:90%; max-width:25rem }

  0
• 

  Tgimba1•90

  @Tgimba1

  Submitted 8 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud to have been able to use all available resources to complete this project. I am willing to complete similar projects with limited time next time.

  What challenges did you encounter, and how did you overcome them?

  I had an issure spacing giving the same height to the two sister containers. I figures it out bu using Flex:1 for both divs.

  What specific areas of your project would you like help with?

  To improve my knowledge in the application of CSS Flexbox.

  

  Responsive Product Previe Card HTML CSS

  1

  30
  

  LiamHilton•20

  @LiamHilton

  Posted 8 months ago

  Really great effort! after looking at your code i will give a few improvements to help with workflow.

  • creating a separate CSS link to ensure you have clean code and you can change between windows. This also maintains that if you are building a big website in the future and have a lot of code its easy to locate. Also good practice for once you start to build additional pages for your website as you will repeat the process of a new css file for that particular page. (hopefully that makes sense)

  I have found Split up or down to be incredibly useful to visualise all code in front of me on my HTML and CSS too. (if your monitor is in vertical mode)

  example:

  <!-- my CSS -->

  <link rel="stylesheet" href="style.css" />
  

  <!-- google fonts -->

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap"
    rel="stylesheet"
  />
  

  I will add a link for css-tricks which is a great resource and add flexbox for you.

  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  -stack overflow is also great for asking questions> https://stackoverflow.com

  -MDN Web developer is great for information too. https://developer.mozilla.org/en-US/

  Have a great day.

  0