Order summary component using React and Tailwind

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  React is probably a bit over-kill for something like this where we don't have any user-interaction, and there are no repeated elements where making re-usable components would help.

  That said, it's perfectly valid to try out new technologies on simpler projects, so I wouldn't worry too much about that. However, be sure to work on fundamentals too. There are a lot of divs here that could be more semantic elements. Be careful to not neglect html when working with frontend frameworks. There are things that should be headings and paragraphs here (though well done for using real buttons).

  There's some issues with overflow. On my laptop I'm seeing deactivated inner scrollbars inside the main scrollbars, which I expect is down to some of the tailwind overflow classes, though I haven't used Tailwind in a long time, so not 100% sure. I think it would be worth making two versions of this, one using Tailwind, and one just using regular CSS, so you make sure that the CSS fundamentals are correct. Tailwind can be a great tool for fast prototyping, but it will be easier to use if you've got solid fundamentals in vanilla CSS.

  Marked as helpful

  1

  ---

  

  Adrian Burgos•60

  @adrianburgoscolasPosted about 3 years ago

  @AlexKMarshall thank you for your comments, I decided to used React on this project because I just finished the freeCodeCamp Front End Development Libraries and I decided to practice with this challenges my React knowledge. I'm going to take account on a better semantic HTML in my further challenges, also fix this one a litter bit, need to improve on that. You are right with the overflow, I used it hidden for the picture rounded upper corner from its parent rounded border, I'll try to fix or improve that.

  0
• 

  Kacper•40

  @kacperraganPosted about 3 years ago

  Hello :) I am beginner but I want to ask. Why u used scripts to do this challenge? My idea is to write as simple code as possible to do the task but this is not a point. U've done pretty good job here one thing that I know from professionals is to use semantic html so when u have heading "order summary" u should place it in tags <h1></h1>. U can also use tags <b></b> to bold text :) Please take into account that I am amateur.

  Marked as helpful

  1

  ---

  

  Adrian Burgos•60

  @adrianburgoscolasPosted about 3 years ago

  @kacperragan Hello, happy for your comment, I'm a beginner too, well I used React on this project because I just finished the freeCodeCamp Front End Development Libraries and I decided to practice with this challenges my React knowledge, also learning Tailwind and practicing too. I'm going to fix some accessibility issues right now and implement your semantic html recommendations. Thank you.

  0

  

  Kacper•40

  @kacperraganPosted about 3 years ago

  @adrianburgoscolas I am glad that u consider my comment as useful :) Do u recommend freeCodeCamp?

  0

  

  Adrian Burgos•60

  @adrianburgoscolasPosted about 3 years ago

  @kacperragan I don't have to much to compare but I've seen freeCodeCamp and w3schools and I found freeCodeCamp better to learn the basics, it has a good structure on contents and I'm actually completing its certifications(I just finished the third of ten certifications)

  0