Submitted 6 months ago

Social Links Profile

JmsLpz•80

@JmsLpz

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I have learned a little bit of how to use the grid display.

What challenges did you encounter, and how did you overcome them?

The challenges I encountered were having no knowledge before on using the grid display.

What specific areas of your project would you like help with?

The specific part of the project I would like to help with is learning some techniques of placing easily since I want to make the layout become nice.

Community feedback

Riska997•110

@Riska997Posted 6 months ago

Duplicate <body> Tag

There is a duplicate <body> tag in your HTML code.
You only need one <body> tag to enclose the content of your web page.
Remove the redundant <body> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Links Profile</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="images/favicon-32x32.png">
</head>
<body>
    <header>
        <!-- Header content goes here -->
    </header>
</body>
</html>

2.Incorrect Usage of Heading Tags

In the header section, you are using <h2> tags for elements like name, location, and role.
It's semantically incorrect.
Consider using appropriate tags like <h1> for the name and perhaps <h3> for the location and role.

<header>
    <div class="imgProfile">
        <img src="images/avatar-jessica.jpeg" alt="imageProfile">
        <div class="nameLocation">
            <h1 class="name">Jessica Randall</h1>
            <h3 class="location">London, United Kingdom</h3>
            <p class="role">"Front-end developer and avid reader"</p>
            <div class="buttons">
                <!-- Buttons content goes here -->
            </div>
        </div>
    </div>
</header>

3.Buttons as Headings

Buttons like "GitHub", "Frontend Mentor", etc., are marked up using <h2> tags, which is semantically incorrect.
Use <button> tags for buttons and consider adding appropriate classes or IDs for styling and JavaScript functionality.

<div class="buttons">
    <button class="github">GitHub</button>
    <button class="frontendMentor">Frontend Mentor</button>
    <button class="linkedIn">LinkedIn</button>
    <button class="twitter">Twitter</button>
    <button class="instagram">Instagram</button>
</div>

4.Font Face Declaration

There's a font face declaration in your CSS code, but the font file path seems to be incorrect.
Ensure that the font file path is correct or use a web font service like Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,500;1,500&family=Inter:wght@600&display=swap');

5.Inconsistent Height Units

In various CSS rules, you're using both absolute (px) and relative (vh, rem) height units inconsistently.
Consider using consistent units throughout your stylesheets for better maintainability and responsiveness.

6.Media Query Adjustments

In the media query section, adjust the styles based on the viewport width.

Please log in to post a comment

Join 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