I always though viewport area and the body area are same. Realized that it's not. When i set my body height to 100vh, then my div got centered vertically to the body.
What specific areas of your project would you like help with?Is this help for the upcoming challenges?
Hello SriMidhinesh!!!
Your HTML structure looks great! However here are few recommendations that you may need to add to enhance accessibility, SEO, and compliance with WCAG:
Meaningful alt text: Instead of just "QR Code," provide a more descriptive alt text to clarify what the QR code does:
<img src="images/image-qr-code.png" alt="QR code linking to Frontend Mentor for coding skill improvement" class="img-class">
For your next project, consider using the SVG file over PNG because SVG files are more scalable, small in file size, and preferred for SEO due to their indexing ability by search engines.
role="img" to all <img> elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content. e.g<img src="images/image-qr-code.png" alt="QR code linking to Frontend Mentor for coding skill improvement" role="img" class="img-class">
Semantic HTML: Use semantic tags like <main>, <section>, or <article> to help screen readers understand the structure:
<main class="wd-main">
<section class="wd-img">
<!-- QR code image here -->
</section>
<section class="wd-content">
<!-- Content here -->
</section>
</main>
Meta Description: Adding a meta description can improve search visibility and help users understand the page content:
<meta name="description" content="Scan the QR code to access Frontend Mentor and enhance your front-end coding skills with project-based learning.">
<link rel="stylesheet" href="index.css">
These adjustments will enhance the user experience, improve SEO, and keep the code aligned with accessibility best practices. You did great! Keep it up
Hello Eduardo!
Congratulations on completing this challenge. Your code looks well structured and organized however here is a recommendation you might want to consider to improve your project's SEO;
Add a <meta name="description" content="Recipe page">.
You did a great job. keep it up!
Hello BuildAndBreak
Your code structure is clean and organized. However here are some recommendations for improving accessibility, SEO, and WCAG compliance:
Accessibility
Add a more descriptive alt text for the avatar image, such as "Photo of Tiago Pereira" to enhance clarity for screen readers.
Use semantic tags for improved accessibility and structure. For example:
<section class="personal-info">
<!-- Personal information content here -->
</section>
Addaria-labelattributes for the social media links to provide screen readers with more context, especially if these links contain icons or brief text. For instance:
<a href="https://github.com/BuildAndBreak" aria-label="Visit Tiago's GitHub profile">GitHub</a>
Avoid using quotation marks as stylized text. Instead, add them using CSS, or consider using<blockquote> for the quote with a CSS class to style it as desired.
Improve the<title>with more context, such as "Tiago Pereira | Full Stack Web Developer | Social Links Profile".
Add a <meta name="description" content="Profile of Tiago Pereira, an aspiring Full Stack Web Developer based in Zurich, Switzerland. Links to social media and developer profiles included.">.
Address Element:
Avoid using<address>for general text; it’s typically for contact information. Replace it with a <p> tag for the location or add a<span>with CSS.
Add font-display: swap; to avoid invisible text while the custom font loads:
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">```
- Focusable Elements:
Ensure all interactive elements (like links) have focus states for keyboard navigation.
With these adjustments, your code will be more accessible, SEO-friendly, and compliant with WCAG standards.
***Great work on the initial structure!***
Que lo hice practicamente solo
What challenges did you encounter, and how did you overcome them?Casi ninguno
What specific areas of your project would you like help with?En Markdown
Hola Bryan Chiang!!!
¡Felicidades por completar el desafío! Tu código HTML está bien estructurado; sin embargo, aquí tienes algunas recomendaciones para mejorar la accesibilidad, el SEO y el cumplimiento de WCAG en tu código:
Accesibilidad
Texto alternativo para imágenes:
Proporciona un texto alternativo significativo para las imágenes para mejorar la accesibilidad. Por ejemplo:
<img class="card__image" src="assets/images/illustration-article.svg" alt="Ilustración relacionada con el tema del artículo">
<img class="author__image" src="assets/images/image-avatar.webp" alt="Foto del autor Greg Hooper">
Usa elementos HTML5 semánticos (como <article>, <header>, <footer>, etc.) para mejorar la legibilidad para tecnologías de asistencia y mejorar el SEO. Por ejemplo:
<article class="card">
<header>
<span class="status">Aprendizaje</span>
<time datetime="2023-12-21" class="publish__date">Publicado el 21 de diciembre de 2023</time>
</header>
<!-- Contenido aquí -->
</article>
Envuelve las fechas o tiempos en etiquetas <time> para mayor claridad, como ya lo has hecho. Asegúrate de que los atributos datetime sean precisos para los lectores de pantalla.
Jerarquía de encabezados:
Considera ajustar los niveles de encabezado para seguir una estructura lógica para SEO. Por ejemplo, si esta tarjeta es un componente independiente en una página, un <h1> podría ser adecuado para el encabezado principal si es el contenido principal. De lo contrario, asegúrate de que siga una jerarquía lógica en la página.
Incluye una etiqueta <meta name="description" content="Breve descripción de la página"> en la sección <head> para mejorar la comprensión de los motores de búsqueda y fomentar los clics.
Asegúrate de que la etiqueta <title> describa bien el contenido de la página para SEO, por ejemplo, “Tarjeta de vista previa de blog | Fundamentos de HTML y CSS.”
Usa font-display: swap; en tu enlace de Google Fonts para evitar retrasos en la carga de fuentes y asegurar que el texto sea legible mientras se cargan las fuentes.
Agregar landmarks ARIA (como role="main" en el contenedor de contenido principal) puede ayudar a los lectores de pantalla a entender mejor la estructura de la página.
Esta estructura revisada debería mejorar el SEO, la accesibilidad y el cumplimiento de WCAG.
¡Hiciste un gran trabajo, sigue así!
This is the first time I felt like I understood flex. I understood that I needed to flex with flex-direction column.
I don't really understand what the best way to set the width is. Also the example said that the desktop and mobile widths were different but they seemed similar to me. I ended up using a max-width, but I imagine this is not correct.
There were many aspects I simply guessed on like the border radius.
What challenges did you encounter, and how did you overcome them?It took me while to understand flex. And It took me a while to understand that the styling sometimes goes into the parent and not the child.
I struggled to see why div surrounding the image had some extra padding around the image. The reason turned out to be the paragraph element beneath the image was expanding to as much space as possible.
What specific areas of your project would you like help with?I would like to know if my general use of flex was correct, and how to think about things like max-width of if there is a better way.
Hello JacksonRudd!!!
Your HTML structure looks good and well-organized. Here are a few recommendations to improve accessibility and structure for readability
<main> and <section> tags to define content areas.
Using <main> and <section> improves structure and helps screen readers.<p class="bold">with a heading tag like <h1> for better readability and accessibility.You did great. Keep it up!!!
Hello Lamine
I am so much impressed with your solution. Your code looks clean and well-structured and just pixel-perfect however there here are a few minor suggestions to improve it:
<img src="assets/images/illustration-article.svg" alt="Article illustration on HTML and CSS foundations">
For the author's image, you can be a bit more descriptive as well:
<img src="assets/images/image-avatar.webp" alt="Profile photo of Greg Hooper, the author">
<footer class="card-profile">
<img src="assets/images/image-avatar.webp" alt="Profile photo of Greg Hooper">
<p>Greg Hooper</p>
</footer>
You did a wonderful job. keep it up.
Hello Skwarek!!!
Your HTML structure for the social links profile looks well-organized. Here are a few suggestions for improvements:
<img src="assets/images/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall" />
Consider using more semantic HTML elements like <nav> for the social media buttons since they represent navigation.
Example:
<nav class="buttons">
<button>GitHub</button>
<button>Frontend Mentor</button>
<button>LinkedIn</button>
<button>Twitter</button>
<button>Instagram</button>
</nav>
Buttons vs Links: Since these buttons are meant to link to external profiles, using anchor tags <a> with the appropriate href attributes would be more semantically correct.
Example:
<div class="buttons">
<a href="#">GitHub</a>
<a href="#">Frontend Mentor</a>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>
Hello LukasBFrontend!!! Your solution for the "Blog preview card" looks good and well structured. Here are suggestions for improving your HTML code in terms of best practices, performance, and SEO:
The <article> element is used correctly for the main content, but the <aside> tag for the date is unnecessary. Instead, use a <time> element with the datetime attribute to better represent the publication date.
Example:
<time id="publish-date" datetime="2023-12-21">Published 21 Dec 2023</time>
Make sure your image paths are consistent (use forward slashes /), especially in the portrait image path where you're using backslashes .
Example:
<img id="portrait" alt="portrait" src="assets/images/image-avatar.webp">
It’s best to follow consistent naming conventions. Since id is unique, reserve it for specific elements that you expect to be one of a kind on the page. You might use classes like .card-image, .author-section, .author-name for better scalability and maintainability.
Add loading="lazy" to images to improve page load speed by deferring offscreen images.
Example:
<img id="illustration" alt="weird thing" src="assets/images/illustration-article.svg" loading="lazy">
<img id="portrait" alt="portrait" src="assets/images/image-avatar.webp" loading="lazy">
Make the title more descriptive and relevant for SEO:
Example:
<title>HTML & CSS Foundations | Blog Preview Card Example</title>
Add a meta description to improve SEO:
Example:
<meta name="description" content="Learn about the foundations of HTML & CSS, the backbone of every website, defining structure, content, and presentation.">
Ensure proper heading hierarchy. You have an <h2> but no <h1>. Ideally, every page should have a single <h1> to represent the main heading.
Example:
<h1>HTML & CSS Foundations</h1>
Improve alt text to be more descriptive of the image content.
Example:
<img id="illustration" alt="Illustration showing HTML and CSS" src="assets/images/illustration-article.svg" loading="lazy">
<img id="portrait" alt="Portrait of Greg Hooper, the author" src="assets/images/image-avatar.webp" loading="lazy">
If necessary, consider adding ARIA labels to improve accessibility on links and interactive elements.
Example:
<div class="attribution" aria-hidden="true">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
These changes will enhance the performance, SEO, accessibility, and code maintainability of your project. You did great. Keep it up!!!
Hello n33wbie!!! You code structure looks good and well structured. Here are some few suggestions for improving your HTML code based on best practices, performance, and SEO:
Consider using semantic tags like <article>, <section>, <header>, and <footer> to better define the structure. For example, the main card content could be wrapped in an <article>, and the publication date, image, and author could be within <section> tags.
Example:
<article class="container">
<section class="image-section">
<img src="/assets/images/illustration-article.svg" alt="main img" />
</section>
<section class="content-section">
<div class="icn">Learning</div>
<p>Published 21 Dec 2023</p>
<div class="card-text">
<h1>HTML & CSS foundations</h1>
<p>These languages are the backbone of every website, defining structure, content, and presentation.</p>
</div>
<div class="author">
<img src="/assets/images/image-avatar.webp" alt="Greg Hooper" />
<p>Greg Hooper</p>
</div>
</section>
</article>
Make class names more descriptive, using lowercase and hyphen-separated words (e.g., icn can be renamed to tag-label for clarity).
Use modern formats like WebP for your images if possible to reduce file size. The illustration-article.svg can remain as SVG if it's a vector image.
Add loading="lazy" to both images to improve performance by deferring offscreen image loading until the user scrolls near them.
Example:
<img src="/assets/images/illustration-article.svg" alt="main img" loading="lazy" />
<img src="/assets/images/image-avatar.webp" alt="Greg Hooper" loading="lazy" />
Make the title more descriptive for search engines. For example:
<title>HTML & CSS Foundations | Blog Preview Card</title>
Add a meta description to improve SEO. For example:
<meta name="description" content=" Learn the foundations of HTML and CSS, the backbone of every website, defining structure, content, and presentation.">
Make the alt text more descriptive. For example:
<img src="/assets/images/illustration-article.svg" alt="Illustration representing HTML and CSS foundations" />
<img src="/assets/images/image-avatar.webp" alt="Portrait of Greg Hooper, the article's author" />
If you have any interactive elements, ensure they have appropriate ARIA labels for better accessibility.
Example:
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a>
By following these suggestions, your webpage will be more structured, accessible, performant, and optimized for SEO.
Hello sapWRLD!!!
Here are the suggestions for improving the HTML code based on best practices, performance, and SEO:
Use semantic tags like <article>, <section>, and <header> to improve the structure. For example, the recipe content can be wrapped in <article>, and the preparation time, ingredients, and instructions can go inside <section>. Correct the class attribute for the Ingredients heading: class="#" should just be class="ingredients". Consistent Class Naming:
Use lowercase class names (e.g., Ingredients, .Instructions, and . Nutrition should be .ingredients, .instructions, .nutrition to maintain uniformity). External Links:
Add rel=" no opener no-referrer" to external links that open in new tabs for security.
<img src="assets/images/image-omelette.jpeg" alt="Omelette" class="image" loading="lazy">
CSS Optimization:
Consider minifying your CSS file to reduce load times. Also, consider inlining critical CSS for the first render to avoid blocking. Font Preload:
Since you’re using Google Fonts, it’s better to preload the fonts for faster performance.
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" as="style">
<title>Simple Omelette Recipe | Quick & Easy Meal Ideas</title>
<meta name="description" content=" Learn how to make a simple omelette recipe. Quick and easy instructions for a nutritious meal. Perfect for any time of the day.">
<img src="assets/images/image-omelette.jpeg" alt="A delicious, golden omelette served on a plate" class="image" loading="lazy">
Button and Link ARIA Labels: Consider adding ARIA labels to enhance accessibility for links and any interactive elements.
I made this project as a quick review from what I know of HTML/CSS in more or less 2 hours. So, I think I did quite okay doing this project.
What challenges did you encounter, and how did you overcome them?What bugged me a little was positioning the main section in the center of the webpage, but I overcame it by asking for help from a friend of mine who's a junior developer.
What specific areas of your project would you like help with?I'd love to add new functionalities like a dark/light mode.
Hello Evelyn Fernandes!!!
Your HTML structure looks solid for the "Social Links Profile" project. Here are a few recommendations to improve your code structure.
<li><a href="#" aria-label="Visit Jessica Randall's GitHub profile">GitHub</a></li>
<meta name="description" content = "Frontend mentor Social media links profile solution " />
Implementing these improvements will boost your site's performance, SEO, and accessibility!
I learned a lot about various CSS elements and how to include multiple font weights when importing a font from the Google API.
What specific areas of your project would you like help with?I'm still a little unsure about the positioning of the card in the screen.
Hello gjrestifo!!!
Your HTML structure looks well-organized and simple for the QR code component. Below are a few suggestions for improvement:
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor website" />
<meta name="description" content="QR code component built for the Frontend Mentor challenge. Scan the QR code to enhance your front-end skills with hands-on projects.">
I hope this helps. You did great. Keep it up.
I'm happy to just finish this to be honest. It was tough for me. I had to use someone's solution as reference to complete this.
What challenges did you encounter, and how did you overcome them?just making the grid look how it should was horror for me.
What specific areas of your project would you like help with?If you have any advice, do share. Definitely not my best work though. Code is messy too.
Hello TheTrueScout!!!
Your HTML structure for the Bento grid layout looks great! It follows a clear pattern, making it easy to read and maintain. Here are a few suggestions for further refinement:
<img src="assets/images/illustration-grow-followers.webp" alt="Illustration showing followers growth over time">
<h2 class="h2--medium col-white">Grow followers with non-stop content.</h2>
<section id="block-1" class="container__card container__card--purple500 container__card--TextAlign-center">
<h1 class="col-white h1-mg-TopBot">Social Media <span class="col-yellow500">10x</span> <span class="style-Italic ">Faster</span> with AI</h1>
<img src="assets/images/illustration-five-stars.webp" alt="Five-star rating illustration">
<p class="col-white">Over 4,000 5-star reviews</p>
</section>
<meta name="description" content="Boost your social media management with AI-powered tools, optimize schedules, and grow followers effortlessly.">
These changes will help improve the performance, accessibility, and maintainability of your project but hey!!! you did great. Keep it up. Happy coding!!!
In this project I don't have anything to be proud of, I think I could have done a better job, my CSS code could have been more organized, etc... I'm not satisfied with my results in this challenge and I hope I can learn from the mistakes I did.
What challenges did you encounter, and how did you overcome them?I don't really know to be honest, I guess everything was a challenge to me, I struggled a lot with the layout itself, my CSS structure, paddings & margins, etc...
What specific areas of your project would you like help with?Hello Soy-Ibrag!!!
Congratulations for completing this challenge. Your HTML for the recipe page is clean and well-structured. Here are some suggestions for improvements:
<img src="assets/images/image-omelette.jpeg" alt="A simple omelette on a plate">
<h2>Preparation time</h2>
<p><strong>Total:</strong> Approximately 10 minutes</p>
<tr class="border">
<th scope="row">Calories</th>
<td class="value">277kcal</td>
</tr>
<meta name="description" content="A simple and easy-to-follow recipe for making a classic omelette with optional fillings.">
These minor adjustments will improve accessibility, performance, and SEO for your recipe page!. Generally you did great. Keep it up!!!
I am mostly proud of my use of css grid and how I was able to insert the images from a JSON file. I am also proud of all the things I implemented using JavaScript.
What challenges did you encounter, and how did you overcome them?First, I was mostly challenged with the aspect of deleting an element from the cart but later on, I was able to find my way around it and finish it up. Second, the aspect where once a user clicks on the "Add to Cart" button and they'll be able to increase the amount of item on the cart was especially difficult in terms of finding the item in the cart and increasing the amount on it as well as increasing and decreasing the total cart amount.
What specific areas of your project would you like help with?the aspect where I would be able to increase/decrease specific items by clicking their buttons
Hello KONY05!!!
Congratulations on completing this challenge. Your HTML structure is well-organized and visually appealing for the "Product list with cart" concept. Here are a few suggestions and minor corrections:
<img src="assets/images/image-waffle-desktop.jpg" alt="A waffle with berries">
<img src="assets/images/illustration-empty-cart.svg" alt="Empty cart illustration">
<img class="modal_thumbnail" src="assets/images/image-waffle-thumbnail.jpg" alt="Thumbnail of waffle image">
<meta name="description" content="A product listing for desserts with an interactive cart.">
Replace the div with section in the cart and food-items areas.
<section class="cart">...</section>
<section class="food-items_container">...</section>
<h3 class="food_category">Waffle</h3>
<h2 class="food_name">Waffle with Berries</h2>
I am creating a front end Product preview card component challenge with html && css thank you frontend mentor for this challenge
Hello yohannes abrham!!!
Congratulation on completing this challenge. Your code is already on the right track, but here are a few suggestions and improvements to make it more robust, accessible, SEO-friendly, and aligned with best practices:
General Best Practices Semantic HTML
Use more semantic HTML elements for better accessibility and SEO. Instead of using a <section>, consider using a <article> for the card, as it represents a standalone piece of content.
Use a <figure> tag for the image, which semantically represents self-contained content (i.e., a product image). This improves both structure and accessibility. Example:
<article class="card">
<figure class="card-img">
<img src="images/image-product.jpg" alt="Gabrielle Essence Eau De Parfum bottle">
</figure>
<div class="card-content">
<span class="perfume">Perfume</span>
<h1 class="title">Gabrielle Essence Eau De Parfum</h1>
<p class="text">
A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.
</p>
<h2>$149.99 <span class="old-price">$169.99</span> </h2>
<button class="add-to-cart"><img src="images/icon-cart.svg" alt="Cart Icon">Add to Cart</button>
</div>
</article>
Accessibility (WCAG Compliance) Alt Text for Images
Your alt="" for the img inside the button needs to describe the image for screen readers. Something like:
<img src="images/icon-cart.svg" alt="Cart Icon">
Button Accessibility
Ensure that your button has clear and concise text that describes the action. The current "Add to Cart" is good but ensure it’s wrapped in a semantic <button> tag. Also, adding aria-label for improved accessibility is a good practice:
<button aria-label="Add Gabrielle Essence Eau De Parfum to cart">
<img src="images/icon-cart.svg" alt="Cart Icon">Add to Cart
</button>
SEO (Search Engine Optimization) Meta Description
Add a meta description to help search engines understand your page better and improve click-through rates:
<meta name="description" content="Product preview for Gabrielle Essence Eau De Parfum - A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.">
Use of Headings
You are using appropriate heading levels (<h1> and <h2>), which is great for SEO. Make sure to maintain logical heading structures across the page for better search engine visibility.
Image Optimization for SEO
Use descriptive filenames for images to improve SEO. Instead of icon-cart.svg, you could name it chanel-cart-icon.svg, for example. Performance & Optimization Lazy Loading Images
For performance, you can enable lazy loading for your product image and cart icon. This will help defer loading until the image enters the viewport:
<img src="images/image-product.jpg" alt="Gabrielle Essence Eau De Parfum bottle" loading="lazy">
Additional Suggestions CSS BEM Naming Convention Consider using the BEM (Block-Element-Modifier) naming convention for better readability and maintainability in CSS. For example:
<div class="card__content">
<h1 class="card__title">Gabrielle Essence Eau De Parfum</h1>
<p class="card__description">...</p>
</div>
Conclusion By making these changes, you will improve your website’s accessibility, SEO, and overall performance. These changes also help in following modern web development best practices while keeping your code clean and maintainable. I hope this helps. Happy coding!!!
i'll be glad to receive feedback.
Hello kewuyemi1!!!
Your code is well-structured, but there are a few improvements you can make regarding accessibility, SEO, performance, and best practices. Below are my detailed recommendations:
General HTML Best Practices Semantic HTML:
It's best to use more semantic HTML elements to improve the document's structure and make it more accessible to screen readers. For example: Replace <section> with <main> or <article> since the content is the main part of the page. Add a <footer> if there is more content (even if not visible, it improves document flow). Updated example:
<main>
<div class="center">
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor">
<div class="content">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level.</p>
</div>
</div>
</main>
Accessibility (WCAG Compliance) Alt Text for Images:
The alt attribute is empty. Always provide descriptive alt text to make the content accessible to screen readers:
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor">
Headings Hierarchy:
If there are no other headings on the page, using <h1> is fine. However, ensure there is a clear hierarchy if more sections are added later. Color Contrast:
Ensure there is sufficient color contrast between text and background colors. For example, you are using hsl(216, 15%, 48%) for the paragraph text. Double-check this in your stylesheet to meet contrast guidelines. Tools like WebAIM Contrast Checker can help. SEO (Search Engine Optimization) Title and Meta Description:
Your <title> tag is good, but consider adding a more descriptive and keyword-rich title:
<title>QR Code Component | Frontend Mentor Challenge</title>
Add a meta description to improve SEO:
<meta name="description" content="Scan the QR code to visit Frontend Mentor and improve your front-end development skills with hands-on challenges." />
Performance Font Loading Optimization:
Currently, the font is being loaded using the @import statement, which can delay rendering. It's better to use <link> in the <head> for faster loading:
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet" />
Image Optimization:
Optimize your image by using modern formats like WebP for better performance. You can use a fallback for browsers that don’t support it:
<picture>
<source srcset="images/image-qr-code.webp" type="image/webp">
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor">
</picture>
Lazy Loading for Images:
Implement lazy loading for your image to improve performance, especially on mobile devices:
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor" loading="lazy">
Mobile Responsiveness Flexbox Optimization: Your layout is using Flexbox, which is good for responsiveness. Make sure that it scales correctly on smaller screens (e.g., test on mobile viewports).
Consider setting a max-width for the .center container to ensure it doesn’t stretch too much on large screens:
.center {
width: 100%;
max-width: 350px;
}
Additional Recommendations Use External Stylesheets:
Although you are using inline styles here for simplicity, it’s better to move these styles to an external stylesheet (styles.css) for maintainability. HTML Validation:
Conclusion With these adjustments, your code will follow best practices for accessibility, SEO, and performance while maintaining clean and maintainable structure. You did great!!! keep it up
What i'm most proud of is being able to set up each section effectively. what I would do different next time is probably use the section tag element instead of only using divs.
What challenges did you encounter, and how did you overcome them?Most of the challenges that I had was during the css process, there many times where I struggled to align different components with each other.
What specific areas of your project would you like help with?Not a specific area but what i would want help in is organizing and simplifying my code so that its not so long especially when it comes to css.
A more specific area that I would want help in is knowing when is it best to use flex or grid when displaying components.
Hello bolojutsu!
Your HTML code is structured well, but there are several improvements that can be made in terms of web best practices, accessibility, SEO, and WCAG compliance. Below are my suggestions and recommendations for each area:
General HTML Best Practices Spelling Mistakes:
Correct common typos such as: "Ommlet" → "Omelette" "vegastbles" → "vegetables" "intructions" → "instructions" "Protien" → "Protein" "fillngs" → "fillings" "Approximatly" → "Approximately" "Table Sppon" → "Tablespoon" "fluffer" → "fluffier" "minuet" → "minute" Consistent Heading Structure:
Use <h1> only once for the main page title to improve semantic structure. Subsequent sections should use <h2> or <h3>.
For example, replace:
<h1>Preparation time</h1> with <h2>Preparation time</h2>
<h1>Ingredients</h1> with <h2>Ingredients</h2>
Keep a logical hierarchy of headings. Accessibility (WCAG 2.1 Compliance) Image alt Attributes:
The image element <img src="image-omelette.jpeg" alt="" /> should have a meaningful alt text describing the image to improve screen reader accessibility.
Example: <img src="image-omelette.jpeg" alt="A plate of freshly cooked omelette" />
Accessible Color Contrast:
Ensure sufficient color contrast between text and background colors to meet WCAG 2.1 standards (minimum contrast ratio of 4.5:1 for normal text). This would be handled in your styles.css, so double-check your color choices. ARIA Landmarks:
Consider adding appropriate ARIA landmarks (e.g., <main>, <nav>, <footer>) to help assistive technologies understand the structure of your content. Example: Wrap the main content inside a <main> tag. Use of Lists:
Ensure the ul elements are semantically appropriate (you've done this well for ingredients, instructions, etc.). However, consider using <dl> (definition lists) for nutrition facts as it represents key-value pairs more clearly.
<dl>
<dt>Calories</dt>
<dd>227kcal</dd>
<dt>Carbs</dt>
<dd>20g</dd>
<dt>Protein</dt>
<dd>20g</dd>
<dt>Fats</dt>
<dd>22g</dd>
</dl>
Use of Language Attribute:
The language is set correctly (lang="en"), but ensure that the specific variant (en-US, en-GB, etc.) is used depending on the region, especially for accessibility and SEO. SEO (Search Engine Optimization) Title and Meta Description:
Your <title> is good but could be more descriptive for SEO purposes. Consider:
Example: <title>Omelette Recipe | Easy 10-Minute Breakfast Recipe</title>
Add a meta description for better search engine ranking.
Example:
<meta name="description" content="Learn how to make a classic omelette in just 10 minutes with this easy recipe, including optional fillings like cheese, vegetables, or meats." />
Heading Structure:
Ensure your heading structure follows SEO best practices: use a single <h1> for the main heading (e.g., "Sample Omelette Recipe") and subsequent headings for different sections of the page.
Performance Optimization Preload Important Assets:
You are preconnecting to Google Fonts, but also consider preloading the font for faster loading:
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" as="style" />
Image Optimization:
Use modern image formats like WebP instead of JPEG for better performance. Implement lazy loading for images to improve page load time:
<img src="image-omelette.jpeg" alt="A plate of freshly cooked omelette" loading="lazy" />
Mobile Responsiveness Viewport Meta Tag:
The viewport meta tag is correctly set to ensure the site scales well on mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Conclusion By addressing these recommendations, your webpage will be more accessible, SEO-friendly, and optimized for performance. You did great! keep it up.