Skip to content
OverviewSolutions
4
Comments
4

Chahat-23

@Chahat-2360 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Francois085•40
    @Francois085
    What are you most proud of, and what would you do differently next time?

    I used a grid template for the last section of the page as it seems easier compared to flex box.

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

    Responsive is always a challenge for me. I used more "rem" values for margin and padding as I understood it improves a lot the responsiveness. Do not hesitate to comment on it. Tks.

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

    Any comments/suggestions would be most welcome !

    Recipe page by Francois085 - HTML and CSS

    1
    Chahat-23•60
    @Chahat-23

    Some issue with height, rest seems perfect

    Marked as helpful
  • Clyde Forland•90
    @clydehenry3
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I applied the principles of Flexbox and CSS Grid to create a responsive and visually appealing layout. The consistent use of styles and the successful integration of interactive elements, like hover effects on buttons, were key achievements.

    Next time, I would focus on improving the initial planning phase by better organizing the extraction of assets and styles from design tools like Figma. This would help in streamlining the implementation process and potentially reduce the number of iterations needed for adjustments.

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

    One challenge was ensuring that the card component was properly centered on the page. Initially, the margin property was not sufficient, and the card was not displaying correctly in the center. I overcame this by using Flexbox for the body element, which allowed for precise alignment of the card.

    Another challenge was dealing with hover effects on buttons, where the button’s outline and background were not behaving as expected. I resolved this by refining the CSS properties and using resources like W3Schools CSS3 Buttons and W3Schools CSS Hover Selector to ensure proper styling and interactive behavior.

    What specific areas of your project would you like help with?
    1. Mobile View Adjustments: • Assistance with optimizing the card layout and button styles for different screen sizes, especially for mobile devices. 2. Hover Effects: • Feedback on improving the hover effects for buttons to ensure they look consistent across various browsers and devices. 3. CSS Grid Layout: • Guidance on effectively using CSS Grid for responsive design elements, and ensuring that the grid layout behaves as expected across different screen sizes.

    Social Link Card

    1
    Chahat-23•60
    @Chahat-23

    Good work, but Name and location seems a bit distorted. A bit more improvement can help match the exact design.

  • Chahat-23•60
    @Chahat-23

    Design highly matches the provided reference. Great job!

  • Chahat-23•60
    @Chahat-23

    Does the solution include semantic HTML? Yes Is it accessible, and what improvements could be made? Seems Perfect Does the layout look good on a range of screen sizes? Yes Is the code well-structured, readable, and reusable? Yes Does the solution differ considerably from the design? No