@faridlakbar
Submitted
feel free to give me feedback, thank you...
@KarimAyman97
@faridlakbar
Submitted
feel free to give me feedback, thank you...
@KarimAyman97
Posted
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!
@eldon6219
Submitted
feedbacks are appreciated <3
@KarimAyman97
Posted
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!
@umutcankocamis
Submitted
Hello Dear Frontend Mentor Community, When I hover over the buttons, the text goes up. What is the solution to this?
@KarimAyman97
Posted
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
@JaroslavHosovsky
Submitted
I will be glad for any feedback.
@KarimAyman97
Posted
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 !
@revanthv999
Submitted
Hope it is close...
What are the best practices to arrange components vertically?
@KarimAyman97
Posted
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
@andrewteece
Submitted
It's a great, quick project to work on! All comments and suggestions are appreciated.
@KarimAyman97
Posted
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
@Shivu150199
Submitted
any type of feedback is welcomed
@KarimAyman97
Posted
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
@filipjanik00
Submitted
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! :)
@KarimAyman97
Posted
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
@cipdanila
Submitted
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.
@KarimAyman97
Posted
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