All comments

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarSubmitted almost 2 years ago

  Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

  🛠️ Built With:

  • TailwindCSS
  • npm - prettier

  Any suggestions on how I can improve and reduce unnecessary code are welcome!

  Thank you. 😊✌️

  

  Single price grid component (Tailwind CSS)

  9

  28813
  

  jorditosa•120

  @jorditosaPosted over 1 year ago

  Hi Melvin,

  Excelent work! Just to say something: For anchor elements, it is good practice target "_blank" attribute.

  Then, for html markup, probably I would split main element to use it only for "join our community" container, and other two being created as section elements...all as the main part of the webpage, not all is the dominant content.

  Finally, probably you have used many arbitrary values...then, could be better developing directly with css or with preprocessor. For example, class p-[1.5625rem], that you repeat often, would be faster to create a variable with that value (:root), and then you do not need to write different times.

  I repeat, that is an excellent work! Is just to give some extra opinion, not best, but mine! keep working

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Kells•140

  @keblankSubmitted over 1 year ago

  

  Responsive results component

  1

  40
  

  jorditosa•120

  @jorditosaPosted over 1 year ago

  Hi! Nice result, very good in my opinion.

  Only to have some feedback. Between 375px and 520 there's bad summary view.

  And the semantic and code structure of html and css files are pretty good. Only to comment the :root variables it is better to have it at the top of the css file. And for semantic probably the alt attribute in images could be better explained, all indicated as "icon" could be confusing for who need some digital assistance.

  Marked as helpful

  0
• 

  Scynes•190

  @ScynesSubmitted over 1 year ago

  Any tips/suggestions would be greatly appreciated! I'm not the best at CSS, but I'm trying to get a firmer grasp on cleaner code!

  

  Used Flexbox, tried to do some class based design.

  1

  30
  

  jorditosa•120

  @jorditosaPosted over 1 year ago

  Hi!

  Very good design, some feedback: Reverse to use flex at body to place at center the component, and grid for the main container.

  Like html and css file structures and writting also hover effect on summary results.

  Probably, in terms to be exactly as design proposal, some text colors and lower font sizes could be better. And for classes, using some methodology ( interesting one is BEM por example ) could be better to have those better readable and ordered.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  1lgrand•30

  @1lgrandSubmitted over 1 year ago

  I still have problems with responsive websities

  

  Stats Preview Card Solution

  1

  40
  

  jorditosa•120

  @jorditosaPosted over 1 year ago

  Hi!

  Responsive design -> better use lower breakpoints. You have one at 1440px. Try at least two, one at 400-500px, and another at 1200-1400 that's ok.

  HTML -> super important to use more specific labels and les "<div>". Example the image, never inside a div, use "<img>" and always with alt atributte ( better accessibility).

  CSS Grid -> For that kind of uses better is Grid. With displaying in grid, you can develop one column for Mobile viewports, and two columns for bigger screens.

  Design -> correct the margin of big title on desktop viewport. We can create only one container, inside put h2, p, and the stats, and assign a padding or margin once in the main container. With that you would correct and align all the elements correctly as the origin design.

  css -> good file structure

  Marked as helpful

  0