@DarkKiller31Submitted 4 months ago
DolbyTheSheep
@DolbyTheSheepAll comments
- @DolbyTheSheepPosted 4 months ago
Well done! Desktop and mobile layouts are perfect!
The only issue I found is on middle sized screen, like 900px width, in which some boxes overlaps.
0 - @mikedsousaSubmitted over 1 year ago
I choose this challenge 'cause I need to practice css grid. It took me a couple hours to align the elements, but I finally did it!
I know that is not the best responsive project that I ever made, but I'm pretty impressive to what I have made.
Feedback are always welcome!
@DolbyTheSheepPosted 4 months agoWell done, It's really cool how you arranged your box to fit 3 different screen size. I couldn't see your code, but surely you did a great job with the responsiveness!!
The only thing I can say is that I would have kept the four boxes together in the square layout, without space between. Good Job!!
0 - @simon7195Submitted 4 months ago@DolbyTheSheepPosted 4 months ago
Well done, your code is really good! Nice use of CSS variables.
I would suggest the use of the
picturetag for the images:<picture> <source media="(min-width:768px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="Image product" /> </picture>And the use of
button, which I think has the correct semantic, instead of adivwith thebtnclass.0 - @AntonB12Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Me siento orgulloso de haber enfrentado varios desafíos en este ejercicio. A través de investigaciones y revisando mis códigos anteriores, logré encontrar soluciones efectivas que me permitieron completar este ejercicio con éxito.
What challenges did you encounter, and how did you overcome them?primeramente el de centrar los bordes finales de cada seccion dentro del recetario ese fue uno de los retos que encontre y me costo un poco mas dentro de este ejercicio, de igual manera el acomodar las listas y sus elementos en cada una de las secciones que ocupaban estos elementos
What specific areas of your project would you like help with?de igual manera cualquier ayuda y/o comentario esbienvenido
@DolbyTheSheepPosted 4 months agoIn the download package there were 2 fonts, YoungSerif was used on headings, the other on the paragraph. You made some errors also with the colors, when you have doubts try a few times until it matches.
The borders are distorted, try using something like
border-radius: 15px;instead of%. Also you can specify the same property inside an image selector to have the image border rounded.I see you used
<header>and<footer>but thery're empty, I think the only tah necessary was<main>with all the content.All this were just small mistakes, the page looks similar and I think you did a great job, keep going like that!
Marked as helpful0 - @Muhammad1917Submitted 4 months ago@DolbyTheSheepPosted 4 months ago
Well done, you nailed it! The only thing I could suggest is the use of semantic tags like
main. Personally I would have increased the font size. GGMarked as helpful0 - @MER-PEXSubmitted 4 months agoWhat specific areas of your project would you like help with?
i would like to receve a feedback about how similar my solution is to the original designe and how can i improuve my css code , also how do make the image corner round
@DolbyTheSheepPosted 4 months agoIt is a best practice for accessibility to use semantic html like
header/main/footer. Also there is no reason not to use first ah1header.I found a bit confusing using a class named
p, try to use some unique names. Try adjusting the box height to avoid cutting off the footer.0 - @ShivamRajput57Submitted 4 months ago@DolbyTheSheepPosted 4 months ago
The solution is slightly bigger than the design. The thing that is missing is some resize based on screen size. I think you completed the exercise fairly well.
0
