Design comparison
Community feedback
- @adonmez04Posted 9 months ago
Hi @varisDogukan. That's a good solution. Keep coding. Here are some tips for you:
- You don't need to use
h4
tag here<h4>London, Unit Kingdom</h4>
, you can just usep
tag easily and to give ahighlight
class to style it, like<p class="highlight">London, Unit Kingdom</p>
- I don't think it's a
blockquote
. So you don't need to use theblockquote
element here,<blockquote>Front-end developer and avid reader.</blockquote>
. You can just use thep
element for the text easily and give it a class to style them. - You can use the
list
element to organize your menu items. It will be more manageable. So you can use like this,
<ul class="link> <li><a class="link">GitHub</a></li>
Be sure to add the
href
attribute to youra
elements. This tells to the browser that it has a link, and you can use some pseudo-classes with this way. Otherwise, some pseudo-class selectors don't match this element like:link
,:active
etc. So, you can follow everything this way for thea
element, if you want to use it as the link<a href="#" class="link">GitHub</a>
- Never give your elements the
height
property. It's not a good practice and will break everything. If you want to add some space inside the elements, use thepadding
property, especially for thetop
andbottom
. Be careful, the element takes its width value from its parent, but the parent takes its height value from its child. Everything is nested in HTML and CSS. Don't break this default behavior by giving the explicit values. - You don't need to use the
grid
property for your.list
class. Thegrid
property doesn't work likeflex
, it won't do anything if you don't assign any declaration to it. - I think this declaration is complicated to give your
container
class a width value,min-width: min(95%, 384px);
. You can usemax-width: 384px
and change the styles of themain
element to flexbox, such as
display: flex; justify-content: center; align-items: center;
I hope these will help you. Keep coding and have a nice day
Marked as helpful1@varisDogukanPosted 9 months ago@adonmez04 First of all, thank you for your feedback.
- The p tag could have been used instead of the title tags. This time I wanted to do it differently, in a hierarchical order. The same goes for blockquote.
- Normally I would put similar ranked tags or links in the list, but this time I didn't think too much.π
- About adding href to the "a" tag, I added it to the a tag I created while designing, but I forgot to add it as an attribute on the javascript side.π
- The "grid" property may not be useful when used alone. But when used with place-content, if there is a child tag, it will center it vertically and horizontally. That's why I gave the parent tag a height and width (no need to give a width, it's a block element π ).
- Finally, the reason I wrote this
min-width: min(95%, 384px)
code is to minimize the container itself instead of giving the parent a padding-inline on the mobile screen.
By the way, you didn't write the space I should add to the imageπ
1@adonmez04Posted 9 months ago@varisDogukan It's good to hear that these are the experimental styles. If you want to use some experimental styles, write a note about it so people don't have to give you feedback about them. It's also good for your teammates.
You can use the
margin-inline: auto;
declaration to center an element within its parent, and you can use thetext-align: center;
declaration to center a text within in its container.Yeah, I didn't point out about your image, but it looks like it has some issues with it :) You can use this pattern to set an image as a circle (at it's original size...)
aspect-ratio: 88 / 88; object-fit: cover; border-radius: 100%;
0 - You don't need to use
- @JameRussell2010Posted 9 months ago
@varisDogukan you made a simple error in not finishing the "United" in United Kingdom!
Marked as helpful0@varisDogukanPosted 9 months ago@JameRussell2010 I realized it when you wrote it π€¦ββοΈ
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