I was able to complete the project in a few hours. I think I might use a framework next time.
What challenges did you encounter, and how did you overcome them?I faced a challenge with the responsiveness but was able to figure it out in the end.
What specific areas of your project would you like help with?I would love any feedback on the correctness of my approach to the challenge.
Great job on completing the project!
Some improvements
/* Group related styles together */
.section-omelette-recipe,
.section-preparation-time,
.section-ingredients,
.section-instructions,
.section-nutrition {
/* Your styles */
}
/* Simplify selectors */
.omellete-recipe-header {
/* Your styles */
}
/* Normalize font sizes */
h1, h2, h3 {
font-size: 2.5rem;
}
/* Ensure accessibility */
.img-omelette {
/* Your styles */
}
Overall, you've done a commendable job
Keep up the great work!
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.
<body> tag in your HTML code.<body> tag to enclose the content of your web page.<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
<h2> tags for elements like name, location, and role.<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
<h2> tags, which is semantically incorrect.<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
@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
6.Media Query Adjustments
Making all the spacings, i would do more semantic tags as the previous commenter said it just that i didn't know much
What challenges did you encounter, and how did you overcome them?Making everything in place as i am not aware of all the tags, but i will learn as i go just to make sure i am not stuck
What specific areas of your project would you like help with?learning all the tags and the css properties does require some research or knowledge beforehand
Make the card design responsive
-Width is set to a fixed percentage (width: 15%;).
-This means that the card will always occupy 15% of the viewport width, regardless of the screen size.
-To make the card design responsive, use relative units like percentages or viewport width (vw) to ensure that the card adjusts its size based on the screen size.
.Card {
/* Instead of fixed percentage, use percentage or viewport width for responsiveness */
width: 90%; /* Example: occupy 90% of the viewport width */
}
Make use of semantic HTML elements
-Semantic HTML elements provide meaning to the content, making it easier for browsers, search engines, and screen readers to understand the structure of the document.
-Instead of using generic <div> elements for structural purposes, use semantic elements to better convey the purpose of each section of the webpage.
<header>
<!-- Header content goes here -->
</header>
<article>
<!-- Main content/article section goes here -->
</article>
<footer>
<!-- Footer content goes here -->
</footer>
I dont think i do anything 'great' here. One thing I learned is definitely flexbox and how to use it the way I wanted it to be.
What challenges did you encounter, and how did you overcome them?I want to create the .container width using relative measurement. I was trying to use the same resolution as the content inside with added padding. I tried fit-content but it seems that the width doesn't fit according to the content inside. So I ended up using absolute measurement
What specific areas of your project would you like help with?I'd like to know how to adjust size according to the content inside. And I want to know which part of my code could be improved according to industry standard.
There is no source code to view on this project as the GitHub link is non-accessible.
I am unable to to do the review.
