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.