Skip to content
OverviewSolutions
19
Comments
14
Flávio César
@flaviocmb

All comments

  • Flávio César•340
    @flaviocmb

    Well done!

    I think this would solve the overflowing

    html {
  overflow: hidden;
}
    Marked as helpful
  • P
    Anamay•470
    @anamaydev
    What are you most proud of, and what would you do differently next time?

    I am most proud of becoming comfortable using Flexbox, which has greatly improved my layout skills. Additionally, I learned some important concepts like media queries and hover effects.

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

    I didn't struggle with this project, and everything went smoothly. I was able to efficiently implement and troubleshoot minor issues as they arose, which contributed to a successful outcome.

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

    I would like feedback on whether I should have used Flexbox on the .content div as well, considering that I was able to achieve my goal without it anyway. Additionally, I would appreciate any other feedback on my code.

    Blog Preview Card

    1
    Flávio César•340
    @flaviocmb

    Hello @anamaydev

    Well done! Looks nice. Don't forget the mouse hover over the card and also try to use rem/em units all over your project. This is how your project looks on large font-sizes.

    Question: I would like feedback on whether I should have used Flexbox on the .content div as well, considering that I was able to achieve my goal without it anyway.

    I’m with you on this. I wouldn’t use it until it’s really needed.

    Marked as helpful
  • Fachrezi•420
    @Fbeye04
    What are you most proud of, and what would you do differently next time?

    In this project, I returned to using scss while getting used to its use. Nothing has changed but more and more I am proud of myself for being able to complete the project faster than the initial phases.

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

    There were no problems that I encountered while working on the project, which was probably because I was getting used to working on projects.

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

    all areas of html and css and I might be able to give some advice on using sass as well.

    Testimonials section using grid

    2
    Flávio César•340
    @flaviocmb

    Well done!

    I loved the transition on the cards. I will copy that and update my description hub to give you the credits. Thank you!

  • Caio Azevedo•300
    @justCaioDev
    What are you most proud of, and what would you do differently next time?

    I'm proud of the way I made the site 😄

    • I used React JS to create dynamic components with props that can be reused.

    • I styled it using Styled-Components.

    • And I typed the props with Prop-Types for a more robust application

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

    I don't know why my screenshot submition is broken... In my deploy and my localhost is normal the layout

    Preview card component | React Js | Styled-component | PropTypes

    #accessibility#react#styled-components#web-components
    1
    Flávio César•340
    @flaviocmb

    Fala dev!

    Pra centralizar os cards, usa o código abaixo 🙌🏽

    .cFhFth {
    display: flex;
    justify-content: center;
    margin-block-start: 171px;
}

    Faz um novo commit e gera nova screen.

  • Flávio César•340
    @flaviocmb

    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.

  • P
    Ken•160
    @ubcyukiny
    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

    #tailwind-css#vite#react
    1
    Flávio César•340
    @flaviocmb

    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
  • P
    Jan•290
    @Jan-Dev0
    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
    Flávio César•340
    @flaviocmb

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

  • Mohamed khlifi•150
    @Mohamedkh369
    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
    Flávio César•340
    @flaviocmb

    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.

  • Flávio César•340
    @flaviocmb

    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
  • Flávio César•340
    @flaviocmb

    • 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!

  • 7A9Oo•80
    @7A9Oo
    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
    Flávio César•340
    @flaviocmb

    font-size must NEVER be in pixels https://fedmentor.dev/posts/font-size-px/

    You section HTML encapsulation looks awesome!

    Marked as helpful
  • Rubens Carvalho•80
    @RubensTM
    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

    #sass/scss
    1
    Flávio César•340
    @flaviocmb

    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

  • Flávio César•340
    @flaviocmb

    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

  • Flávio César•340
    @flaviocmb

    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! 🌟