Design comparison
Solution retrospective
wanted to practice what I am learning in bootcamp. Am I in the right path for this project? I tried applying what I learned. Where I am learning, they encourage google searches, which I did. It's very hard for a beginner because there are so many solutions, and how I am being taught, not all of them are the same. It's a little confusing. I know that if I continue to practice, I'll start understanding this language. I feel as if I did good on it, but I want to re-confirm I'm going on the right path of understanding coding, as a beginner.
Thank you.
**I will continue doing more of these, it helps a lot and I am very happy when it looks almost as the product preview.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @Marianellag1, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Using
<picture>
you’ve more control over the elements and its better than using the product image as<img>
orbackground-image
. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful1@Marianellag1Posted about 2 years ago@correlucas Hello! Thank you so much! I didn't even know there was a picture element. I'll will use it for future reference for pictures!
0 - @hyrongennikePosted about 2 years ago
Hi @Marianellag1,
Nice job on the challenge
If you want to center the card on the page, the
margin-top: 12%
on div inside the container div and replace your body rule with the following one.body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Hope this is helpful
Marked as helpful1@Marianellag1Posted about 2 years ago@hyrongennike Hello! I was having such a hard time centering horizontal and vertical. Especially since I used bootstrap, I kept getting confused. This is very helpful, thank you very much! I think I over complicate myself, when really things are actually more simple.
0 - @faha1999Posted about 2 years ago
Hello, Mgamboa Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:
- You might want to use semantic tags like the
<main>
to wrap your code, instead ofdiv
. like
<main class="container"> </main> <footer class="attribution fixed-bottom"> </footer>
You could also make use of
<section>
and/or<article>
semantic tags. This would help improve accessibility.-
add favicon
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-
a small
transition
&hover
to thebutton
will be more attractive. -
media issues
@media only screen and (max-width: 600px) { .row{ /*margin-right: -15px; */ /* margin-left: -15px;*/ } .col-md-6:first-child { height: 250px; } .col-md-6:first-child img{ background-image: URL(./Assets/images/image-product-mobile.jpg); }
I hope it will work. Happy coding.
Marked as helpful1@Marianellag1Posted about 2 years ago@faha1999 Hello! Thank you very much! I will definitely keep the semantic tags in mind. It does make sense. I will in the future make the changes with your suggestions. I appreciate the help!
0 - You might want to use semantic tags like the
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