Skip to content
OverviewSolutions
7
Comments
7
Manshiporiya
@Manshiporiya

All comments

  • Emanuele Fabrizio•220
    @efabrizio75Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I really liked using the grid features, but I didn't utilize a fluid approach, which I will try in the future.

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

    Initially I tried using flexbox layout but ran into too many issues, so I decided to revert to a grid layout.

    I also noticed the style guide regarding colors to conflict with color contrast. I choose to obey my understanding of the style guide rather than "fixing" the critical accessibility issues.

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

    I would like more help in understanding better the style guides.

    Testimonial grid section (no libraries)

    1
    Manshiporiya•80
    @ManshiporiyaPosted about 2 months ago

    Semantic HTML: It's great to see you used appropriate elements for your layout. However, ensure all sections have meaningful roles. For example, using <header>, <main>, <footer>, <nav> where applicable helps make your HTML more semantic and accessible.

    Accessibility: You mentioned challenges regarding the style guide and color contrast. It’s important to prioritize accessibility over strict adherence to a style guide, especially when accessibility issues are "critical." You might consider revisiting this decision, as users with visual impairments may struggle with low-contrast colors. Tools like WAVE or Lighthouse can help identify accessibility problems.

    Fluid Approach & Layout Adaptability: Switching from Flexbox to Grid seems to have worked well for your layout, but it's important to ensure responsiveness across different screen sizes. I’d recommend experimenting with a fluid approach, using relative units like % or fr units in CSS Grid, to improve adaptability. You could also include media queries to enhance the layout at smaller or larger viewport sizes.

    Style Guides: Style guides can sometimes be confusing, especially if they appear to contradict best practices. It might help to discuss the style guide with your team to better understand the rationale behind it or suggest modifications to address accessibility. Adhering to accessibility standards should ideally align with the overall goals of the project.

    Code Quality: The structure and readability of your code are important. Utilizing consistent naming conventions, comments, and well-organized CSS can help keep the codebase maintainable. Consider using utility classes or pre-processors like SASS to improve reusability.

    Alignment with Design: It would be helpful if you double-checked the solution against the provided design. For instance, small details like font sizes, padding, and colors can make a big difference in the visual consistency and user experience.

    Overall, your solution shows a good understanding of the basics, and your use of CSS Grid is commendable. In the future, aim for a more fluid approach and ensure accessibility is always prioritized. Keep up the great work!

    0
  • kassahunAmdie•100
    @kassahunAmdieSubmitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    I planned to use only flexbox in this challenge. Everything worked without a problem until I got to the desktop version. I got stuck with one issue. The last card seemed to get to the max width before the other three and messed up the padding right at the break point. Once past the break point by about 10px everything worked flowless. Spent hours trying to fix it but was not able. The positive outcome was, I learned a ton on flexbox. The solution was to switch to grid. And that was my first idea but just wanted the challenge of doing it in flexbox. With grid the solution was done in just few minutes.

    Frontend Mentor Four Card Feature Challenge

    1
    Manshiporiya•80
    @ManshiporiyaPosted about 2 months ago
    1. Semantic HTML Usage: Strengths: Your HTML structure includes appropriate headings (<h1>, <h2>, <h3>) and paragraph tags (<p>), which contribute to a well-structured, semantic layout. The card elements also make sense in the context of the content. Improvements: Consider using section or article tags around each .card to further emphasize the structure, particularly if these sections are self-contained and reusable across pages. This will improve the document's semantic meaning.
    2. Accessibility Considerations: Alt Text for Images: You have included alt attributes for the images, which is excellent for accessibility. However, make sure that the descriptions are more descriptive to visually impaired users (e.g., alt="A supervisor monitoring activity" instead of just alt="supervisor"). Improvement Suggestions: Ensure sufficient contrast between text and background colors for readability. You might also add aria-labels for any interactive elements in the future to improve screen reader support. Keyboard Navigation: It’s essential to think about whether your cards are focusable if they are supposed to be interactive. If they lead to more information, consider using anchor tags.
    3. Layout on Various Screen Sizes: Strengths: The use of flex-wrap allows the cards to adjust nicely as the viewport changes, and you've made good use of align-self to create an appealing staggered look. Challenges Encountered: You mentioned an issue with flexbox on desktop size and that switching to grid was a quick fix. This is quite common; grid provides better control for more complex layouts where items need to align in multiple directions. It’s commendable that you stuck with flexbox for the learning experience, as it teaches you about its limitations and strengths. Suggestions for Improvement: If the breakpoint issue persists, it might help to define more explicit max-width values or use a media query to adjust the flex properties as needed. However, the decision to switch to Grid is a very effective one for simplifying complex layouts. You could also combine flexbox and grid if that better suits your needs.
    4. Code Structure, Readability, and Reusability: Strengths: Your code is well-structured and easy to follow. You’ve named the classes clearly, which makes your CSS readable and understandable. Using flex-basis and aligning each card differently shows a strong understanding of flexbox's capabilities. Improvements: Consider using CSS variables for repeating colors (like the border colors) to enhance maintainability and reusability of the code. This will make future changes easier if you need to adjust the color scheme.
    5. Does the Solution Differ Considerably from the Design? Visual Differences: The design is largely on point, and the staggered card layout reflects the given design well. The choice to align cards differently was a creative solution and keeps the visual interest high. Padding Issue: The padding discrepancy you mentioned is a common issue in responsive design with flexbox. It could stem from how the browser calculates the space for flex items and rounding differences in dimensions. Using CSS Grid, you’ve overcome that challenge effectively, and that aligns better with the design. Additional Suggestions: Grid vs. Flexbox: It’s great that you took the time to try solving the challenge using flexbox only. Flexbox is very powerful but can sometimes create these minor issues when dealing with more complex layouts. Grid was designed for more two-dimensional layouts and was the right choice for what you needed. Testing in Different Browsers: If possible, test your solution in different browsers and devices to ensure consistent results. Browser inconsistencies could have contributed to the issue you experienced at the breakpoint. Summary: Your solution is strong, and you demonstrated perseverance in trying to solve a problem in multiple ways. You learned a lot from the process, which will help in deciding when to use flexbox or grid in the future. Moving to CSS Grid was a pragmatic choice, and it’s often beneficial to combine both layout techniques to get the best results. The positive outcome of your learning experience will certainly help you navigate similar challenges effectively in future projects. Great job, and keep up the effort to challenge yourself with new techniques!
    1
  • Manshiporiya•80
    @ManshiporiyaPosted about 2 months ago

    . Visual Hierarchy The product name ("Gabrielle Essence Eau De Parfum") has a strong and bold appearance, which is great for grabbing attention. You might consider slightly reducing the font size to balance it with the rest of the content, making it more visually cohesive. 2. Spacing & Alignment There seems to be sufficient space between different elements, which makes the layout easy to read. However, you can add a bit more padding to the description paragraph to give it more breathing space and maintain consistency. 3. Button Styling The "Add to Cart" button looks prominent and inviting. Consider adding a slight shadow or subtle gradient to give it more depth, which could make it look more clickable. You could also make the button a bit wider to match the width of the price section. 4. Color Palette The use of green for the price and button works well and contrasts nicely against the white card. The background color is subtle and keeps the card focused, which is excellent. If you want to add more visual interest, consider using different shades of green for a hover effect or add an outline to the button on focus. 5. Image to Text Ratio The balance between the image and text sections is good. However, on smaller screens, make sure the image doesn’t get too small compared to the text to maintain a visually appealing ratio. This can be managed well by using a media query. 6. Responsiveness To ensure the card looks great on all devices, consider stacking the image above the text when the screen width is below a certain threshold, such as 600px. This will make it easier to view on mobile devices. 7. Font Size and Readability The description text is clear, but you could increase the line height slightly for even better readability. Also, ensure the category label ("Perfume") stands out just enough without overpowering the main heading.

    0
  • Manshiporiya•80
    @ManshiporiyaPosted about 2 months ago

    Semantic HTML: The code uses a mix of semantic and non-semantic elements, but could benefit from a bit more semantic structure:

    The use of <main> is appropriate as it wraps the main content of the page. The h1 and h2 elements are semantically correct for headings, but the overall structure could benefit from more semantic HTML. Consider using a <section> for distinct sections like "Preparation Time", "Ingredients", and "Instructions". This helps clarify the page structure. For the list of ingredients and instructions, using <section> or <article> tags could provide better clarity and accessibility for screen readers. The <ul> for ingredients and the <ol> for instructions are good choices since these represent lists of items and ordered steps. 2. Accessibility: Some good practices are followed, but there are areas for improvement:

    Alt text for images: The image alt text is descriptive, but could be more specific regarding its context. Instead of "open omelette on a white plate", something like "A well-cooked omelette with fresh vegetables served on a white plate" would give more context to users relying on screen readers. Color contrast: The description and nutritional information use lighter text (#555) on a light background, which might pose readability issues for users with visual impairments. It’s important to check the color contrast using tools like the WebAIM contrast checker. Headings and text hierarchy: The text hierarchy is generally good, but you should avoid skipping heading levels. For example, don't jump from h1 to h2 directly without considering the overall flow. Font size: The font size and the choice of 1rem/2rem units are good for scalability and should be readable across various screen sizes. You could also add larger font sizes or scaling for improved accessibility. 3. Responsiveness and Layout: The layout is overall clean and minimalistic but could benefit from more attention to responsiveness:

    Mobile-friendliness: The container has a fixed width of 768px. This might look good on tablets or larger mobile screens, but on smaller devices, it might cause horizontal scrolling. Using a percentage width (e.g., max-width: 100%) or using a CSS grid/flexbox layout could improve responsiveness. Images: The image is set to 100% width, which works well for responsiveness. However, consider using the picture element with different image sources for different screen sizes (responsive images). Media Queries: Adding some media queries for small screens to adjust padding, text size, and image layout could enhance the user experience on mobile devices. For instance, the padding on .container can be reduced for smaller screens.

    0
  • Manshiporiya•80
    @ManshiporiyaPosted 2 months ago

    nice

    0
  • Manshiporiya•80
    @ManshiporiyaPosted 2 months ago

    Here’s feedback on the solution provided, based on the key points for evaluating code quality, accessibility, layout responsiveness, and structure:

    1. Semantic HTML: Positive Points:

    The use of <h1> for the title and <p> for the description is appropriate and follows basic semantic HTML rules. The structure is simple and clear, making it easy for screen readers and other assistive technologies to navigate the content. Suggestions for Improvement:

    More semantic tags could be used for better accessibility and structure. For instance: Wrap the entire content inside an <article> element, which is semantically appropriate for a blog preview. Use <footer> for the author and date section to differentiate metadata from the main content. For the date, consider using the <time> tag with a datetime attribute for machine-readable dates. Improved Semantic Example:

    0
  • Manshiporiya•80
    @ManshiporiyaPosted 2 months ago
    1. Semantic HTML: Strengths: The solution uses semantic tags (e.g., <header>, <footer>, <main>), which helps structure the document well. Suggestions: If missing, consider adding tags like <nav> for navigation or <section> for content divisions for better readability and SEO.
    2. Accessibility: Strengths: Good use of alt text for images and visible focus states. Suggestions: Improve accessibility by ensuring all form elements have labels and testing the site with screen readers. Check color contrast for readability.
    3. Responsiveness: Strengths: The layout adapts well across most screen sizes. Suggestions: For smaller screens, check for any elements that may look cramped or break the layout. Ensure media queries handle spacing and alignment issues effectively.
    4. Code Structure and Reusability: Strengths: Code is organized and readable. Suggestions: If applicable, refactor repetitive code into reusable components or functions. Consider using CSS variables for consistency.
    5. Design Consistency: Strengths: The solution aligns well with the original design. Suggestions: Minor improvements could include more consistent spacing or font sizes to match the design perfectly. Overall, great work! A few tweaks could improve accessibility and responsiveness across devices. Keep it up!
    0