Skip to content
OverviewSolutions
11
Comments
8

Michel Vieira

@micheldrv240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • RoxySash•130
    @RoxySashSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I even completed this I had to fight with this grid layout. Had centering issues. Next time I will pay keen attention to how I set up my grid rows and columns in relation to the container size.

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

    The challenge was the grid rows and column sizes and having everything centered. I am not to sure if I overcame anything as the final output might not match the solution. I will definitely work on CSS grid for sure its completed. I wanted to challenge myself that's why I followed the requirement and used grid layout instead of flexbox.

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

    Tips on CSS Grid Layout would be great. Thanks!

    Responsive Testimonial Card Using CSS Grid

    1
    P
    Michel Vieira•240
    @micheldrvPosted 2 days ago

    Your solution looks good, if only that the cards are not centered on the screen in the desktop layout.

    Looking at your code, I think your code style could be improved. Try reducing the amount of consecutive empty lines, for example, and make sure that indentation is consistent.

    My suggestion is to use the Prettier extension, if you're using VSCode, and setting it up to format the document on save. It's a great way to improve code style without much effort.

    Marked as helpful
    0
  • John Panagos•80
    @JohnPanagosSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the CSS that aligned, flexed, and justified all of the boxes to be responsive as you shorten and expand the tab.

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

    The responsive design was tough.

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

    N.A.

    Four Card Feature

    1
    P
    Michel Vieira•240
    @micheldrvPosted 2 days ago

    Well done.

    The only problem I can think of in your solution is that the colors for the top border of the cards don't match the design. In the design, these colors somewhat match the icons inside the cards, and in your solution they are not matching.

    Also, I am fairly certain that all those media queries setting the container's width are not necessary.

    0
  • P
    Toshihito ENDO•150
    @GentleHorseSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    I tried not to use Tailwind CSS for practice and understand pure CSS, and this time, I understood the media queries properly.

    Product Preview Card Component

    1
    P
    Michel Vieira•240
    @micheldrvPosted 5 days ago

    I think it's important for accessibility that all interactable elements have some sort of styling when it's focused. Without it, navigating the page with the keyboard becomes difficult. I mean, this is just a very small component but it could become a bigger problem on a larger project.

    Marked as helpful
    0
  • Daniel Santos•30
    @DanielDev16Submitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    Enfrentei problemas no css.

    Blog

    1
    P
    Michel Vieira•240
    @micheldrvPosted about 1 month ago

    Algumas dicas para melhorar o CSS:

    • Primeiramente, no body:
      • Remova o margin-top: 100px e o height: 100%, e adicione min-height: 100vh. Isso vai centralizar o componente verticalmente. O componente já era pra estar centralizado mas não está pois o height: 100% não está funcionando. Eu recomendo usar 100vh no lugar de 100%, e também recomendo usar min-height pois a altura da página não será menor que a altura do componente em telas muito pequenas.
      • Remova overflow-x: hidden e overflow-y: hidden pois não são necessários, e irão cortar o componente em telas pequenas e impedir ele de ser visualizado por completo.
    • Na classe container:
      • Remova o text-align: center pois nenhum texto no componente é centralizado, isso vai permitir que você remova todas as margens horizontais (margin-left e margin-right) dos elementos h, p e span, que foram adicionadas pra realinhar os textos de volta pra esquerda e acabaram criando complexidade desnecessária.
      • Remova os paddings adicionais redundantes e mantenha apenas o padding: 20px que já é um bom padding pra esse componente. As bordas vão ficar mais consistente.
    • Faltou adicionar a borda e a sombra como no design do desafio.
    0
  • P
    Michel Vieira•240
    @micheldrvPosted about 1 month ago

    A great start, but I see a few things that could be improved, in my opinion.

    • The page's title should have a larger font size than the other headings, and in fact, you have used paragraphs for the heading. Consider using h1 and h2 tags instead as they have semantic meaning and help with accessibility.
    • A few colors don't quite match the design. The 'Preparation Time' block, for example, its background color should be the color Rose 50 as described in the style guide. It's all up to interpretation, of course, I just think your solution could be improved as it doesn't look as clean as the design.
    • I think it would look nicer if the main div had a more consistent margin on all sides, as per the challenge's design. In this case, I think increasing the main div's top margin should do the trick.
    • Consider using an actual <table> tag for the table, as it's better for accessibility as well.
    Marked as helpful
    0
  • P
    Michel Vieira•240
    @micheldrvPosted about 1 month ago

    Good job.

    Here's a cuople notes:

    • The style.css file downloads the font from Google's servers even though there are font files in the assets folder.
    • The avatar image file is outside of the assets folder. I think it's best to keep all files in their designated locations, to reduce confusion and to keep the project tidy.
    Marked as helpful
    0
View more comments