@13073398
Submitted
@Joe-FE
@13073398
Submitted
@Joe-FE
Posted
Hi, My friend
Congratulations on completing your recipe page project! It's evident that you’ve put in significant effort, and your work showcases your growing skills.
Your recipe page is clean and well-structured, demonstrating good command of HTML and CSS. The visual design is appealing and easy to navigate, making it user-friendly.
Tips you can use to improve your code:👇
<header>
, <article>
, and <footer>
to enhance accessibility.alt
attributes to improve accessibility.HTML Enhancements:
alt
text.CSS Improvements:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Delicious Recipes</h1>
</header>
<main>
<article class="recipe">
<img src="recipe.jpg" alt="Picture of the recipe dish">
<h2>Recipe Name</h2>
<p>Ingredients and instructions...</p>
</article>
</main>
<footer>
<p>© 2024 Recipe Page</p>
</footer>
</body>
</html>
CSS:
:root {
--primary-color: #FF6347;
--secondary-color: #4CAF50;
--font-size: 16px;
}
body {
font-size: var(--font-size);
background-color: #f4f4f4;
color: #333;
}
header {
background-color: var(--primary-color);
padding: 20px;
text-align: center;
color: white;
}
footer {
background-color: var(--secondary-color);
text-align: center;
padding: 10px;
color: white;
}
Your recipe page is a strong foundation, and with a few tweaks, it can become even more polished and professional. Keep up the great work and continue honing your skills!
Best regards, Youssef Salem
@MaxBidder76
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of the fact that the design is well the page is responsive on mobile and any screen sizes.
What challenges did you encounter, and how did you overcome them?
My major challenge was making my text color change when hovering. I made more research on that to solve it.
@Joe-FE
Posted
Dear MaxBidder,
Firstly, congratulations on completing your third project on Frontend Mentor! It's great to see your progress and dedication to improving your front-end skills.
Your social links profile page is well-structured and demonstrates a good understanding of HTML5 and CSS3. The design is simple and clean, which is excellent for user experience.
Tips that may help you:👇
HTML:
alt
attributes to all images for improved accessibility.CSS:
HTML Enhancements:
lang
attribute to the <html>
tag to define the document's language.<header>
, <footer>
) if applicable.CSS Improvements:
The project is a good start and demonstrates a clear understanding of HTML and CSS fundamentals. By addressing the suggestions above, your code will become more maintainable, accessible, and professional. Keep up the great work and continue to refine your skills!
Best regards, [Youssef Salem]