@xStephxSubmitted about 1 month ago
Flávio César
@flaviocmbAll comments
- @flaviocmbPosted about 1 month ago
Well done!
I think this would solve the overflowing
html { overflow: hidden; }Marked as helpful1 - @anamaydevSubmitted about 2 months agoWhat 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
.contentdiv as well, considering that I was able to achieve my goal without it anyway. Additionally, I would appreciate any other feedback on my code.@flaviocmbPosted about 2 months agoHello @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 helpful1 - @Fbeye04Submitted about 2 months agoWhat 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.
@flaviocmbPosted about 2 months agoWell done!
I loved the transition on the cards. I will copy that and update my description hub to give you the credits. Thank you!
1 - @justCaioDevSubmitted about 2 months agoWhat 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
I don't know why my screenshot submition is broken... In my deploy and my localhost is normal the layout
@flaviocmbPosted about 2 months agoFala 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.
1 -
- @RohloffmeisterSubmitted 2 months ago@flaviocmbPosted 2 months ago
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 - @ubcyukinySubmitted 2 months agoWhat 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!
@flaviocmbPosted 2 months agoWell 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 helpful1 - @Jan-Dev0Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I used grid-template-columns:
What challenges did you encounter, and how did you overcome them?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.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.
@flaviocmbPosted 2 months agoWell done! But you're missing the background image from the violet card. Also noticed responsiveness issues at low resolutions.
0 - @Mohamedkh369Submitted 3 months agoWhat 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
@flaviocmbPosted 3 months agoHi
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 - @SpartanFrancoSubmitted 3 months ago@flaviocmbPosted 3 months ago
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 helpful0 - @KKajetSubmitted 10 months ago@flaviocmbPosted 4 months ago
-
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 -
- @7A9OoSubmitted 4 months agoWhat 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
@flaviocmbPosted 4 months agofont-size must NEVER be in pixels https://fedmentor.dev/posts/font-size-px/
You section HTML encapsulation looks awesome!
Marked as helpful1 - @RubensTMSubmitted 4 months agoWhat 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
@flaviocmbPosted 4 months agoAlgumas 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!
0
