Skip to content
OverviewSolutions
7
Comments
9
Karim Ayman
@KarimAyman97

All comments

  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    Hi faridlakbar Great Job! I have some recommendations for you

    1- try to use separate file for CSS styling * for example * <head><link rel="stylesheet" href="styles.css" /></head> this will help improving code readability

    2- try to change <div class="card"> to a <main class="card"> and the <div class="attribution"> to a <footer class="attribution">

    this does not affect your project visually but it improves SEO as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    0
  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    great Job ! but always try to Provide a more descriptive alt attribute for your image: <img src="assets/images/image-omelette.jpeg" alt="Delicious Omelette">

    Other than that, great job!

    1
  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    Hello Umutcan Kocamış Great Job!

    I would like to suggest a solution. Begin by setting a transparent border for each button initially. Upon hover, apply the desired color and adjust the border accordingly

    
.sedans .learn-more {
        color: hsl(31, 77%, 52%);
        border: 1px solid transparent;  // give it initially transparent border
} 


.sedans .learn-more:hover {
  border-color: hsl(0, 0%, 95%);  // give it the desired colored border on hover 
  color: hsl(0, 0%, 95%);
  background-color: hsl(31, 77%, 52%);
}
    Marked as helpful
    0
  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    Hi , Great Job! simple recommendation each <img> should have alt attribute which describes the image <img src="img/illustration-article.svg" alt="Illustration for the article" />

    this ensures accessibility and also improves overall SEO

    i hope it helps !

    0
  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    hi revanthv999 Great Job !

    1- for your question Here are some best practices to arrange components vertically

    a) Use block-level elements such as <div>, <section>, <article>, or <p>

    b) Use the CSS Flexbox layout for vertical alignment. The flex-direction: column;

    c) CSS Grid Layout . Set the grid container's grid-template-rows

    2- I have some accessibility and semantics recommendations for you.

    try to change <div class="container"> to a <main class="container"> also each image should have alt attribute which describes the image <img class="profile_photo" src="./assets/images/avatar-jessica.jpeg" alt='avatar-jessica'>

    this does not affect your project visually but it improves SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    hi Andrew Teece great job !

    i have a simple comment that every <img> should have descriptive so <img src="assets/images/avatar-jessica.jpeg" class="card--img" alt="" /> should be <img src="assets/images/avatar-jessica.jpeg" class="card--img" alt="avatar-jessica" />

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
  • Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    hi Shivam singh gautam great work . i have some recommendations for you

    1- try to use separate file for CSS styling * for example * <head><link rel="stylesheet" href="styles.css" /></head>this will help improving code readability

    2- Add descriptive alt attributes for your images to improve accessibility. <img src="assets/images/logo.svg" alt="Frontend Mentor Logo" class="logo">

    3- Make sure your navigation links have actual URLs. Currently, your <a> tags in the navigation are empty. <li><a href="#">Home</a></li>

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
  • YANIIツ•510
    @filipjanik00Submitted 10 months ago

    Hello there! I've been learning JavaScript for a week now and came out with a solution of this challenge :) Let me know what you think about it! Have a good evening everyone! :)

    FAQ Accordion

    1
    Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    hi Filip Janik great work you did. I have some accessibility and semantics recommendations for you.

    1- try to change <div class="faq"> to a <main class="faq"> , <div class="faq__title"> to a <header class="faq__title"> and <div class="questions"> to <section class="questions">

    this does not affect your project visually but it improves SEO optimization as well as the accessibility of your project.

    2- try to avoid <hr> Consider using CSS to style borders or margins to separate questions .

    3- Since you have repeated image tags, you can group them together for better readability. <img class="plus-icon" src="./assets/images/icon-plus.svg" alt="Question Plus Icon" /> <img class="minus-icon" src="./assets/images/icon-minus.svg" alt="Question Minus Icon" />

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
  • Ciprian Danila•110
    @cipdanilaSubmitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    Improvements made to the project based on HTML5 semantics, accessibility, and BEM.

    What challenges did you encounter, and how did you overcome them?

    It wasn't really that difficult, so I wouldn't say I encountered too many difficulties.

    What specific areas of your project would you like help with?

    I would try a different approach to achieve something of higher quality. It seems it didn't quite turn out as intended.

    Social links profile (html & css only)

    2
    Karim Ayman•320
    @KarimAyman97Posted 10 months ago

    hi Ciprian Danila great work you did. I have some accessibility and semantics recommendations for you.

    1- try to change <div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">

    this does not affect your project visually but it improves SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0