Responsive Landing page

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted 10 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 use p tag easily and to give a highlight 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 the blockquote element here, <blockquote>Front-end developer and avid reader.</blockquote>. You can just use the p 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 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 height property. It's not a good practice and will break everything. If you want to add some space inside the elements, use the padding property, especially for the top and bottom. 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. The grid property doesn't work like flex, 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 use max-width: 384px and change the styles of the main 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 helpful

  1

  ---

  

  P

  Dogukan Varis•580

  @varisDogukanPosted 10 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

  

  P

  Alper•1,010

  @adonmez04Posted 10 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 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%;
  

  0
• 

  James•40

  @JameRussell2010Posted 10 months ago

  @varisDogukan you made a simple error in not finishing the "United" in United Kingdom!

  Marked as helpful

  0

  ---

  

  P

  Dogukan Varis•580

  @varisDogukanPosted 10 months ago

  @JameRussell2010 I realized it when you wrote it 🤦‍♂️

  0