Design comparison
Solution retrospective
I have done the exercise but the image has me martyred, I have achieved it after a few attempts. But the issue of height has me lost.
Can anyone tell me the easiest way to make a responsive image in a table cell please? Thank you!
Community feedback
- @isprutfromuaPosted over 2 years ago
Frontendmentor
Hi there. You did a good job 😎
keep improving your programming skills
your solution looks great, however, if you want to improve it, you can follow these steps:
✅ don't use tag selectors. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.
✅ choose a naming convention , methodology, or framework and stick to it.
✅ use code formatters for structuring your code. Also try to place styles to separated file. it is better to put only critical styles inside the head
✅ You Should Stop Using Pixels. They are static and aren’t truly relative to the root font-size like REM and EM units
✅ you could connect all your fonts in one line instead of repeating google fonts links
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet" />
like that:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
I hope my feedback will be helpful. You can mark it as useful if so 👍
Good luck and fun coding 🤝⌨️
Marked as helpful1@GARGithubPosted over 2 years ago@isprutfromua Hello, thank you very much for your comment.
-
I haven't put any styles inline so I assume you mean specificity. For example: .card-footer.stats span { ... }. Would it be better to put .stats span { ... } directly?
-
This point, I do not understand, where is there disagreement in the nomenclature used? Regarding the framework, I think it is better to do it when I have already mastered the language.
-
The code is formatted with Prettier.
-
In practically all the code the relative size is used, specifically "rm" except in the table and in the maximum width. Should I also put it in relative sizes there?
-
It's true, it had duplicate code that was copied directly from the google source box hehe. It is already corrected.
On the other hand, the question I asked when submitting my solution, how could I do it?
Regards,
0@isprutfromuaPosted over 2 years ago@GARGithub Hi there
all you need to do is set the classes for all the markup elements. this will greatly simplify the coding process. the same situation with units. Use one type of unit, you will be better able to navigate in them.
Cheers, peace and happy coding!
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