
Solution retrospective
Hello! Here is my third submission on the frontendmentor.io platform. Still love the css animations as you can tell :D
Also this time I approached the coding of the project as mobile first. I must tell that it saved me a lot of headache and I had to write much less code.
Although on a landingpage like that, most likely a client does not want to present ratings that are given less than 5 stars, but I added a possibility to add every rating from one to five. These classes can be added easily with JS to the span element. For example if there is a 4 star rating you can add a class .four-stars
to the span element and it will present 4 stars instead of 5.
As always, feel free to comment :) Awesome, awesome platform and community here!
Cheers, Verner
Please log in to post a comment
Log in with GitHubCommunity feedback
- @brasspetals
Hello again, Verner! 👋 Sorry, I missed this one.
Another great animation job! Also, excellent job on the responsiveness. I love how much attention you gave to the the tablet and "in between" styles. It really looks great. 👍
Happy to hear you enjoyed doing mobile first! I agree - I think it makes life MUCH easier.
Your HTML isn't quite semantic. A
header
element (andfooter
as well, although not used here) should not go inside amain
element. Also, the error from your report is occuring because if you use asection
element, you always need a heading or another label (I'll refer you back to this extensive article). This entire challenge would probably be one "section" of a full-page layout, so using things likeheader
andmain
aren't really needed here. HTML semantics can be very tricky! The article I linked here is really useful, and I still go back to it often.Again, awesome job on this one! Happy coding!
- @Mohammd1321
hey man your layout awesome but i noticed you included every element literally to give them the same style there is something called universal selector which is this * instead of writing every single element in there like you did here
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video you can replace all of that with simply this
- {
}
- P@palgramming
Really nice job on this challenge ⭐⭐⭐⭐⭐
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