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;
}
`;
That is a nice solution! But the design team will be upset with you in the next stand up meeting, because you did not use their colors.
Tailwind has utility classes for setting height and width with the same value, you can use className="size-4" instead of className="w-4 h-4".
When you set the className="hidden" the element is set to:
element {
display: none;
}
This remove the element from the page, use className="sr-only" to keep it only to assistive technologies.
This is the first TypeScript project I've implemented and I was surprised that it took less time than I expected to implement given there was a steep learning curve involved.
I managed to break the solution down into components that I believe are 'right-sized' for the solution and also applied the principles of typing in terms of defining interfaces for the typed React pops. Another feature that I used from TypeScript is 'Generic Types' for the Function Components (Accordion and AccordionItem)
I learned a great deal about TypeScript and React Function Components and would not do anything differently because this project is ideal for learning a new tech stack.
What challenges did you encounter, and how did you overcome them?Looking at the list of requirements, the initial feeling is slightly overwhelming - so what I do is break down the problem into separate concerns:
The navigation requirement threw me off a little - so I decided upfront that buttons would be the most appropriate way to go because they natively support tab indexing and keyboard actions - In this solution the challenge was really to style buttons so they look like and behave like links.
The obvious challenge was to learn enough TypeScript to be safe - I managed to get by using the React Docs and looking at some unrelated tutorials - the idea was to learn the pattern for defining types and employing TypeScript for function components.
Another challenge is to avoid 'over-engineering' so I simplified the data layer into a single object with the list of FAQs. I could have made things more complicated by fetching json from the server but managed to resist that urge.
What specific areas of your project would you like help with?Any recommendations on improving the codebase will be helpful and appreciated.
Thanks!
Your links are leading to a 404 page.
Great solution! They do not provide all the necessary colors in the style-guide to this challenge, but if I could give you tips for improve your solution:
Closer elements should be lighter, your buttons have darker backgrounds than the card, this takes away the perception of depth
Use more semantic elements, you could achieve the same result using: <form>, <input type="radio" > instead of only buttons.
Add styles to the cursor to highlight interactive elements like:
button {
cursor: pointer;
}
Try the new hooks from React, useActionState gave me good help with this challenge.
The last tip is more an personal opinion, I try to not relay on frameworks too much, one example is the condition to show the thanks card, you could hide it with css, making your solution work in any framework or vanilla javascript, just using:
.thanks-card {
display: none;
}
Nice, it is really close to the design.
The tips layout needs to be three columns on desktop, but mine got the placeholder text chopped.
The key to improve here is how you handle "white space", increasing the padding in some areas on desktop view will make it looks better.
Looks good to me! But you put bold where is thin and thin where is bold, your implementation lacks visual hierarchy, the texts in the card are evenly spaced but should not be.
I like that you are using typescript enums, but sometimes this can be enough:
const timeFrame = Object.freeze({
daily: "Yesterday",
weekly: "Last Week",
monthly: "Last Month",
})
# I can use both key and values in my code and reduce the number of loops
I think your solution is more complex than should be, you can reduce the number of loops in the code to 1 and do not hard code the titles of the cards, it is the same mistake rookies made but instead of if/else blocks you are using switchs.
You can improve your use of html tags, <h1> must be one per page, think like it is a book, a book has only one name. You can do a lot with javascript but use native elements to create user interaction, this way your site respect accessibility rules.
Not every text needs to be a heading, even if it is in bold or with large font size.
That looks good! Your input is losing focus as soon as I start typing(I am using firefox), the rest seems to work fine.
You can improve the visual hierarchy by adjusting the font size of your the title on desktop screens and stay close to the design.
On mobile screen(360px) your card does not fill the screen leaving dark blue borders on top and bottom.
# add this to your button to provide a better feedback to the user about interactive elements
button {
cursor: pointer;
}
using React , i made two components , one for the Card and one for the Modal that would open when i click the share button .
then i used useState to toggle opening/closing the Modal component.
the css was kinda annoying to figure out , especially for the mobile view .
What specific areas of your project would you like help with?if there is a better/simpler way to style the project and use react , please let me know .
Good job! this one was really tricky too me as well, you can add an arrow to your modal using a pseudo element:
.your-modal::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Designers expect us to follow their design, but only developers understand the limits of the technology, if your modal does not have space to show up, show it on the left side until it has space, it is better than overflowing the page and become unreachable. the same with the image, keep the card vertical until it has space to be horizontal.
Do not comment your code with {/* footer */} use the tag <footer>, the same with the comment {/* share button */}, if the class shareBtn, the image shareIcn and the alt text share icon does not tell me that this is a share button, nothing will.
Tip for accessibility, when using svgs and images within buttons, prefer to add an aria-label attribute, an alt text must provide context, it is better to write 'open share menu' instead of 'share icon'.
Great work!
Consider using a container strategy so your website does not continue to spread in large screens:
@media (min-width: 640px) {
.container {
max-width: 640px
}
}
this way you can control how wide your website will be.
Good job! you are getting there.
It is nice to see a HTML file formatted nicely, but organize your CSS too, keep in alphabetic order and divide properties by appearance, size, font and animations (take a look in my repository to see what I mean).
Your grid has an empty slot in the middle, you can adjust that by making the cards on the sides 2 rows taller, 3 rows are not necessary:
# You will have to reorganize your cards again
.card:nth-child(1), .card:nth-child(4) {
grid-row: 1 / span 2;
}
Pay attention to 'justify-content' and 'align-items' properties, grids also have 'justify-items' and 'align-content' properties.
<br> tags are good, but you can limit text by the number of characters too (try to not go beyond 80, it's hard to read):
p {
max-width: 60ch;
}
Design principles matter the most, everything should be aligned with something else, this help us visualize what is related to each other and now it is the biggest problem in your website.
Good job, it is very close!
If you need to set height and width with the same value, tailwind has an 'size-' utility class for that.
You can extend tailwind colors, so you won't need to type text-[#hex-color] every time and get autocomplete too.
I think you can improve the use of semantic tags in your html, not every text needs to be a heading.
In some mobile resolutions your image is off center or partially cut, in a product card this can not happen and it's a bad idea to set it as background image.
Good job! It is very close to the design, but you have a lot to improve in your code.
Try remove the last border from the table, the design will look more clean, something like this:
table tr:not(:first-child) td {
border-top: solid 1px var(--stone-100);
}
Trust me, little details matter more than people think.
Despite what people say, do not make everything reusable because you are using a framework that can do that, your components are too complex because of that, it's hard to read and maintain.
keep it simple, it is just a recipe page, not a recipe book. You can achieve reusability with CSS classes more easily than with react components.
useState is to make content reactive, props are by default reactive, you are using useState wrong, here one example:
# pass a default value for list
export function List({ list = [], ...yourProps }) {
# you do not need useState here, list is already reactive
return (
<>
list.map((element, index) =>
<Items key={index} colorSubtitle={colorSubtitle} colorText={colorText} subtitulo={element.subtitulo} descripcion={element.descripcion} />
);
}
# there is a lot more to improve, but you will get it with time.
I am most proud of not giving up on making it better when it was at 90%.
What challenges did you encounter, and how did you overcome them?I had to relearn a lot from the previous challenge, not much was left in my head, but I guess that's practice for you.
What specific areas of your project would you like help with?I couldn't get the active state of the text to work on github even though it works ok on local.
Good work! You are very close to the design, add a border to the card, the mobile screen is not ok on firefox
Open firefox browser type 'ctrl + shift + m' and select a smaller screen, you will see that the styles you added are crushing the page, take a look at modern-normalize github repository, browsers have different styles, this will help set them equal.
Some of your css comments are redundant or unnecessary, look at modern-normalize css comments you will see what i mean.
You are styling some tags you do not use, there is a lot of challenges, take easy.
Careful when using relative units like vh, vw, % and similar, when setting padding and margin prefer using px unit, if you need different values, use calc(), clamp(), media queries and similar.
Search for prettier plugin, it will format your code for you.
