Caroline Pereira da Silva

Latest comments

• 

  Marcelo•40

  @Marchelo07

  Submitted about 1 year ago

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

  Con la solución, se que no pueda estar al 100% en coincidencias. Seguir mejorando para poder replicar lo más exacto a los ejemplos expuestos.

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

  En la justificación del texto

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

  Profundizar más en conocimiento en css

  

  Implementación Qr code component

  1

  20
  

  Caroline Pereira da Silva•40

  @carolinepedasil

  Posted about 1 year ago

  Your code looks fairly well-structured and organized. However, there are a few improvements you can make for better readability, maintainability, and efficiency:

  • Consistent Units: Use consistent units for sizing, such as pixels (px) or percentages (%). In your code, you have a mix of pixels and viewport height (vh). It's generally better to stick with one unit for consistency unless there's a specific reason to use different units.
  • Font Loading: Consider using a font loading strategy, such as font-display, to control how the browser renders text while the custom font is loading. This ensures a better user experience, especially on slower connections.
  • Grouping Properties: Group related CSS properties together for better readability and organization. For example, group all font-related properties together, all box-model properties together, etc.
  • Simplify Selectors: Simplify selectors where possible to improve specificity and reduce redundancy. For instance, instead of using *::before and *::after, you can use ::before and ::after.
  • Use CSS Variables: Consider using CSS variables for properties that you might want to reuse or dynamically change in the future, such as colors or font sizes.

  Here's your code with these improvements implemented:

  @font-face {
    font-family: "Outfit";
    src: url(../font/Outfit-VariableFont_wght.ttf);
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Reset */
  * {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: "Outfit", sans-serif;
    min-height: 100vh;
    line-height: 1.1;
    font-size: 15px;
    background-color: #cce1fa;
  }
  
  main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .container {
    width: 350px;
    max-width: 90%; /* Responsive max-width */
    margin: auto; /* Center horizontally */
    padding: 15px;
    background-color: #fff; /* Use hex shorthand */
    border-radius: 10px;
  }
  
  img {
    width: 100%;
    border-radius: 10px;
  }
  
  h1,
  p {
    margin-top: 20px;
    padding: 0 20px; /* Shorthand padding */
  }
  
  h1 {
    text-align: justify; /* Justify text */
  }
  
  p {
    text-align: center;
    color: #999; /* Shorten hex color */
  }
  

  These improvements help enhance readability, maintainability, and efficiency of your CSS code.

  0

  Marked as helpful