I use flexbox and margin-inline i didn't know to use

Community feedback

• 

  Farid_Danilo•140

  @FaridDanilo

  Posted about 1 month ago

  Improvement suggestion:

  1. HTML semantics: Improve with proper tags

  Replace text-only <li> tags with real buttons or links:

  <ul class="social__links"> <li><a href="#" class="network social__github">GitHub</a></li> <li><a href="#" class="network social__frontend">Frontend Mentor</a></li> <li><a href="#" class="network social__linkedIn">LinkedIn</a></li> <li><a href="#" class="network social__twitter">Twitter</a></li> <li><a href="#" class="network social__instagram">Instagram</a></li> </ul>

  Advantages:

  Improves accessibility (for screen readers and keyboard navigation).

  Improves interaction (real links can be clicked and opened).

  2. Semantic Organization of Content

  You could use tags like <header>, <main>, and <footer> to separate sections if the design were larger. For now, you might consider something like this:

  <main class="social"> <!-- Your content here --> </main>

  CSS Styles:

  You've done an excellent overall job. The design is well-structured, and you use variables, relative units, and consistent styles.

  THE GOOD Good use of :root to define reusable CSS variables.

  Good BEM structure.

  Clean and well-organized styles.

  Correct use of object-fit, border-radius, hover, transition, etc.

  Use of media queries for responsive design.

  Improvement and Optimization Suggestions

  1. True Vertical Centering on the Entire Screen

  You currently use align-content: center; on .body, but it doesn't work because it's not a grid or flex container.

  Solution: Change .body to display: grid or flex to achieve true vertical centering, like this:

  .body { display: grid; place-items: center; }

  This will center .social completely on the screen, vertically and horizontally.

  00
• 

  P

  Eddie•140

  @WeatherheadOnline

  Posted about 2 months ago

  Nice solution!

  00
• 

  Brittani Lovelace•60

  @blovelace84

  Posted about 2 months ago

  Hey, quick question: I notice you have a #react at the top in your solution. Was the entire code meant to be React or just basic HTML and CSS? Just wondering.

  02