@WaelBenseghir
Quentin Luback
@qlubackAll comments
- @qluback
Nice job !
- P@margaux-worksWhat are you most proud of, and what would you do differently next time?
I'm most proud of effectively using CSS Grid and grid-template to create a well-structured layout.
What challenges did you encounter, and how did you overcome them?I struggled with absolute positioning causing elements to overlap or overflow (specially the icons in the cards). I resolved this by carefully using position: absolute within the grid to control placement and avoid layout issues.
What specific areas of your project would you like help with?I need help adjusting the unwanted padding and margin on the h1 and h2 elements, which are making the headings appear too narrow and affecting the overall layout.
@qlubackReally nice job ! I discovered this new CSS rule "grid-template-areas" thanks to you, very interesting to center elements like this.
Otherwise, i just noticed that your colored borders are not exactly like the preview. You can use "::before" in CSS to make your borders straight, using position/overflow rules in your card elements.
Have fun !
Marked as helpful - P@francimelink@qluback
I guess it's perfect, congrats !
- @achallett@qluback
Really nice job ! I should be less lazy and use CSS variables like you !
- @JangidShrawan@qluback
You did a nice job !
Don't hesitate to use correct font weight for texts and buttons, and make the description centered.
Marked as helpful - @kevinphucWhat are you most proud of, and what would you do differently next time?
I have improve a lot from the first exercise.
What challenges did you encounter, and how did you overcome them?I have a problem when deploy in page.github.io that the image was not deployed along with the code while I did not adjust any path of any image. When I run on my localhost it still have those images like default.
@qlubackNice job !
Keep focusing on CSS Flexbox as you did for the element "author", it will make your life easier !
You can remove width and height for the element "status", it's not necessary at all to use fixed dimensions in this case for this element. I know your element "status" will take the full width available but if you apply correct CSS Flexbox rules on the element "card", you will only have to add some padding on the element "status" to render it as required in the exercise.
Have fun !
- @BeatrizPoncesIPWhat are you most proud of, and what would you do differently next time?
Eu me orgulho muito de ter conseguido tornar o site responsivo, especialmente sem recorrer à IA ou a vídeos no YouTube. Desta vez, decidi deixar os textos em inglês para facilitar a comparação do tamanho da fonte. Usei em
What challenges did you encounter, and how did you overcome them?emvez depx, e na próxima vez, pretendo experimentarrem.Enfrentei desafios consideráveis em relação ao tamanho do post. O que ficava esteticamente agradável em um dispositivo parecia excessivamente grande em outro. A responsividade somente com flexbox foi uma tarefa árdua; utilizar Media Queries torna o processo muito mais simples!
What specific areas of your project would you like help with?Qual é a melhor maneira de se opter responsividade usando flex?
@qlubackCongrats !
I noticed in figma files that the article image has a fixed height of 200px. So the image is cropped horizontally, take a look to this CSS rule to manage image cropping (useful for responsive purposes) : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Marked as helpful - @Ashwini202213@qluback
Nice code !
Don't hesitate to use the "style-guide.md" file to easily match colors and fonts.
Take a look to this article if you want to import Google fonts required for the project : https://developers.google.com/fonts/docs/getting_started?hl=en
If you set html and body with height:100%, then you can use flexbox on body element to center your QR code container.
Marked as helpful
