I am not proud of this at all, It is very inconsistent .
What specific areas of your project would you like help with?Any help to improve the stability will be appreciated.
It is good to see that you are willing to go that extra mile, but I recommend that you master the basics first, your solution works well on screens below 768px, but breaks apart on desktops resolutions, I guarantee you that in a professional environment they will prefer a solution close to the design than a slide with a timer.
Here are some advice if you want:
.your-image {
object-fit: cover;
object-position: center;
# other useful property to preserve the aspect:
aspect-ratio: 16:9;
}
Learn about container strategy, it will help you with responsive designs, without the necessity to set everything with variable size.
No aria is better than bad aria, <img> HTML tags are already announced as images what is the necessity of declaring role="img"?
Never use <div></div> as interactive element, accessibility goes way beyond aria-label and role attributes, Stick to native elements for interactivity, HTML has evolved a lot.
Your code looks good! Your solution is very close to the design.
You can improve in some areas, here are some of my suggestions:
Your site does not have a width limit, in large screens it will continue to spread and break the design, container strategy allow you to specify a max width, take a look at tailwind documentation:
https://tailwindcss.com/docs/responsive-design
Text above image has some accessibility issues, text needs consistent contrast, to see some examples of what I am talking you can check my solution. Here are some tips you can try:
className="cursor-pointer"
# or
.any-button, .any-link {
cursor: pointer;
}
Looks good to me, it's time for you to chase the little details...
<h1></h1> tags are not supposed to be sectioned--color-Very-dark-blue-main-BG, dash-case? CamelCase? consistency is keyPerfection is impossible to achieve. But how close can you reach?
Everything!
It looks great, very close to the design, on mobile screens I think you use too much "white space" around the edges.
Since you are using pure CSS, it will be better to use class name conventions like BEM for example, to avoid collision with class names, and to have better readability and maintainability or you can use CSS modules to scope the styles.
Keep your CSS organized, may I suggest alphabetical order and group related properties together to avoid these mistakes:
.submit-msg-box {
display: block; # you set display property here
position: absolute;
background-color: hsl(187, 24%, 22%);
color: hsl(0, 0%, 100%);
padding: 1rem;
border-radius: 12px;
transform: translate(50%);
right: 50%;
top: 2%;
opacity: 1;
visibility: visible;
display: flex; # you set display property here too
flex-direction: column;
gap: 0.57rem;
}
Following what I suggested(the comments are not necessary):
.submit-msg-box {
# layout
display: flex;
flex-direction: column;
position: absolute;
right: 50%;
top: 2%;
transform: translate(50%);
# dimensions
border-radius: 12px;
gap: 0.57rem;
padding: 1rem;
# visuals
background-color: hsl(187, 24%, 22%);
color: hsl(0, 0%, 100%);
opacity: 1;
visibility: visible;
# fonts...
}
Do not put your clean up functions inside conditionals:
useEffect(() => {
setIsVisible(true);
if (formData) {
const timer = setTimeout(() => {
setIsVisible(false);
onClose()
}, 5000);
return () => clearTimeout(timer);
}
}, [formData, onClose]);
May I suggest this way:
useEffect(() => {
let timer;
setIsVisible(true);
if (formData) {
timer = setTimeout(() => {
setIsVisible(false);
onClose()
}, 5000);
}
return () => clearTimeout(timer);
}, [formData, onClose]);
I am proud that I explored different accessibility challenges.
What challenges did you encounter, and how did you overcome them?To make things like a modal , navigation and different elements accessible. I overcomed this challenges by reading docs and watching youtube videos.
What specific areas of your project would you like help with?Any help will be highly appreciated.
The desktop view looks really good, but the mobile do not.
If I can give you some tips to improve:
Learn about mobile first methodology and container strategy for creating better responsive designs.
Use the native <dialog></dialog> element for creating modals, it will spare you a lot(really a lot) of pain and time.
Accessible components go way beyond aria attributes, just to give you an example, modals are supposed to prevent you to interact with the rest of the page while open.
Pay attention to the little details, your solution does not provide feedback to the user about interactive elements(like the hover state in some buttons), the design team hates when developers do not follow the design.
Interactive elements have a minimum size acceptable, in the case of the minus button, you can make it more accessible by increase the padding and making the clickable area more easy to hit.
Add some padding around your website for mobile devices, elements too close to the screen edges are hard to see or touch in some devices.
the human finger will press ~40 CSS pixels on the screen, keep interactive elements closer or greater than that.
I am proud that I learned how to structure a webpage while making it accessible.
What challenges did you encounter, and how did you overcome them?How to structure the page layout was a bit challenging at the beginning
What specific areas of your project would you like help with?Any feedback is highly appreciated.
It's almost identical to the design, great work!
I think you can improve in some areas:
Your solution does not provide visual feedback to the user about interactive elements, focus states, cursor, etc.
A user would expect a news homepage to have links to articles and be able to click on them to be redirected to the actual article, but your headlines are just text. How would you adapt your solution to this?
Keep your CSS organized, may I suggest in alphabetical order and separate properties per category like:
export const StyledWrapperContent = styled.div`
# layout
display: flex;
flex-direction: column;
justify-content: space-between;
# size
gap: 2.9rem;
# font
color: var(--gunmetal);
font-family: "Inter Regular";
font-size: 1.5rem;
line-height: 2.6rem;
# animations and transitions and etc...
@media (max-width: 1100px) {
gap: 2.4rem;
}
`;