Ibrahim Mohammed
@MohammedOnGit
All comments
- Ibrahim Mohammed• 590
@MohammedOnGit
Posted
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:
- Accessibility and Alt Text Ensure the alt attribute for the main image (illustration-article.svg) is descriptive for better accessibility.
<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">- Semantic HTML Instead of wrapping the profile info (card-profile) in a div, you could use the <footer> element, which is more semantic for this section, as it typically contains author or metadata.
<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.
0 - Skwarek• 30
@Skwarekk
Submitted
Ibrahim Mohammed• 590@MohammedOnGit
Posted
Hello Skwarek!!!
Your HTML structure for the social links profile looks well-organized. Here are a few suggestions for improvements:
- Best Practices Alt Text for Image: Always include a descriptive alt text for the profile image to enhance accessibility and SEO.
<img src="assets/images/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall" />- Semantic HTML:
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>Marked as helpful
1 - LukasBFrontend• 40
@LukasBFrontend
Submitted
Ibrahim Mohammed• 590@MohammedOnGit
Posted
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:
- Best Practices Semantic HTML:
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>- Image Path Consistency:
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">- Class and ID Naming:
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.
- Performance Image Optimization:
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">- SEO Improvements Title Tag:
Make the title more descriptive and relevant for SEO:
Example:
<title>HTML & CSS Foundations | Blog Preview Card Example</title>- Meta Description:
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.">- Heading Hierarchy:
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>- Accessibility Image Alt Text:
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">- ARIA for Accessibility:
If necessary, consider adding ARIA labels to improve accessibility on links and interactive elements.
- Minor Code Improvements Hidden Attribution: The attribution is currently hidden using display: none. If you want to keep it hidden but still accessible for screen readers, consider using aria-hidden="true".
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!!!
Marked as helpful
1 - n33wbie• 20
@n33wbie
Submitted
Ibrahim Mohammed• 590@MohammedOnGit
Posted
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:
- Best Practices Semantic HTML:
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>- Consistent Class Naming:
Make class names more descriptive, using lowercase and hyphen-separated words (e.g., icn can be renamed to tag-label for clarity).
- Performance Image Optimization:
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" />- SEO Improvements Title Tag:
Make the title more descriptive for search engines. For example:
<title>HTML & CSS Foundations | Blog Preview Card</title>- Meta Description:
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.">- Accessibility Image Alt Text:
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" />- ARIA Attributes:
If you have any interactive elements, ensure they have appropriate ARIA labels for better accessibility.
- Minor Code Improvements External Links: Add rel="noopener noreferrer" to external links for security and performance when opening links in a new tab.
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.
0 - sapWRLD• 20
@sapWRLD
Submitted
Ibrahim Mohammed• 590@MohammedOnGit
Posted
Hello sapWRLD!!!
Here are the suggestions for improving the HTML code based on best practices, performance, and SEO:
- Best Practices Semantic HTML:
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.
- Performance Image Optimization: Use modern formats like WebP for better performance. Add the loading="lazy" attribute to the image for lazy loading.
<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">- SEO Improvements Title Tag: The title could be more descriptive for SEO purposes. Example:
<title>Simple Omelette Recipe | Quick & Easy Meal Ideas</title>- Meta Description: Add a meta description for search engines. For example:
<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.">- Accessibility Image Alt Text: The alt text "Omelette" could be more descriptive. Consider something like:
<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.
- Minor Code Improvements Remove the inline style in the
Marked as helpful
0 - Evelyn Fernandes• 10
@yoruwitch
Submitted
What are you most proud of, and what would you do differently next time?
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.
Ibrahim Mohammed• 590@MohammedOnGit
Posted
Hello Evelyn Fernandes!!!
Your HTML structure looks solid for the "Social Links Profile" project. Here are a few recommendations to improve your code structure.
- Accessibility ARIA Labels: Consider using ARIA labels on social links for better accessibility. E.g.
<li><a href="#" aria-label="Visit Jessica Randall's GitHub profile">GitHub</a></li>- Always add meta descriptions on all your pages for SEO.
<meta name="description" content = "Frontend mentor Social media links profile solution " />Implementing these improvements will boost your site's performance, SEO, and accessibility!
Marked as helpful
1 - gjrestifo• 30
@gjrestifo
Submitted
What are you most proud of, and what would you do differently next time?
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.
Ibrahim Mohammed• 590@MohammedOnGit
Posted
Hello gjrestifo!!!
Your HTML structure looks well-organized and simple for the QR code component. Below are a few suggestions for improvement:
- Accessibility Enhancements Ensure the alt text for the QR code image is descriptive. It should explain the purpose of the image to users who may be using screen readers. Example:
<img src="images/image-qr-code.png" alt="QR code to visit Frontend Mentor website" />- SEO & Meta Description Add a meta description to improve SEO and provide more context for users and search engines:
<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.0 - TheTrueScout• 100
@TheTrueScout
Submitted
What are you most proud of, and what would you do differently next time?
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.
Ibrahim Mohammed• 590@MohammedOnGit
Posted
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:
- Image Alt Text Your alt text for images should be more descriptive for screen readers. Instead of repeating the file name, describe the image content:
<img src="assets/images/illustration-grow-followers.webp" alt="Illustration showing followers growth over time">- Header Hierarchy Maintain consistent heading hierarchy for accessibility and SEO purposes. You should avoid jumping from h1 to other sizes like h1--medium. Instead, use h2, h3, etc. Here’s an example:
<h2 class="h2--medium col-white">Grow followers with non-stop content.</h2>- Sectioning for SEO You can group your grid items within semantic tags like <section> or <article> to improve SEO and accessibility. Example:
<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 Description For SEO purposes, adding a meta description will help search engines understand your content better:
<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!!!
Marked as helpful
0 - Ibraghim• 60
@Soy-Ibrag
Submitted
What are you most proud of, and what would you do differently next time?
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?
- Flexbox;
- Responsiveness.
Ibrahim Mohammed• 590@MohammedOnGit
Posted
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:
- Accessibility: Alt Text The alt text for your omelette image can be more descriptive for screen readers:
<img src="assets/images/image-omelette.jpeg" alt="A simple omelette on a plate">- Consistent Heading Levels For better semantic structure, ensure that heading levels follow a logical order: You are using an h1 for the recipe title, followed by an h4 for the preparation time, which might break the logical flow. Consider using h2 for sections like "Preparation time," "Ingredients," "Instructions," and "Nutrition":
<h2>Preparation time</h2>- Use <strong> Instead of <span class="bold"> You are using a span with the class "bold" to make text bold. Instead, use the semantic <strong> tag for emphasis:
<p><strong>Total:</strong> Approximately 10 minutes</p>- Table Structure Your table looks fine but consider using <th> elements for the first column (Calories, Carbs, etc.) to improve semantic meaning:
<tr class="border"> <th scope="row">Calories</th> <td class="value">277kcal</td> </tr>- Add Meta Description Adding a meta description helps with SEO and provides a summary of the content:
<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!!!
Marked as helpful
1 - KONY05• 140
@KONY05
Submitted
What are you most proud of, and what would you do differently next time?
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
Ibrahim Mohammed• 590@MohammedOnGit
Posted
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:
- Optimize Accessibility and Image alt Attributes Ensure that all images have descriptive alt attributes for better accessibility. For instance:
<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 Tags and Comment Clarity Add a description meta tag for better SEO and sharing:
<meta name="description" content="A product listing for desserts with an interactive cart.">- Use Semantic HTML for Structure Consider adding more semantic HTML elements to improve accessibility and structure:
Replace the div with section in the cart and food-items areas.
<section class="cart">...</section> <section class="food-items_container">...</section>- Headings Hierarchy Maintain proper heading hierarchy for accessibility. For example, after <h1>Desserts</h1>, use <h2> or <h3> for the item names within the grid.
<h3 class="food_category">Waffle</h3> <h2 class="food_name">Waffle with Berries</h2>- Script Placement Since you are using the defer attribute, your script will already load after the HTML. If not, move your
Marked as helpful
1 - yohannes abrham• 70
@johnabrham438
Submitted
What are you most proud of, and what would you do differently next time?
I am creating a front end Product preview card component challenge with html && css thank you frontend mentor for this challenge
Ibrahim Mohammed• 590@MohammedOnGit
Posted
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!!!
0 - Yusuf Jamal• 70
@kewuyemi1
Submitted
What specific areas of your project would you like help with?
i'll be glad to receive feedback.
Ibrahim Mohammed• 590@MohammedOnGit
Posted
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:[email protected]&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
Marked as helpful
0
