Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    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-218

    Submitted

    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

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    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
  • P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    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 Yonathan Papiernik Caicedo• 40

    @Cxx-mlr

    Submitted

    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

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    @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• 290

    @RealKendpr

    Submitted

    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)

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    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• 3,720

    @TedJenkler

    Submitted

    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

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    Looks Good!

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

    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.

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

    Thank you for your effort!

    Marked as helpful

    1
  • lillyleela• 70

    @lillyleela

    Submitted

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

    Nothing...

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

    For creating blog into center to screen shows me difficult but it is overcome by using bootstrap classes.

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

    I need help with using HTML 5 semantic tags. I tried by using but I done this task by using bootstrap classes.

    Blog preview card

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    1. You should be proud of trying. I appreciate that you want to improve 🙂.

    2. Please refer the link for Centering Div

    3. Semantic HTML: Its used to make machine understand you content, so that your website could be parsed by the search engine properly and rank it.

    a.Basics Schematics

    b.Google Official

    Please let me know if you need any help 😀

    Marked as helpful

    0
  • Raul Galicia• 20

    @raulgaliciab

    Submitted

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

    Proud of the (almost) pixel-perfect implementation, the BEM classes and the use of Flexbox.

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

    I still struggled with how to justify and align the elements—especially the text. It was basically trial and error until I found the correct way. In some cases the problem was the display.

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

    Should I need to use media queries for the responsive design?

    Blog preview card using Flexbox

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    Overall Looks Good !

    Feedback on Your Solution

    Accessibility

    • The alt tag is blank for the "Card-autho" image. Always include descriptive alt text for images to improve accessibility.
    • You've set the base font size to 62.5%, which results in a 10px base font size.
    • While this works for this project, it may cause issues when:
      1. Integrating design system libraries
      2. Following general web standards (16px is typically used as the base font size)

    The following interactive states are missing from your solution:

    • Tab index
    • Focus state
    • Hover state
    • Active state

    Consider adding these to improve user interaction and accessibility.

    • The challenge specifies that font sizes should be slightly smaller on smaller screens.
    • To achieve this, you can simply update the base font size to a smaller value for mobile breakpoints.
    • Your current solution doesn't adapt the font size for smaller screens, affecting its responsiveness.

    Use media queries to adjust the base font size for different screen sizes. This will help make your design more responsive without needing to change individual element sizes.

    Marked as helpful

    0
  • Juan Morales Ruiz• 30

    @juanmoruiz

    Submitted

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

    El uso del CSS y creo que para una siguiente ocasión haría el responsive.

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

    EL CSS y lo superé intentando

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

    En el responsive

    Blog preview card with HTML and CSS

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    ✅ Overall, the project looks nice!

    1. Interactive States

      • Hover, Focus, and Active states are missing
      • Refer to the Figma file for the correct implementation of these states

    2. HTML Structure

      • Use semantic HTML elements, particularly the <main> tag for the primary content

    3. Accessibility

      • Implement tabIndex to improve keyboard navigation and accessibility

    4. Responsive Design

      • The site is not responsive on smaller screens
      • Ensure the layout adapts well to various screen sizes, especially mobile devices
    0
  • P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    1. background color is missing
    2. I see text shadow, which make make the text less readable
    3. Card shadow is missing.
    4. Font sizes are not intact.
    0
  • P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    Looks good, however you forgot to add shadow to the card.

    Marked as helpful

    0
  • Santiago Yonathan Papiernik Caicedo• 40

    @Cxx-mlr

    Submitted

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

    I'm proud of the semantic HTML structure I used. Next time, I’d focus on reducing elements.

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

    One of the key challenges was determining the appropriate specificity for CSS selectors and choosing effective class names.

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

    I’m seeking advice on how to further improve the semantic quality of my HTML structure.

    QR Code Component Implementation

    1

    P
    Vasu Vallabh• 190

    @coding-vasu

    Posted

    You need more padding around the qr code, I can see around 8px, as per design its 16px

    1