Riska997• 110
@Riska997
Posted
- 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.
0
