Social links profile using HTML and CSS

Community feedback

• 

  xNyfPtx•1,260

  @xNyfPtx

  Posted about 1 year ago

  • Your solution is very similar to the design it self, well done!
  • For your semantic HTML, this section caught my eye

  <div class="links">
    <div class="btn-1">GitHub</div>
    <div class="btn-2">Frontend Mentor</div>
    <div class="btn-3">LinkedIn</div>
    <div class="btn-4">Twitter</div>
    <div class="btn-5">Instagram</div>
  </div>
  

  This is semantically wrong and inaccesible, instead this is what your HTML should look like

  <ul class="links">
    <li><a href="#" class="btn-1"></a></li>
    <li><a href="#" class="btn-1"></a></li>
    <li><a href="#" class="btn-1"></a></li>
    <li><a href="#" class="btn-1"></a></li>
    <li><a href="#" class="btn-1"></a></li>
  </ul>
  

  The HTML is pretty self explanatory here, we use the <ul> and <li> tags because it has quite many links here. If it was like 2 or 3 links, there would be no need to use the <ul> and <li> tags since it is too short. the <a> tag is explantory since in the real world, the buttons might take you to their profile on whatever platform and that's pretty much a link

  • This section caught my eye aswell

  <div class="info">
    <h2 class="name">Jessica Randall</h2>
    <h5>London, United Kingdom</h5>
    <p>"Front-end developer and avid reader"</p>
  </div>
  

  It is not semantically correct aswell to skip headings. You should only increase it by 1 each time.

  This is the correct HTML for this, you can see that it isn't from <h2> to <h5> but from <h1> to <h2>.

  <div class="info">
    <h1 class="name">Jessica Randall</h1>
    <h2>London, United Kingdom</h2>
    <p>"Front-end developer and avid reader"</p>
  </div>
  

  • Another error I found in your semantic HTML is this part

  <div class="container">
  ......insert your content here
  </div>
  

  What you should do is replace it with a <main> tag. A div on its own does not give any meaning to people with disabilities using specialized devices such as screen readers. A <main> however, gives special meaning to those devices. It implies that it is the main content as in the tag name itself.

  • Use a CSS Reset. What a CSS reset does that it makes your styles look the same in all browsers and makes it both helpful and convenient for you and the users that will visit your site. You should add one in all of your projects with it by just copy & pasting the CSS reset. I reccomend you use this one instead

  • Don't apply the fonts using the * selectors, as doing so may decrease performance in larger scale projects. If your project only uses one font, use it on the body selector instead so that elements will inherit the font.

  • Use rems in place of px. We usually use px for small stuff such as borders, outlines, shadows. For paddings, margins, width and other stuff, I reccomend you use rems instead. Here's a good resource aswell for determining on what css unit you should use.

  • NEVER USE PX FOR FONT RELATED PROPERTIES, see why

  • Apply the styles directly on the body instead of using the .container selector you have in your CSS, also use min-height instead of height in centering the div. When you use height instead of min-height, the container will never grow in height even if the text becomes taller, what happens is that the content will be hidden therefore making it not responsive and accesible

  • Don't set a width and height on most items. We use fixed-width and fixed-height (fixed means using width/height and in the units that dont scale such as rem and px) on the elements that are not supposed to shrink or are small enough that they wont shrink such as profile pictures.

  • You would typically set both a max-width in fixed units and a width in responsive units such as vw, % and instead of a width so that the element will still be able to shrink. For height, don't set one unless you reallly need it because the paddings, margins, text will likely take up that space already. An example is a button, you can use paddings instead of height. If you really do need to set a height, use min-height instead

  • Use CSS Variables / Custom properties. This will make your code much more reusable and easy to read. You can learn it here

  00