1.) What did you find difficult while building the project?
What I found challenging is to get around when the screen is changing, the image will also change from mobile to desktop.
Also making sure the whole component is responsive:
- text
- margin
- display
- and padding
2.) Which areas of your code are you unsure of?
This code from my "script.js":
document.addEventListener('DOMContentLoaded', function () {
const image = document.getElementById('responsiveImage');
function changeImage() {
if (window.innerWidth <= 800) {
image.src = './images/image-product-mobile.jpg';
} else {
image.src = './images/image-product-desktop.jpg';
}
}
window.addEventListener('resize', changeImage);
});
Overall, this piece of code DID the job, when the screen is less than 800px then the image will be in mobile mode then pass that pixel it will be in a desktop mode.
BUT
I think this cause some problems, because when the page/web first load the image turns into './images/image-product-mobile.jpg. Then after I resize or refresh the page/web, it'll became './images/image-product-desktop.jpg'
I'm not quite sure how that happened
3.) Do you have any questions about best practices?
Yes, but it's all in my styles.css.
Whenever I style, I just keep going and I add the necessary CSS properties that needs to be look like what the design is be, and even though I'm managing to complete the styling, I can't help but to have some thoughts about doing CSS asking Is this a good enough? or did I over did it again when it comes to styling?
With that said, here is some of my CSS concern for references:
.card button {
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
font-family: var(--ff-Montserrat);
font-weight: var(--fw-700);
color: var(--clr-neutral-white);
background-color: var(--clr-primary-darkCyan);
border: none;
border-radius: 10px;
transition: background-color 0.3s ease-in-out;
}
Also this one:
.main {
display: flex;
flex-direction: column;
margin: 1rem;
box-shadow: 0 0 5px 4px var(--clr-neutral-DgrayishBlue);
border-radius: 1rem;
}
@media screen and (min-width: 800px) {
.main {
flex-direction: row;
margin-top: 6rem;
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.hero img {
border-radius: 1rem 0 0 1rem;
}
.card {
padding: 2em;
border-radius: 0 1rem 1rem 0;
}
}
Also
- I use a bunch of
display: flex whenever I do some styling. I'm not sure when to use display: grid and what would be the best time to use it.
Check Out My Repositories
Check Out this on Netlify
I would love you guys to check it out and give any kind of help, suggestions, tips, best-practices and criticism.
