Kazer Panol• 170
@kazerpanol
Posted
I think it is helpful if you review the Accessibility report (4)
HTML validation report (6) of your developed website
Marked as helpful
0
Design comparison
Solution retrospective
As a new jr developer ,This took me way longer then i expected .Initially i had the project quickly done but my css wasn't displaying correctly.I finally scrapped all my code and restarted from the beginning .My first submission took 3 mos to complete . I am still unsure if there is an easier way but so glad that what i did looks correct ,I did learn that if one thing is not exactly right it can mess up the whole code.I am understanding this code well because it is just html/css but i still a little unsure of grid and flexbox and when to use one over the other.
What is the best practice for flexbox vs grid?
Community feedback
Sinisa Vukmirovic• 1,690
@SinisaVukmirovic
Posted
Hello!
Looks good for a newbie!
It's OK to start over when you get stuck. Practice and experience will make it better. When stuck, get up, step away from the code, clear your head, and when you get back with a fresh "eyes", you will see the problem in your code in no time.
Why did you duplicate your images? And took them out of their folders? Remove duplicate and unused images.
About the "flexbox vs grid" dilemma... There is no best practice for flex vs grid. That is no either-or dilemma. You can use both in the same project. Whatever works better for specific situation.
Marked as helpful
0
@franc014
Posted
Kevin Powel has a video related to what tool to use for layout. Check it out: https://www.youtube.com/watch?v=3elGSZSWTbM I would say that for this challenge, we can use a CSS grid for the global layout, then for each part, left and right, we could position the elements using flexbox (internally). It will become more obvious as you get more and more practice.
Marked as helpful
0
バレンタイン 😈• 64,190
@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
Congrats on completing your first challenge!🎊🎆
Regarding your question,
flex is best for singles column/row. While grid is best for multiple columns/rows. For this challenge, either in would work.
- To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the
mainelement.
More Info:📚
- The image’s
alt tagdescription needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a
paragraphelement.
Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.
More Info:📚
- Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful
0
Please log in to post a comment
Log in with GitHub
Join 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