Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Flávio César• 200

    @flaviocmb

    Posted

    Looks good!

    You need to understand better these properties:

    img,
picture {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

    Overall, you should pay more attention the projects details like hover a button, meet font-sizes, spaces, etc. If you want to use clamp, make sure you understand better the screen rangers and the begin and end of each font-size or whatever elements you use with it.

    0
  • P
    Ken• 160

    @ubcyukiny

    Submitted

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

    First time using tailwind-css, completing the project

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

    Coding style, practices, smells, redundancies. Any feedback would be appreciated!

    Responsive four-card-feature-section using React CSS Tailwind

    1

    P
    Flávio César• 200

    @flaviocmb

    Posted

    Well done! If you want, check out my challenge hub to nail that colorful border just right as the project requires.

    You should improve responsiveness at low resolution screens.

    Marked as helpful

    1
  • P
    Jan• 290

    @Jan-Dev0

    Submitted

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

    I used grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); and grid-auto-rows: auto; to achieve a smoother transition between mobile and desktop views. This approach allowed the grid items to resize dynamically, providing a more responsive and flexible layout.

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

    The only little challenge was ensuring that the grid layout maintained a clean and responsive design across different screen sizes.

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

    I would like to get general feedback on whether there are better solutions for this type of layout. I'm curious to know if I made any mistakes or if there are more efficient approaches to achieve the same result. Any suggestions for improving the structure, responsiveness, or overall code quality are welcome.

    Testimonials grid section - HTML, CSS, Grid

    2

    P
    Flávio César• 200

    @flaviocmb

    Posted

    Well done! But you're missing the background image from the violet card. Also noticed responsiveness issues at low resolutions.

    0
  • Mohamed khlifi• 150

    @Mohamedkh369

    Submitted

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

    I am proud of learning how to use css grid properly and achieving a highly similar design to the one provided in the challenge

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

    just learning about the css grid

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

    none

    Responsive four-cards features section

    2

    P
    Flávio César• 200

    @flaviocmb

    Posted

    Hi

    The mobile version looks good but the desktop version need some improvements. You need to improve your eye technique to meet the elements requirements like font-family, font-size, font color, etc.

    1
  • P
    Flávio César• 200

    @flaviocmb

    Posted

    Looks good!

    Be careful when rendering images using CSS. I recommend that you read this article here which will help you with responsive images.

    I recommend this read Responsive Images.

    Marked as helpful

    0
  • P
    Flávio César• 200

    @flaviocmb

    Posted

    • To align the bullet lists with the text, you will have to use display flex when the screen reaches 375 pixels.

    • Need to improve HTML semantics. Always try to find better tags than div.

    • You should import Outfit Regular, Semi-Bold and Bold fonts.

    Besides that, All looks good. Congratulations!

    0
  • 7A9Oo• 80

    @7A9Oo

    Submitted

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

    To use variables for the CSS style and selector like first of type . I learned to effectively use CSS custom properties (variables) to manage design attributes more efficiently. creating preset font and use them as class.

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

    Working with media queries

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

    working on mobile media queries first or on desktop

    blog view card using preset font

    2

  • Rubens Carvalho• 80

    @RubensTM

    Submitted

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

    Nada, ta tudo bom

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

    Nenhum, tudo muito facil

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

    Nenhuma por enquanto

    Facil

    1

    P
    Flávio César• 200

    @flaviocmb

    Posted

    Algumas correções de detalhes e erros:

    • Imagem do avatar está um pouco menor
    • Nome tem fonte, tamanho e margem diferentes
    • Localização tem fonte, tamanho e margem diferentes
    • Fonte dos botões diferentes
    • Cor fonte hover diferentes
    • O card não está responsivo em telas abaixo de 400px
    • Falta padding no card

    Eu sugiro melhorar o encapsulamento e a semântica do seu HTML pois no mundo real haverá maiores exigências dessa estrutura.

    Dá uma olhada nesse curso de HTML fornecido aqui no Frontend Mentor pra você ficar craque!

    Web.dev HTML

    0
  • P
    Flávio César• 200

    @flaviocmb

    Posted

    Observe this element:

    <strong class="card__title">HTML &amp; CSS foundations</strong>

    I believe you could transform it into a heading.

    The <strong> element is a phrasing content element, which means it should not stand alone.

    Check out these sites provided by Frontend Mentor for your HTML reference:

    Headings and Sections

    Heading Elements

    Content Categories

    0
  • P
    Flávio César• 200

    @flaviocmb

    Posted

    Suggested Modifications

    1. Fix Padding and Margin:

      • Adjust values to be sensible and remove errors.
      • Example: 
        .a {
  padding: 20px;
}
.b {
  padding: 20px;
  margin: 20px;
}

    2. Correct Font Properties:

      • Use valid font-weight values and remove unsupported properties.
      • Example: 
        .b h3 {
  font-weight: 700;
}
.b p {
  font-weight: 400;
  font-size: 16px;
}

    3. Adjust Image Dimensions:

      • Ensure consistent width and height for images.
      • Example: 
        .c img {
  width: 100%;
  height: auto;
}

    4. Remove Redundant CSS:

      • Remove unsupported or unnecessary properties.
      • Example: 
        .b h3, .b p {
  /* Remove font-optical-sizing if not needed */
}

    Every tweak and adjustment is a step towards perfection - your dedication to refining your design is truly inspiring! Keep up the great work! 🌟

    0