Attempting the second challenge of this section
What challenges did you encounter, and how did you overcome them?No notable challenge that i didn't figure out
What specific areas of your project would you like help with?Let's keep sharing ideas and constructive criticisms in the community
Hi Ugo, great job on completing the challenge. I suggest you try to iterate over your solution until it has addressed the below point:
no need to paste the svg code into your HTML
/* Neutral Colors */ --very-dark-blue: hsl(234, 12%, 34%); --grayish-blue: hsl(229, 6%, 66%); --very-light-gray: hsl(0, 0%, 98%);
--xxs: 0.25rem; --xs: 0.5rem; --s: 0.75rem; --m: 1rem; --l: 1.25rem; --xl: 1.75rem; --xxl: 2.5rem; --xxxl: 3.5rem; }
Hope this helps, good luck
Great job on getting the challenge done.
I'd reccomend attempting to keep the component split in half between the image and the rest of the content
Another cool challenge is trying to replicate the gradient that is covering the image (If you notice it has a slightly dark shadow on top of it) https://github.com/kareemsakr/fe-challenge-4/blob/main/styles.css
Also don't forget to add some padding to the mobile design (or update the screenshot in you repo)
For doing what I love the most Developing something and making my path of dev skills consistently
developing my code skills further
You’ve used <div class="container" role="main" id="Home">. While this is fine for a container, consider replacing it with a <main> element since it’s wrapping the main content of the page.
There’s an unnecessary . Remove it as there’s no opening s where possible. For example:
Recipe Image: Consider wrapping the recipe image in a <figure> and adding a <figcaption> if you want to provide an additional caption.
<figure class="recipe-img"> <img src="assets/images/image-omelette.jpeg" alt="A delicious omelette on a plate"> </figure> Ingredients: Use <section> instead of <div class="recipe-ingredients"> for semantic clarity. Instructions: Replace <div class="Instructions"> with <section> as well. Preparation Time and Nutrition: These could also use <section> instead of <div> to enhance readability and accessibility.Greetings from Toronto, I spent 3 months in Vietnam this year. Had a wonderful time.
I would suggest using a section instead of the first div <div class="profile"> a ul for the list of social links. This would be better for accessibility, SEO and would make the code more meaningful and conforms to the HTML specification.
Otherwise great job, keep it up.
I think I managed to make it look like the original, at least on the desktop screen, so I am proud of it. I also took the time to check all the details regarding the padding and margin to have the same amount of space everywhere where it is required. I realized that there is a big amount of time ahead to take to analyze the project, before starting coding.
What challenges did you encounter, and how did you overcome them?having the right amount of space everywhere was difficult. I managed to do it, but there might be a more efficient way to do it. Plus, I was blocked by the fact we couldn't use Media queries for the mobile version, so I am not sure I managed to do this part properly.
What specific areas of your project would you like help with?I will definitely need help with responsive design, especially if we can't use media queries. I tried to find a way to change the font using VW, but it was inefficient. So, all advice is welcome. And if you notice a mistake on any other topic, please feel free to correct me :)
Use semantic tags where possible. Instead of <div class="container">, consider using a <main> or <article> if this content is the main focus of your page. Avoid <div> tags when a more meaningful element can replace them.
A <button> should not contain a heading tag (<h3> in this case). Buttons are typically used for actions (like form submission or navigation), and wrapping a heading in a button is semantically confusing. If “Learning” is a label or category indicator, it might be better as a <span> or <p> styled as a badge instead of a button.
Use <time> for the date, with the datetime attribute for machine readability. This helps screen readers and improves accessibility.
<time datetime="2023-12-21" class="date">Published 21 Dec 2023</time>
Headings should follow a logical order for accessibility and SEO. Avoid skipping heading levels (<h1>, <h2>, <h3>, etc.). If "HTML & CSS foundations" is the main title, use <h1> only once, and make sure subsequent headings follow a hierarchical structure (<h2>, <h3>, etc.) based on their importance. Avoid using <h2> for the description. Instead, use a <p> tag for non-heading text.
If you wanna do things by the book, try avoiding divs and spans as much as possible. It helps with accessibility. Check the below but keep the html specification as your main guide. Everything else looks good to me
<body> <main class="main-card"> <header class="img-container"> <img src="./images/image-qr-code.png" alt="QR code" class="qr-code" /> </header> <h2 class="card-title"> Improve your front-end skills by building projects </h2> <p class="card-text"> Scan the QR code to visit frontend Mentor and take your coding skills to the next level </p> </main> </body>
