Hi @varisDogukan. That's a good solution. Keep coding. Here are some tips for you:
- You don't need to use
h4tag here<h4>London, Unit Kingdom</h4>, you can just useptag easily and to give ahighlightclass 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 theblockquoteelement here,<blockquote>Front-end developer and avid reader.</blockquote>. You can just use thepelement for the text easily and give it a class to style them. - You can use the
listelement 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 your a 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 the a element, if you want to use it as the link <a href="#" class="link">GitHub</a>
- Never give your elements the
heightproperty. It's not a good practice and will break everything. If you want to add some space inside the elements, use thepaddingproperty, especially for thetopandbottom. 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
gridproperty for your.listclass. Thegridproperty 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
containerclass a width value,min-width: min(95%, 384px);. You can usemax-width: 384pxand change the styles of themainelement 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 helpful
@varisDogukan
Posted
@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😁
@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 the text-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%;
