Latest solutions
Responsive Recipe Page with HTML, CSS, Flexbox and Media Query
Submitted 19 days agoOverall, haha, I think my code may have gotten a bit cluttered.
Regarding responsiveness, if there is any way to improve it, I will definitely implement it. In lists too, how to space the text markers. And lastly in flexbox, where I used justify-content: space-between but I would like to reduce the space between the elements for a result closer to the exercise.
Latest comments
- @ThyuHtooAungOwO@gb4lves
It's perfect, I don't have many comments to make, it's identical to the exercise! Something I did in my version and would perhaps like to implement is an animation when we change the media from mobile to desktop, aesthetically it looks better, but that's it, everything is incredible, congratulations
- P@antryabovWhat are you most proud of, and what would you do differently next time?
In just a couple of days, I gained a much better understanding of HTML and CSS. Practice makes perfect. I think the semantics should have been organized differently. I will be more careful next time.
What challenges did you encounter, and how did you overcome them?Learned to calculate the preferred value for clamp()
What specific areas of your project would you like help with?I worked very hard on this. I am looking forward to constructive criticism :)
@gb4lvesVery good, it's perfect. I had trouble making mine, looking here I would make a change only in the mobile version to remove the border-radius at the bottom. Otherwise everything is incredible, congratulations
- P@oxford777What are you most proud of, and what would you do differently next time?
Je suis fière d’avoir réussi à recréer une mise en page fidèle au design fourni. J’ai bien compris l’utilisation des unités relatives comme rem et clamp() pour rendre le site responsive. La prochaine fois, je structurerais mieux mes classes CSS dès le début pour un code plus clair.
What challenges did you encounter, and how did you overcome them?Le centrage vertical de l’article m’a posé problème au départ. J’ai dû bien comprendre comment fonctionne Flexbox avec min-height: 100vh et align-items / justify-content.
What specific areas of your project would you like help with?Je suis preneuse de retours sur la sémantique HTML et l’accessibilité (par exemple, l’usage des balises <article> et <footer>). Je me demande aussi si mes pratiques actuelles pour gérer le responsive sont optimales, ou s’il existe des alternatives plus modernes.
@gb4lvesYour result is very good, I currently haven't learned how to use rem and clamp for responsive sites, I admire that! About centering, I took a look at the code, and I learned a while ago that it is not very recommended to use display flex in our <body>, for centering I would create another tag like a <main> wrapping all the content, I would leave both, <body> and <main> with 100vh and use display: flex in <main>, so I believe that all the content will align vertically and horizontally with justify-content and alignt-items!
- @fukoutamafaceWhat are you most proud of, and what would you do differently next time?
It pretty :D
@gb4lvesIt turned out great, especially because of the perspective, the measurements are practically the same. I liked the border you added to the profile picture!
- @LelloX-Dev@gb4lves
Very good, it's exactly like the exercise!