Kristi Lino• 10
@iluminatiomea
Submitted
Hello everyone, I wanted to take this step without Bootstrap, using only HTML and CSS. You are free to give me suggestions and advice, I welcome them. Thank you.
Eni
@EnidaShehu
All comments
- Eni• 180
@EnidaShehu
Posted
Congratulation on completing your first challenge Kristi!
A few helpful tips would be:
1.Instead of using a fixed padding value, consider using a responsive approach with relative units like percentages or viewport units (e.g., padding: 10%) to adapt the section's size based on the screen dimensions.
2.Improve class names: Instead of using generic class names like "card6" and "cashflow," consider using more descriptive and meaningful class names that reflect the purpose of the elements. For example, you could use classes like "qr-card" and "qr-code-img" to make the code more understandable.
Keep up the good work :)
Marked as helpful
0 - Dot-theduck• 70
@Dot-theduck
Submitted
feedbacks are appreciated
Eni• 180@EnidaShehu
Posted
Good job on your solution!
To make the container edges round you can add the classes and CSS code below:
.cont-1 { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.cont-3 { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
I would also advice you to use rem instead of px when sizing elements. The main advantage of using rem units is their scalability and responsiveness. When you define sizes using rem, they adjust proportionally to the font size of the root element. This means that if you changes the default font size in their browser settings, all elements specified in rem will automatically adapt accordingly.
Keep it up :)
Marked as helpful
1 - Nikhil Reddy• 100
@NikhilReddyManda
Submitted
Let me know if any enhancements. ✨
Eni• 180@EnidaShehu
Posted
Congratulations on completing this challenge Nikhil :)
A few helpful tips I would give you are:
1 - Fix the spelling of the "container" class: In the <div> element with the class container, there is a typo. Change the class name from conatiner to container to correct it.
2 - The image doesn't swap when the screen size changes. To achive that add both images on your html as below:
<img src="images/image-product-desktop.jpg" class="image-1" alt="parfume-bottle" /> <img src="images/image-product-mobile.jpg" class="image-2" alt="parfume-bottle" />
After that add the CSS:
/* for current screen size*/
.image-1 { width: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.image-2 { display: none; }
/for smaller screen size/
@media screen and (max-width: 375px) {
.image-1 { display: none; }
.image-2 { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; display: flex; width: 100%; }
.image-1::before { content: url("images/image-product-mobile.jpg"); } }
I hope this helps. Keep up the good work :)
Marked as helpful
1 - Ahbideen Yusuf• 160
@bravono
Submitted
I had to go back to the Flexbox tutorial to remind myself how it works.
Eni• 180@EnidaShehu
Posted
Good job overall :)
To improve the code, you can consider the following suggestions:
-
Remove duplicated CSS properties: The font-family property is specified twice in the body style. You can remove the second declaration to avoid redundancy.
-
Add comments for clarity: Consider adding comments to the CSS code to provide clear explanations for each section or rule. This can be helpful for both yourself and other developers who may work on the code in the future.
Marked as helpful
1 -
- levy_m• 60
@LevyMatias
Submitted
- I create my own prototype with adobe xd
- I liked to do this project
- I accept any suggestions
Eni• 180@EnidaShehu
Posted
Good job overall :)
A few suggestions I would make are:
-
Make the page responsive: Currently, the page has a fixed width and height, which can make it difficult to view on smaller screens. Making the page responsive by using relative units like percentages or ems can ensure that the page looks good on all screen sizes.
-
Use more descriptive class and id names: The current class names like "paragraph-primary" and "paragraph-secondary" do not provide much context about their purpose. Using more descriptive names like "heading" and "subheading" would make it easier to understand the layout of the page.
Keep up the good work!
Marked as helpful
1
