Mateus Lima
@mts-mlAll comments
- @MoAdel74@mts-ml
Hey @MoAdel74, congrats on finishing the challenge. Some points, I've noticed:
Does the solution include semantic HTML? No, you used only
div
, it's a small project but you could've used amain
tag.Is it accessible, and what improvements could be made? You used an
h1
which is good, most of the images don't have an semantic value on this project, but you could usealt
to show "Decorative star" or used anaria-hidden
.Does the layout look good on a range of screen sizes? On large screens the image get cut.
Overall, good job!
- @calvinvinWhat are you most proud of, and what would you do differently next time?
I'm proud that I conquered my first app, though single page. So many detailed logics need to be think thoroughly.
@mts-mlHey @calvinvin, you've got an error on your promise. Only the loading is displaying.
- @daniloparrajrWhat are you most proud of, and what would you do differently next time?
I like the fields validations and overall design and responsiveness.
What challenges did you encounter, and how did you overcome them?I had a challenging time adding custom validations and formatting on the currency field.
What specific areas of your project would you like help with?Suggestion on adding animations and proper way to deal with currencies.
@mts-mlGreat solution, you did an amazing job, the code and validation are pretty nice!
The only thing to point out is in desktop size, the solution is not centralized, I don't know Tailwind but using grid,
place-items:center
andmin-height:100vh
solves the problem. - P@kaamiikWhat are you most proud of, and what would you do differently next time?
I am most proud of successfully completing this project using React for the second time, along with TypeScript to enforce type safety and improve code maintainability. It was rewarding to see my growth in understanding state management, particularly with the useState and useEffect hooks, as well as implementing forwardRef for component references. I also took the opportunity to enhance accessibility by adding aria-live announcements for screen readers, which I believe is an important aspect of web development. Next time, I would focus on improving my state management approach by utilizing the Context API from the beginning, rather than relying on prop drilling (I have updated my code with Context now). This would help streamline the data flow and make the code base cleaner and more maintainable. Additionally, I would explore more advanced features of Tailwind CSS to further enhance the styling and responsiveness of the application.
What challenges did you encounter, and how did you overcome them?During this project, I faced several challenges, particularly in creating components and effectively using the useState hook to manage state. Additionally, integrating TypeScript into the project required careful attention to type definitions and ensuring type safety across components. Initially, I struggled with structuring my components in a way that promoted reusability while also ensuring that state was managed correctly across them. To overcome these challenges, I took the time to break down the application into smaller, manageable components, which helped clarify their responsibilities. I also revisited the React documentation and various tutorials to deepen my understanding of the useState hook and how to manage props effectively. By practicing prop delegation, I was able to pass data between components more efficiently (update: Instead of prop drilling I have updated my code with Context API).
What specific areas of your project would you like help with?I would appreciate feedback on several specific areas of my project. First and foremost, I am looking for insights into whether there are any issues with my state management or component structure. I want to ensure that my use of the useState hook is optimal and that my components are designed for maximum reusability and clarity. Additionally, I’d like feedback on how I’ve implemented TypeScript in the project, particularly whether my type definitions and type safety practices are effective and maintainable. Furthermore, I would like to receive feedback on the accessibility features I implemented, particularly the aria-live announcements for screen readers. It’s important to me that my application is accessible to all users, so any suggestions for improvement in this area would be valuable. Lastly, I am open to any general advice on how I can enhance my code quality, whether through better practices, performance optimizations, or improved styling techniques.
Product list Card using React, Tailwind and TypeScript
#accessibility#react#tailwind-css#vite#typescript@mts-mlHey, great solution, really liked the design, I'm still learning about accessibility myself so I can't really help, but overall great job!
- @artscomi@mts-ml
Does the solution include semantic HTML? No, you should use semantic tags like
main
andsection
, not onlydiv
.Is it accessible, and what improvements could be made? I don't know much about accessibility but the images have and alt text, which is good, some areas could use a aria-label.
Does the layout look good on a range of screen sizes? Yes, it's responsive.
Does the solution differ considerably from the design? Just a little, the font is sans-serif and not Hanken Grotesk like in the design, but overall it looks good.
Nice job, I liked the design!
- P@JGedd@mts-ml
Great job!
Looks almost identical to the design!
Does the solution include semantic HTML? No, You only used
<div>
, should you semantic HTML like a<section>
. - @marcfranciss
Bookmark landing page (React | Typescript | Sass | Vite)
#accessibility#react#sass/scss#typescript#vite@mts-mlHey!
Nice project!
Does the solution include semantic HTML? Yes
Does the layout look good on a range of screen sizes? Yes
Does the solution differ considerably from the design? A little, somethings are a little off, like the blue background, differs from the design and logo color is different too.
It's a nice project, well done!
- @1deadjoeWhat are you most proud of, and what would you do differently next time?
I a proud that I was able to style the webpage without layout breaking. Although it took me quite a while. I have gotten a great grasp on transitions too.
What challenges did you encounter, and how did you overcome them?The only challenge I have encountered was trying to add in a slide in animation for the three slides. I eventually resigned, but I am still learning.
What specific areas of your project would you like help with?I hope someone could help me understand how to include the slide-in animation to my webpage. I would higly appreciate any thoughts. On the animation, and also how to go about understanding the JS involved.
@mts-mlHey @1deadjoe!
I like how there are no "empty" spaces when switching between different screen sizes. Did you read an article or was it just practice?
Also, I liked the arrow transition you made.
At width: 950px, the design breaks, the title and image get messed up.
As for the JS, I named all sections with the same class and used
document.querySelectorAll('.menu__bg')
to select them all. Since it returns an array, I used forEach() to loop through and select the correct one to display. I'm happy with how my JS turned out, and if you'd like to check it out, I believe it could help you.Marked as helpful - @AZZAM-K@mts-ml
Hey!
Nice design.
Does the solution include semantic HTML? Yes
In my opinion you should add some
transition
effects, really improves hovers effects and the visual experience. - P@srijanssWhat are you most proud of, and what would you do differently next time?
- I learned how to use BEM methodology for CSS.
@mts-mlGreat solution, it looks identical!
Nice job! ;)
To be picky, you should've used
cursor: pointer;
when hovering over the image. Aside from that, everything is great.Marked as helpful - P@olopcodesWhat specific areas of your project would you like help with?
Might not be the cleanest/dryest code, but it's a work in progress
@mts-mlHey @olopcodes!
Really liked you design, the option to select between two themes is pretty nice, great job!
Does the solution include semantic HTML? No, only
<div>
used and no<label>
or<h1>
.Does the layout look good on a range of screen sizes? Yes, it does.
- @salomasikWhat are you most proud of, and what would you do differently next time?
I enjoyed making the responsive for this app the most, next time I want to use REACT for this app.
What challenges did you encounter, and how did you overcome them?Displayed design for tablets.
What specific areas of your project would you like help with?I want to hear suggestions on working with js frameworks.
@mts-mlHey @salomasik!
I also want to recreate this challenge using React, I believe it's going to be a good experience using props, useEffect()...
The feedback: Your solution looks good, needed to change the font family to the correct one. The gap between cards is larger than in the provided solution, and on mobile screens, it's not centered.
The HTML is semantic and the solution is responsive.
Marked as helpful - P@juliusalbertoWhat are you most proud of, and what would you do differently next time?
I am most proud of creating the js script! I learnt how to manage events and change element class. I would do it faster next time (although I think mine is alr fast enough).
I also created this using a mobile-first workflow. Surprisingly, it's kinda fast!
What challenges did you encounter, and how did you overcome them?I don't encounter any difficult one, but I think it's lining up the padding and margin. And responsive design. My website looks ugly on tablet.
@mts-mlHey @juliusalberto!
Nice design, looking at yours I realized I didn't change the standard e-mail from mine, got to correct it...
For feedback, two things, the HTML is not semantic, you should use at least a
<main>
tag instead of only<div>
. And in my opinion, I'd change the message when the e-mail is valid and the field color. - P@gajbos99What are you most proud of, and what would you do differently next time?
/
What challenges did you encounter, and how did you overcome them?/
What specific areas of your project would you like help with?Well i ran into a couple problems. first of all. i created mobile first and created the design for both of the share parts. i just do not know how to change that when full screen as that is looking different. the mobile social media icon div is looking different from the one on the desktop. What is the best way to do that? as now i put display none on the light share bar and display flex on the other one and that toggles. but on the desktop version the light one doesnt need to be removed.
@mts-mlHey @gajbos99!
I liked that you used React and useState. I've used JS to manipulate the class, but using the hook seems better.
I tried to preview the solution site but got a 404 error. Looking at the code, I noticed that you jumped from a <h1> to a <h4>. I've read that you should always follow header hierarchy.
The solution differs a little from the design; the background color is off, and the name/date is centered when it should be aligned to the left.
About your question, I’d need to see the page and play around with it a bit to try and provide some input.
- P@wideirp@mts-ml
Hey!
Great job overall! Everything looks pretty good, aside from some color differences. The HTML and CSS are well done, and it's responsive too.
Nice work!
- @deidalopezWhat are you most proud of, and what would you do differently next time?
Getting the initial scaffolding done.
What challenges did you encounter, and how did you overcome them?I needed more grid practice, the heading was a struggle for me for some reason.
@mts-mlHey @deidalopez!
Congratulations on finishing the challenge, I've had some trouble with this one too, had to learn grid in order to get the cards right.
I liked how you've configurated you CSS, I didn't know you could use
$red: hsl(0, 78%, 62%);
. Gotta check this out.Does the solution include semantic HTML? I've noticed you used
<h1>
and then jumped to<h3>
, it's recommended to follow the headers hierarchy.Does the layout look good on a range of screen sizes? On mobile screens the header doesn't appear.
- @PriyaSharma026What are you most proud of, and what would you do differently next time?
I am proud of that I could make a responsive project without watching a youtube tutorial and figuring out things by my own and this time I used Sass extension for the first time and I loved it.
@mts-mlGreat design, looks exactly like the prototype.
Great job!!!
- @Jaimealicante83What are you most proud of, and what would you do differently next time?
I built it with attention to the detail and measures of the design. It's the kind of work I do at my workplace.
What challenges did you encounter, and how did you overcome them?This template was more difficult than the previous one, I had to pay attention to the details
What specific areas of your project would you like help with?How to avoid mistakes while building the template and be aware of errors.
@mts-mlHey Jaime!
Excellent work, the design looks very nice.
I have no comments, just congratulations!!!
Marked as helpful