Hi there, I’m Melvin and this is my solution for this challenge. 👋
Any feedback on how I can improve and reduce unnecessary code is welcome!
Thank you. :)
Hello melvin
Hi there, I’m Melvin and this is my solution for this challenge. 👋
Any feedback on how I can improve and reduce unnecessary code is welcome!
Thank you. :)
Hello melvin
Nice solution, I'm currently learning javascript now, so I decided to do a light project to practice dom manipulation.
Also I love your solution, and I'm using it to learn as well by breaking it down which helps me to learn more about accessibility, I noticed you also use sass and the 7-architecture system which is pretty cool. I love sass also.
The only thing I wanted to mention is the use of import in sass, I was using them also until I found out it has been deprecated, and instead we now have to make use of @use and @forward.
if you are interested in learning @use and @forward you can use this link. Kevin powell.
Have fun
Hello Shane, congratulations on completing your fem challenge
Always try checking your fem report section for errors, can help you figure out where to correct your project.
Try warping the code below in a header semantic element.
<h1><span>Reliable, efficient delivery </span> Powered by Technology</h1>
<p class="sub-text">Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p>
Hope you find this helpful. Happy coding
Hello favour, congratulations on completing your fem challenge.
Some suggestions to help improve your project
main element for accessibility and semantic HTML markupmore info here MDN main link
<h3 class="heading">
Improve your front-end <br> skiils by building projects
</h3>
alt tag. alt tags are good for accessibility for screen-readersHope you find this helpful, congratulations once again. cheers
Hello Kariath, congratulations on completing your first fem challenge.
Some suggestions to help improve your project
main element for accessibility and semantic HTML markupmore info here MDN Link Main Element
h1 tag<P>Improve your front-end skills by building projects</P>
img element an alt tag. alt tags are good for accessibility for screen-readersHope you find this helpful, congratulations once again. cheers
Hello George, congratulations on competing your fem challenge
Some suggestions to improve your project
main element.more info MDN main element
picture element, since the challenge has two different images for different screen sizes.more info MDN link picture element
-Make use of the del element to wrap the old price, add a span tag with a class of sr-only, and inside should have a text of the previous price. then use CSS to make the span
element hidden, this makes it easier for screen-readers to pick the information properly.
more info MDN del element
more info sr-only class
Happy coding. I hope you found this helpful.
Feedbacks are welcome !!!
Hello Hassia, congratulations on completing the fem challenge.
Some tips to help improve your project
"-" instead of "_"more info naming conventions
address element to wrap the address section instead of articlemore info address element MDN link
article element inside a footer. wrap them with divs insteadHappy coding. if you found this helpful, make sure to mark as helpful thanks.
I built this responsive grid using TailwindCSS in combination with semantic HTML markup and a mobile-first approach. Tailwind makes mobile-first design so easy, because you build from the smallest breakpoint by default, then apply additional utility classes to target larger screens. For this challenge, I simply defined the two breakpoints in my tailwind.config.js file:
... theme: { screens: { sm: '375px', lg: '1440px', }, ...
Then, I wrote my initial elements for the mobile view, and then went back and added additional classes using lg:* to target the desktop view.
I struggled a little with positioning & sizing the overall container for the grid to get the spacing correct
Hello Krysia, congratulations on completing the fem challenge
Some suggestions to help improve your code
Always check front-end mentor report sections for errors on your project. right now you have quite a few.
The user names should be wrapped in a header tag.
Your codes are not properly indented.
your code below is meant to be wrapped with a p tag, as you can't nest heading elements. heading elements are semantic elements
<heading>
I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.
</heading>
More info on semantic HTML MDN Semantic
blockquote element for the code below.<q class="text-white-500/70">
I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard about some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup.
</q>
more info on blockquotes MDN blockquotes
Happy coding. if you found this helpful, make sure to mark it as helpful thanks.
Hello Filip, Congratulations on completing your fem challenge.
Some suggestions to help improve your code
main element. it gives your solution a semantic markupmore info MDN main element link
h1 tag, not a p tag. <p>
Improve your front-end skills by building projects
</p>
Happy coding. if you found this helpful, make sure to mark as helpful thanks.
Hello Ryan, Congratulations on completing the fem challenge
Some suggestions to help improve your code
main elementmore info MDN main element
more info MDN Picture elment
more info MDN Resposniveness
more info MDN Grid
Happy coding. if you found this helpful, make sure to mark as helpful thanks.
Hello Kyrylo, congratulations on completing the fem challenge.
Some suggestions to help improve your project.
h1 tag instead of h3.<h3 class="card__title">Improve your front-end skills by building projects</h3>
more info here naming conventions%20and%20maintain%20lowercasing%20throughout.)
Happy coding. if you found this helpful, make sure to mark as helpful thanks.
Hei, Challenge was done in collaboration by @Mahmud, @Kareem Roqib and @Darionas on GitHub. Main purpose was to practise on Git and GitHub. Any feedback is appreciated. Created with love.
Hello Darionas, congratulations on completing the fem challenge and also on collaborating with others. very impressive.
Some few suggestions to help improve your project
h1 tag.<h3 class="product-type">PERFUME</h3>
The product description should be wrapped with a p tag, you can replace the div element with a p tag and leave the class in the p tag.
For the old price, you should add a span tag with a class of sr-only inside your del element and a text that says the old price, and use CSS to make it hidden. this ensures it's being read out for screen-readers.
for more info on sr-only class. sr-only KittyGiraudel\
Happy coding. if you found this helpful, make sure to mark as helpful thanks.