Design comparison
Solution retrospective
I learnt so much about pictures. spent the whole day trying to use the img tag!
What challenges did you encounter, and how did you overcome them?Getting the correct picture to show up as viewport width changes.
What specific areas of your project would you like help with?None, excited to keep going!
Community feedback
- Account deleted
Congratulations on completing the challenge!
I see you got the letter spacing effect for the "PERFUME" by adding whitespaces between the letters in the HTML file. An alternative way to do this would be by using the letter-spacing property. I think this approach would give you more control over the spacing. For instance, suppose you had written
<cite>Perfume</cite>
in your HTML. You could write the following CSS:cite { text-transform: uppercase; letter-spacing: 4px; }
Marked as helpful1@taiwogbadamosiPosted 6 months ago@Oczywsziysya Wow, that's perfect, thank you so much for your helpful reply! I knew there had to be a better way of doing the spacing.
I see how letter spacing would definitely be much better for this sort of effect, but I don't see the utility of the text-transform, if you can help with that? why not just have it capitalised in the html?
1Account deleted@taiwogbadamosi to be honest, me neither, right now I can't see the reason behind this, but some articles I've read introduced this property and they say it's because sometimes it's useful to preserve the HTML text the way it is and do these transformations in the CSS instead. However, just knowing that such property exists is useful, I imagine that you could need it when interacting with the DOM using JavaScript, for example. But yeah, for this case in specific it's rather "useless", but I like it for some reason XD
0
Please log in to post a comment
Log in with GitHubJoin 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