Implementing react hooks for state management.
What challenges did you encounter, and how did you overcome them?Challenge was to changes the images based on the viewport size. To overcome had to implement a custom hook which kept track of the viewport size.
What specific areas of your project would you like help with?Better Code structuring and practices.
Hi Prem Kumart,
Nice solution! Your code is well-structured and easy to read. I'll provide my feedback for improvements that I saw relevant.
<section> tags as well (instead of <div>)<picture> tag. It can handle the different images based on the condition (e.g. max-width or min-width)rem for images instead of pixels because they're more responsiveI hope I could help with my feedback! Happy Coding! :)
Hi eMKa18,
Nice solution! I checked your code and live site, here's my feedback. In appearance the only difference I can see (maybe it's intentional) that the background color of the different skills are too strong.
Your code is well-structured and readable which is great. You mention in the tags that you used React for the project but I don't see it in the code. Currently you have everything in the HTML except the data, that you get by a fetch call in the JS file (getData()). Additionally, you could have created a component for the skill and populate the DOM through JavaScript. For example a renderSkills function where you retrieve the summary div and through a for loop you append each skill to that div. Each skill is a component filled with the correct data.
Overall, your solution is great and what I've mentioned above is a way to make it more reusable.
Happy coding!
smooth animations (display-property animation now works!)
What challenges did you encounter, and how did you overcome them?i first tried to set up the success-message container as part of the form-container. My idea was to make a smooth animation from the bigger form-container to the smaller succes-message container. But i failed and couldn't manage to get a smooth width/height animation, because of the paddings of hidden containers. This cost me a lot of time...
Hi Martin,
I checked your solution and you did a great job! I really like the smooth animations and responsiveness. I saw that you also used semantic HTML, BEM notation and SCSS.
The only thing I don't understand that in your solution tags you gave #react but it didn't seem like you used it.
Happy coding!
Apply the fundamentals of JavaScript. I will improve my code the next time.
What challenges did you encounter, and how did you overcome them?How draw with CSS and how apply JavaScript. Making a research about it and observe examples.
What specific areas of your project would you like help with?I want to improve my JavaScript skills.
Hi Gianmarco,
You did a great solution! Your code is well-structured and easy to read. In appearance you caught it perfectly.
In functionality, it would be nice if you press the share button again then it would close the share section. Another thing I've noticed, is that you can use rem/em instead of pixels for height and width.
Keep up the good work!
Color Banner on each card
Instead of using-border, I learned form @MikDra1
Create a Wrapper Element for Each Card: Ensure each card is positioned relatively. This allows for absolute positioning of child elements.
Add a Decorative Element for the Line: Inside each card, create an additional element (e.g., ``).
Style the Decorative Element:
position to absolute.height: 3px;width: 100%;top: 0;left: 0;background-color: [desired color]; (e.g., black)Positioning and Sizing:
position: relative; to serve as a reference point for the absolute positioning of the decorative element.Alternative with Pseudo-Elements:
::before or ::after pseudo-elements to create the line:
.card {
position: relative;
}
.card::before {
content: "";
position: absolute;
height: 3px;
width: 100%;
top: 0;
left: 0;
background-color: [desired color];
}
This approach ensures that each card has a straight line at the top, and the use of relative and absolute positioning keeps the layout organized and consistent.
Hi edpau,
I really like your solution, you did a great job. Your code is clearly understandable and you used the BEM notation perfectly.
The only difference I managed to notice compared to the design is that your card's background color is not exact the same white.
Happy coding!😊
This time I tried to use the measurements provided through figma, I am quite satisfied with the result and I hope you like it
What specific areas of your project would you like help with?I would like help with the semantics of my code and more than anything ways to optimize it
Hi Matias,
Very nice solution, so close to the design! The only difference stems form the paddings. Regarding your code, it's well-structured and readable. I saw that you used rem which is great, you can also you for width, max/min-width and height, max/min-height.
Happy coding!
