@vcollins1Submitted 5 months ago
What specific areas of your project would you like help with?
Any good feedback would be helpful
P
Purnama S Rahayu
@catreedleAll comments
- @catreedlePosted 3 months ago
This is great. The transition between screen sizes is smooth. JS could use some comments to help the reader understand what you are trying to do. I can't navigate the site only using keyboard tho. That's one of the prompts, from what I understand. Other than that, everything is great. Good job!
0 - @vcollins1Submitted 5 months agoWhat specific areas of your project would you like help with?
If there is anything that I can improve please leave comment
@catreedlePosted 3 months agoI don't find any error. It looks really similar to the design, and the code is very easy to read. Great job! :)
0 - @kerekiwereSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
My JavaScript could probably use some refactoring! 🛠️
@catreedlePosted 3 months agoGreat job on finishing this challenge! I found that the calculator result overflows its container when I input a huge number. That's probably out of the scope of this challenge tho. Your javascript is easy to read and understand.
1 - @radriann21Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I hadn't used react for a while, the fact of having been able to implement the Reducer and data manipulation with some ease seems incredible to me, because, when learning react I had always had problems with the management of a global state.
What challenges did you encounter, and how did you overcome them?The styles, while not complex, were a bit of a challenge to get them to a good point.
- @danmlarsenSubmitted 4 months agoWhat specific areas of your project would you like help with?
I appreciate any helpful feedback
- @LucasNgTgSubmitted 4 months ago
- @hectorlil48Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
"I'll finish this project in three days. I used to overthink designs like this and not start on them. But now I have a process and will keep using it for my next project."
What challenges did you encounter, and how did you overcome them?I encountered difficulty in getting the cards to line up as I intended. After facing this setback, I watched instructional videos addressing this issue. I utilized the grid from the inspector tool and successfully aligned the cards properly.
What specific areas of your project would you like help with?Maybe how animations work. But using them more in my projects will help get me a better understanding
@catreedlePosted 4 months agoThe site looks beautiful and responsive on any screen size. I can always see the whole horizontal content of the page on any resize (I struggled with mine). It's cool that you added animation, but it's a bit dizzying when it shows repeatedly when I resize my browser around. Great job!
1 - @Ayyubiy90Submitted 4 months ago@catreedlePosted 4 months ago
adding
align-items: centerto the card container will make the left and right card look more similar to the design. Everything else is great. The transition between screen sizes is smooth. Well done!Marked as helpful0 - @tris6Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
It was a little scary to finish mobile layout only to see the desktop mock, with the whole card on its' side. But this problem highlights the beauty of CSS selections. I simply changed the container flex direction, resized the div, and pleasantly surprised how far along it got me.
I also noticed I'm wasting dev time on fine-tuning spacing one section at a time. I think if I start with the bigger changes across all elements (eg. font size), I will spend less time double-handling fiddling with margins to get it perfect.
What challenges did you encounter, and how did you overcome them?I struggled most of all with the icon. My initial approach was an old school , but struggled to find the control I needed. I eventually tried a class to insert image via CSS, and instantly found control much easier.
I refactored HTML in the desktop stage, to wrap text content in a container for center-aligning. I think it's still decent practice rather than a rookie mistake. There simply was no need in mobile portrait, but was a need for desktop landscape.
What specific areas of your project would you like help with?It felt like I spent a lot of lines fine-tuning margins. I possibly could get the layout in a more elegant way.
@catreedlePosted 4 months agoThe result is so good and the code is well structured. The layout looks perfect in any screen size. Great job!
0 - @sfschiavettoSubmitted 4 months ago@catreedlePosted 4 months ago
It might be helpful to extract your color variable like this :root { --white: hsl(0, 0%, 100%); } for reusable and readability. Your container looks to wide compared to the design. Setting the width to 55% makes it more similar in my case. Then you can set the width bigger for mobile with media query. Other than that it's really neat. You've done a great job!
Marked as helpful0 - @muhammadkevinpfSubmitted 4 months ago@catreedlePosted 4 months ago
The first thing I noticed was the card was too wide compared to the design, and the social link buttons are not active on hover. Maybe you can specify the width of the class container, only if you want it to look a bit more similar to the design. Everything else is good. I really like how you structure your CSS. Well done!
0 - @hunter-codeSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Eu me orgulhei por, minha aptidão de buscar o conhecimento por mim mesmo, e aplicar soluções no momento necessário e prender com a prática. Me sinto orgulhoso por evoluir à medida em que vou resolvendo o desafio.
What challenges did you encounter, and how did you overcome them?os desafios que encontrei ,foram referentes , ao posicionamento de cada um dos elementos por conhecimento sólidos das propriedades css e seus valores.
What specific areas of your project would you like help with?Aprender de maneira sólida, como incorporar fontes externas em meu projeto, à partir de arquivos que eu já possua , para que eu possa usar a propriedade @font-face.
@catreedlePosted 4 months ago- The solution includes semantic HTML, except for the
<div class="attribution">that is a direct child ofbody - Good accessibility
- The layout looks good and stable in size on a range of screen sizes, however, it is not centered vertically. I think you can use flex for this.
- The code is well-structured and readable
I'm not really on board with the use of a button element that is not interactive/clickable. Overall, great job on this challenge!
0 - The solution includes semantic HTML, except for the
