Design comparison
Solution retrospective
What do you think Guys Looking forward to your feedbacks And i have some questions to ask if anyone wants to answer thank you.
Community feedback
- @IamparvesPosted 9 months ago
Overall, your solution is good. However, there are some points I would like to mention for improvement.
First, you should not use
button
tags for links; instead, usea
(anchor) tags. Additionally, it is not always necessary to wrap elements in an extra div as you did with the name, location, and description; they could have been placed in a single div.Always strive to avoid using fixed width/height for elements like you did with the link items. Try to use relative units or the
max-width
,min-width
,max-height
,min-height
properties.I also noticed that you used a grid in the links div. But you gave a column width of 100px and used padding-right of 215px to center the link items, which is definitely not a good approach. Instead, use
grid-template-columns: 1fr
for a single column and then usejustify-items: center
to center the links.That's all I could notice. Feel free to ask me anything; I will try to answer if I know.
0@ZionCodes1Posted 9 months ago@Iamparves Ok thank you so much for the review I really appreciate it and as I am a new developer Is max-width the same as width or are they different And can the max-width be used the same way as width e.g. max-width: 300px And I really need a mentor thanks if you could help me with that
0@IamparvesPosted 9 months ago@ZionCodes1
max-width
is related towidth
but not exactly the same. It's like saying that an element can be as wide as it needs to be, as long as it's less than 300px.To learn more you can check out this page from W3Schools: https://www.w3schools.com/cssref/pr_dim_max-width.php
0@ZionCodes1Posted 9 months ago@Iamparves I also want to know how to use the @media screen to make my website more responsive with both laptop website view and mobile website view
0@ZionCodes1Posted 9 months ago@Iamparves I also want to know how to use the @media screen to make my website more responsive with both laptop website view and mobile website view
0@IamparvesPosted 9 months ago@ZionCodes1
I think it would be a little hard to explain this in the text.
You can read some articles or watch videos on
CSS Media Query
. If you are unsure of which resources would be suitable, please let me know and I will try to suggest some resources.1@IamparvesPosted 9 months ago@ZionCodes1
If you like to read:
A Complete Guide to CSS Media Queries: CSS-Tricks
CSS media query : how to make website responsive
Learn CSS Media Queries by Building Three Projects
If you want to follow video guide:
CSS Media Queries & Responsive Web Design tutorial for Beginners
1
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