Latest comments

• 

  camilo cuartas•100

  @camilo-cloudSubmitted 7 months ago

  

  Product Preview Card

  1

  10
  

  Vasu Vallabh•190

  @coding-vasuPosted 7 months ago

  Thank you for submitting your work on the challenge. After careful review, I have some feedback to help improve your solution:

  1. HTML Structure: The schematic HTML structure needs attention. Consider implementing a more semantic approach to enhance the document's outline and accessibility.

  2. Accessibility: While the interface is keyboard-friendly, there's room for improvement in overall accessibility. Consider implementing ARIA attributes and ensuring proper focus management.

  3. Responsiveness: The current implementation fails when I try to compress the screen, however I see at a point it gets fixed. please go through the implementation again

  I recommend thoroughly reviewing the requirement document to ensure all aspects of the challenge are addressed.

  Take some time to research and understand the concepts involved, particularly in responsive design and web accessibility.While there are several areas for improvement, this feedback is intended to help you grow as a developer.

  I encourage you to revisit the challenge, incorporating these suggestions, and resubmit your solution. If you have any questions or need clarification on any points, please don't hesitate to ask.

  Marked as helpful

  0
• 

  Omarhdez-218•30

  @Omarhdez-218Submitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of how fast i completed this project, it was easier than i expected.

  What specific areas of your project would you like help with?

  In the screenshot with the active state, the pointer is colored black when it's hovered over one of the links.

  I tried using 'caret-color: black;' in the '.social:hover' class in my css file but it won't work & when i look it up, i come across the same answer to use 'caret-color'.

  

  Social Links Profile

  #tailwind-css

  1

  20
  

  Vasu Vallabh•190

  @coding-vasuPosted 7 months ago

  Thank you for submitting your work on the challenge. After careful review, I have some feedback to help improve your solution:

  1. HTML Structure: The schematic HTML structure needs attention. Consider implementing a more semantic approach to enhance the document's outline and accessibility.

  2. Accessibility: Interface is not keyboard-friendly, there's room for improvement in overall accessibility. Consider implementing ARIA attributes and ensuring proper focus management.

  3. Responsiveness: The current implementation shows a horizontal scrollbar on smaller screens. Please review your media queries and layout techniques to ensure a fully responsive design across all device sizes.

  4. Code Organization: The codebase would benefit from improved structure and organization. Consider breaking down your code into logical components or modules for better maintainability.

  5. Layout Considerations:

     • Desktop: There appears to be unnecessary padding in some areas. Review and adjust as needed for a cleaner layout.
     • Mobile: The current mobile layout could use refinement to enhance the user experience on smaller devices.

  I recommend thoroughly reviewing the requirement document to ensure all aspects of the challenge are addressed. Take some time to research and understand the concepts involved, particularly in responsive design and web accessibility.

  While there are several areas for improvement, this feedback is intended to help you grow as a developer. I encourage you to revisit the challenge, incorporating these suggestions, and resubmit your solution. If you have any questions or need clarification on any points, please don't hesitate to ask.

  Marked as helpful

  1
• 

  Daniel Castillo•300

  @muzakryder2Submitted 7 months ago

  

  Responsive using HTML and CSS

  1

  31
  

  Vasu Vallabh•190

  @coding-vasuPosted 7 months ago

  Looks Good!

  Improvements

  1. Tab index missing.
  2. Have a close look, padding for mobile screens for the content is 24px and desktop is 32px.
  3. You can use s tag for strike though

  0
• 

  Santiago Papiernik•40

  @Cxx-mlrSubmitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  I’m proud of my perseverance in tackling this challenge and seeing it through to completion. Next time, I’d like to experiment with different frameworks, such as reactpy and FastAPI. However, I’d need to dive into the reactpy to grasp deployment and integration.

  What challenges did you encounter, and how did you overcome them?

  I spent a significant amount of time attempting to style the table, only to discover that my styles weren’t taking effect.

  I then realized that using display: block on certain elements, such as tr and tbody, was necessary for the styles to take effect.

  I also applied all: unset to elements like table, caption, and tbody to remove default browser styles, which gave me a clean slate to work from:

  table, caption, tbody, tfoot, thead, tr, th, td {
    all: unset;
  }
  

  Additionally, I spent considerable effort figuring out how to add lines between table rows (tr), and I’m pleased with the solution I came up with.

  To successfully complete this project, I relied on tools like Firefox DevTools and AI assistance, including ChatGPT, which helped me with class names.

  What specific areas of your project would you like help with?

  I’d like assistance with minimizing my use of media queries.

  

  Recipe page

  #accessibility

  1

  30
  

  Vasu Vallabh•190

  @coding-vasuPosted 7 months ago

  @Cxx-mlr, Great Job!

  1. I see you are using schematic HTML, however you can use classes to handles the styling instead of using elements directly

  2. You can improve on accessibility by adding ARIA labels & Tab index for the users who are visual impaired.

  3. You could have handled responsiveness Desktop/Tablet screen using media queries.

  4. The code is well structured, you can improve on naming the classes using bem method so that its more readable.

  5. Overall it looks good!

  In order to minimize the media queries, I suggest mobile-first design approach. You can check my solution to learn more!

  1
• 

  Kendpr•310

  @RealKendprSubmitted about 1 year ago

  What are you most proud of, and what would you do differently next time?

  In this project I used Tailwind CSS, and I learned how to modify designs for different devices and how to utilize the tailwind theme feature. In addition I also learned how to re-use styles on different elements.

  What challenges did you encounter, and how did you overcome them?

  Nothing much

  What specific areas of your project would you like help with?

  I would love to hear some suggestions.

  

  Social Links Profile (Tailwind-CSS)

  #tailwind-css#accessibility

  1

  30
  

  Vasu Vallabh•190

  @coding-vasuPosted 7 months ago

  Great!

  1. Semantic HTML & ARIA

  a. Use ARIA like below -> <main aria-label="Jessica Randall's profile card"> b. Specify the role attribute for unordered list html <ul role="list">

  2. Accessible a. While using tab the buttons are not changing color like its happening on hover. you can add focus pseudo code

  3. Layout is Responsive

  4. Code is well Structured

  Overall its looks great!

  Marked as helpful

  1
• 

  Teodor Jenkler•4,040

  @TedJenklerSubmitted 7 months ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of mastering Bootstrap's responsiveness, which took some time but resulted in a clean, responsive design.

  Next time, I'd focus on understanding Bootstrap's grid system earlier to speed up the process and explore more customization options.

  What challenges did you encounter, and how did you overcome them?

  I encountered some clashing CSS rules while working on this project. I overcame them by refining my understanding of Bootstrap's classes and structure. Since this was a practice project, it was a great learning experience to deepen my knowledge of Bootstrap.

  What specific areas of your project would you like help with?

  Feedback is welcome, especially on SCSS or Bootstrap.

  

  Card-Bootstrap-SCSS

  #accessibility#bootstrap#react#vite#sass/scss

  1

  71
  

  Vasu Vallabh•190

  @coding-vasuPosted 7 months ago

  Feedback

  Looks Good!

  Positive Points

  1. The screen is responsive.
  2. The code is simple & easy to understand.
  3. Overall, the solution seems pretty good.

  Areas for Improvement

  1. Semantic HTML: You need to work on using semantic HTML. For example, you could have used tags like <time>, <figure>, etc.

  2. Design Details:

     • You missed some font weights.
     • Shadow on hover is missing (as shown in the Figma file).
     • Tab index & focus states are missing.

  Encouragement

  If you practice your eye for detailing, you can do wonders.

  Thank you for your effort!

  Marked as helpful

  1