All comments

• 

  DILHT•70

  @DILHTSubmitted about 1 month ago

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

  i am not really good at designing, so i'm so excited that i manage to design it.i learnt the concept of box shadow a css property which also was a bonus to me.

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

  the first challenge was the author image and the name how to align them inline.and the second challenge was how to make the card responsive without giving it dimension the test /the description paragraph was controlling the card so i had to use tag which i think is not a good practice

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

  on the description paragraph since i did not use card dimension the text seemed to control the card so i used the tag but still i think this is not the best approach

  and also if possible how best i can use the media query

  

  Blog_Preview_Design i used html and css

  1

  20
  

  Daniel Cuevas•240

  @dcuevasdevPosted about 1 month ago

  Thanks

  0
• 

  Lutfinoor Muhamad•30

  @lutfinoormSubmitted about 1 month ago

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

  - Proudest Moment

  1. How to make simple responsive page and making an element at center of the page. Question: How to differentiate: When we using display: flex and display: grid?
  2. Create a readme with markdown format, so the github repository look like expert. :D

  - What would I do differently

  At the moment, I'm not sure. Could you suggest how this part of questions help me in my future learning?

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

  1. Making a text center of the page - Ask for help from AI in process.

  2. Making a responsive page - Search for the CSS rule in google.

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

  html, body {
    background-color: rgba(213,225,239,255);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  div {
    text-align: center;
  }
  
  img {
    max-width: 100%;  /* Ensures the image will never be wider than the div */
    height: auto;     /* Maintains the aspect ratio of the image */
    display: block;   /* Removes any extra space under the image */
    margin: 0 auto;
    border-radius: 16px;  
  }
  
  .card-container {
    padding: 1em;
    border-radius: 16px;
    background-color: hsl(0, 0%, 100%);
    max-width: 50%;
    margin-bottom: 2rem;
  }
  
  .card-desc {
    color: hsl(218, 44%, 22%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  h2 {
    font-size: 18px;
  }
  
  p {
    font-size: 15px;
  }
  
  .attribution {
    font-size: 11px;
    text-align: center;
  }
  
  .attribution a {
    color: hsl(228, 45%, 44%);
  }
  
  @media screen and (max-width: 616px) {
    .card-container {
      max-width: 60%;
    }
  }
  
  @media screen and (max-width: 416px) {
    .card-container {
      max-width: 65%;
    }
  }
  

  Could you suggest my css selector so it will improve in my future project. Such

  • Is it better to select by element, class, or id?
  • the order of the attribute so it'll can easily read?
  • I'm having trouble at font styling the card, because it have bold text and normal text. Could you suggest how the selector can be improve?

  

  QR Component Solution with Basic HTML and CSS

  1

  20
  

  Daniel Cuevas•240

  @dcuevasdevPosted about 1 month ago

  Thanks

  0