Mohamed Ashraf• 300
@hamody-74
Submitted
eros77sc
@eros77sc
All comments
- eros77sc• 100
@eros77sc
Posted
Hello! Congratulations on completing another challenge, it's very well done! Here are a few tips I noticed where you can improve:
- Your
intro-text<h1>receives a color described in the styleguide.md file and also gets font-weight: 400;. - In the "Preparation time" section, there is a box surrounding the section with a subtle color (almost transparent) described in the styleguide.md file.
- Great job using
::marker, but the color of the "Preparation time" markers is different from the other list markers. Also, the numerical list markers are bold. - The colors of the titles "Ingredients," "Instructions," "Nutrition," and the table numbers follow the same brown described in the styleguide.md.
- To better use Semantic HTML, there is no need to use
<span>in<li>. You can choose to use<strong>for the words highlighted in bold.
Keep up the good work, you're doing great!
Marked as helpful
0 - Your
- Vutlhari Shiburi• 100
@Exterminator737
Submitted
eros77sc• 100@eros77sc
Posted
Hello! I looked at your code and noticed that you placed the links in <button> elements. However, the href attribute is not used with <button> elements, so in this case, it would be ideal to use <a> elements and then style them as buttons using CSS.
Marked as helpful
0 - M.A.B• 80
@MohamedAbdelBAQIMo
Submitted
eros77sc• 100@eros77sc
Posted
Hello, Mohamed! It's great that you're also on the Frontend Mentor journey. I liked your solution, and I'd like to give you some tips, if that's okay with you?
- It would be helpful if you could review Semantic HTML, as it helps developers, browsers, and assistive technologies to function better. For example, replacing <div> with <main> or <footer>, and also checking the importance of the order of <h1> to <h6>.
- The color of the "Learning" label is the same as the background!
- There are other details like borders and box-shadow, and the border-radius could be larger, but I don't want to be too picky with you. You have your own learning journey ahead!
Marked as helpful
1 - Megha S Patil• 70
@meghaspatil1
Submitted
What are you most proud of, and what would you do differently next time?
I am proude of to post web in live page got to know in detail. web live using github pages, and how to make page responsive using google fonts.
What challenges did you encounter, and how did you overcome them?
challenge was not able to fix image in box, it took a lot time to fix, but lot of fresh study i got the changes in px , height, weight, border-radius , i did it.
What specific areas of your project would you like help with?
i need help in css stylesheet,some more responsive page, and need to know any more better i would done to make it QR-component more good.
eros77sc• 100@eros77sc
Posted
Oi, Megha!
Acabei de finalizar este desafio e vou te dizer... tentar centralizar esse card foi bem desafiante! Você pode tentar usar Flexbox para isso, eu usei assim:
-
Envolvi o <div> do card com um <main>, que também já auxilia a escrever um HTML semântico (lá naquele último <div class="attribution"> esse div pode ser trocado por footer pela mesma função), e no CSS fiz assim: html, body { background-color: hsl(212, 45%, 89%); height: 100%; margin: 0; display: flex; flex-direction: column; }
main { flex: 1; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
Isso traz o desafio de alinhar esse rodapé, o que também se faz com flexbox! Boa jornada e espero que você tenha ficado muito feliz por ter construído uma página, celebremos!
0 -
