Design comparison
Solution retrospective
All feedback is welcome!
Community feedback
- @correlucasPosted over 2 years ago
👾Hola Lucas, congratulations for your solution!
I saw that you did pretty much anything, the container is working fine, its flexible and responsive. But there's some work to do around the container design and semantics.
1.Use semantic tags to wrap the content, for example using
section
for each column andmain
for the general container.2.Do the import for the image using
picture
orimg
.3.Give it the properly overlay effect, you've used
filter
but is hard to get the same color with this effect, instead usemix-blend-mode: multiply;
inside the img tag (note that in this case you have to import the image inside the html with <img>).Hope it helps and happy coding!
Marked as helpful0 - @LuanFlorenciooPosted over 2 years ago
Hola Lucas, acabo de enviar una solicitud de extracción allí en tu repositorio de github para que puedas ver la mejora que hice en tu código. Espero poder ayudarte.
Mejoré algunas líneas de código e implementé la funcionalidad para dispositivos móviles y tabletas.
Marked as helpful0 - @romila2003Posted over 2 years ago
Hi Lucas,
Congratulations 🎉 on your second challenge. It was a good attempt, particularly in the desktop version.
When looking at your design and code, I noticed the lack of responsiveness of your card when adjusting the screen sizes. Approximately at 1100px and onwards, your card looks great however when the screen size is less than that, the card does not respond properly. At 375px, it also looks good though due to the use of media queries. Thus, a good approach for your problem would be to use a mobile-first approach instead. There are many resources explaining the benefits of this approach however the main reason is because it is easier to adjust the layout as you increase the screen size. If you do not understand this concept properly, you can always research more about this through YouTube or other sources like websites or articles. So instead of using
@media screen and (max-width: 375px) { }
, you should use the@media screen and (min-width: xx px instead)
. Thexx
indicates the screen size you can use when increasing the screen size e.g.@media screen and (min-width: 700px)
.Also, it is good practice to use the main tag to wrap your content as it is semantically correct e.g.
<main class="container"></main>
.Hope these comments and suggestions provide some use. I wish you all the best in your future projects 👍.
Marked as helpful0@lu0teroPosted over 2 years ago@romila2003 Thanks for the help! In the next challenge I'm going to try using mobile first and also include the main tag! Thanks again! 😊
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord