ron-nobi• 20
@ron-nobi
Submitted
my css code is kinda messy. feedback is greatly appreciated. thanks
Anmol Singh Tuteja
@anmolthedeveloper
All comments
- Anmol Singh Tuteja• 190
@anmolthedeveloper
Posted
Hello, Congratulations on completing this challenge
I suspect that you're using 2 image tags, here a small tip that might interest you.
You can use the <picture> tag which is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>Here's a detailed reference: here
Marked as helpful
1 - Mohamed• 30
@MohamedBenArbi
Submitted
Anmol Singh Tuteja• 190@anmolthedeveloper
Posted
Hello, Congratulations on completing this challenge
I observed you're using css Media Query for the image section, there's another way to achieve the same.
Using the <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>Here's a detailed reference: here
0 - Nathan Lowe• 450
@NathLowe
Submitted
This is the second website of the challenge 1 day 1 website. I post a recap video of how I coded every single design with some detailed explanation, errors I encountered, and how I overcame them. Please consider connect with me on LinkedIn if you want to follow me in this journey. If there is anything wrong or not good enough, let me know. Thank you!
Anmol Singh Tuteja• 190@anmolthedeveloper
Posted
Hello, Congratulations on completing this challenge
The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>Here's a detailed reference: here
0 - ItVang• 20
@ItVang
Submitted
Are there any coding practices I should be aware of when replicating a project similar to this?
Anmol Singh Tuteja• 190@anmolthedeveloper
Posted
Hello, Congratulations on completing this challenge
The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>Here's a detailed reference: here
0 - Dale Torres• 50
@daletorres
Submitted
On my first challenge, I only used <divs> in my HTML while in this challenge I tried using semantics such as <main>, <section>, etc. although I believe I could have used a different semantic for <section>?
Also, I tried doing the mobile-first workflow unfortunately I was unable to stick to it and ended up doing the desktop version first again like how I did on my first challenge. Does anyone have any tips on their workflow regarding this?
Anmol Singh Tuteja• 190@anmolthedeveloper
Posted
Hello, Congratulations on completing this challenge
I suspect that the image is not response, you're using the desktop image only so, here a small tip to help you make it responsive
You can use the <picture> tag which is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <source media="(min-width: 769px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>Here's a detailed reference: here
Marked as helpful
2 - Fatih• 30
@mFatihGorhan
Submitted
1) Mobile design width
I struggled with the mobile design width. I noticed that the design with a width of 375 pixels does not display properly on my Xiaomi Mi 9T phone. I found that using a media query with a width of 425 pixels provides better compatibility for the mobile design. However, do you have any other suggestions for a different solution?
2) "image-area" section and hiding images
I have some concerns with the "image-area" section. I used the "display: none" style to hide the image in the mobile view. However, this solution may have limitations in terms of content accessibility. Is there a better alternative? Do you have any other suggestions for organizing the content in a better way?
Anmol Singh Tuteja• 190@anmolthedeveloper
Posted
Hello, Congratulations on completing this challenge
The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <source media="(min-width: 769px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>Here's a detailed reference: here
Marked as helpful
1 - AYUMIC• 20
@ayumic-c
Submitted
Anmol Singh Tuteja• 190@anmolthedeveloper
Posted
Impressive! I think card shadow is less than the original one
0
