All comments

camilo cuartas•100
@camilo-cloudSubmitted 2 months ago
Product Preview Card
1
Vasu Vallabh•190
@coding-vasuPosted 2 months ago
Thank you for submitting your work on the challenge. After careful review, I have some feedback to help improve your solution:

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

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

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 2 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
1
Vasu Vallabh•190
@coding-vasuPosted 2 months ago
Thank you for submitting your work on the challenge. After careful review, I have some feedback to help improve your solution:

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

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

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.

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

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 3 months ago
Responsive using HTML and CSS
1
Vasu Vallabh•190
@coding-vasuPosted 2 months ago
Looks Good!

Improvements

Tab index missing.

Have a close look, padding for mobile screens for the content is 24px and desktop is 32px.

You can use s tag for strike though
0
Santiago Papiernik•40
@Cxx-mlrSubmitted 3 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
1
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
@Cxx-mlr, Great Job!

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

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

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

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

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
@RealKendprSubmitted 8 months 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)
1
Vasu Vallabh•190
@coding-vasuPosted 3 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•3,800
@TedJenklerSubmitted 3 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
1
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
Feedback

Looks Good!

Positive Points

The screen is responsive.

The code is simple & easy to understand.

Overall, the solution seems pretty good.

Areas for Improvement

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

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
lillyleela•70
@lillyleelaSubmitted 3 months ago
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
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
You should be proud of trying. I appreciate that you want to improve 🙂.

Please refer the link for Centering Div

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•70
@raulgaliciabSubmitted 3 months ago
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
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
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.

Font Size

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:

Integrating design system libraries

Following general web standards (16px is typically used as the base font size)

Interactive States

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.

Responsiveness

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.

Tip

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
@juanmoruizSubmitted 3 months ago
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
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
Feedback

Positive

✅ Overall, the project looks nice!

Areas for Improvement

Interactive States

Hover, Focus, and Active states are missing

Refer to the Figma file for the correct implementation of these states

HTML Structure

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

Accessibility

Implement tabIndex to improve keyboard navigation and accessibility

Responsive Design

The site is not responsive on smaller screens

Ensure the layout adapts well to various screen sizes, especially mobile devices
0
EmicJoykiller•120
@EmicJoykillerSubmitted 3 months ago
QR Code
1
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
background color is missing

I see text shadow, which make make the text less readable

Card shadow is missing.

Font sizes are not intact.
0
Emilia Burza•780
@eburzaSubmitted 3 months ago
QR code component
2
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
Looks good, however you forgot to add shadow to the card.
Marked as helpful
0
Santiago Papiernik•40
@Cxx-mlrSubmitted 3 months ago
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
Vasu Vallabh•190
@coding-vasuPosted 3 months ago
You need more padding around the qr code, I can see around 8px, as per design its 16px
1

Vasu Vallabh

All comments

Product Preview Card

Social Links Profile

Responsive using HTML and CSS

Recipe page

Social Links Profile (Tailwind-CSS)

Card-Bootstrap-SCSS

Feedback

Positive Points

Areas for Improvement

Encouragement

Blog preview card

Blog preview card using Flexbox

Font Size

Interactive States

Responsiveness

Tip

Blog preview card with HTML and CSS

Feedback

Positive

Areas for Improvement

QR Code

QR code component

QR Code Component Implementation