Skip to content
OverviewSolutions
23
Comments
22
Binh05
@Binh05

All comments

  • Binh05•450
    @Binh05

    your solution is very well

  • Binh05•450
    @Binh05

    Your solution matches the design perfectly!

  • Binh05•450
    @Binh05

    Your solution looks great overall! One thing to consider is improving the responsiveness across different screen sizes.

  • P
    RF13•640
    @rf1303
    What are you most proud of, and what would you do differently next time?

    Using scss : mixins, functions, breakpoints, ; inert and more accessibility

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

    challenge images as background and changes, add more accessibility as inert

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

    help , for accessibility and css and how it is written bem

    HTML CSS SCSS Bem Vanilla Javascript Mobile firts

    #bem#sass/scss
    1
    Binh05•450
    @Binh05

    I really admire how professionally you write your code and how well you handle layout.

    I’m still struggling with image handling, layout structuring, and making the most out of CSS properties.

    I especially love the image transition effect you created — it looks great and very smooth.

    Marked as helpful
  • Binh05•450
    @Binh05

    Great job! Your implementation stays very true to the original design. However, it looks like the layout for tablet and mobile screens hasn’t been implemented yet.

  • Binh05•450
    @Binh05

    you code very well

  • Binh05•450
    @Binh05

    You did a really great job with your code — especially in areas I personally find quite challenging, like responsive design. There's definitely a lot I can learn from the way you approached it.

    I also realized I had almost forgotten how useful it is to reuse code by applying classes. Your code reminded me of that best practice.

    That said, I did notice a small issue with the cart functionality. If I keep adding the same product without removing it first, the cart doesn't update correctly, and sometimes it even shows a negative number. It might be worth double-checking the logic that handles cart quantity updates.

    Marked as helpful
  • Binh05•450
    @Binh05

    your responsive are very good

  • kishan sharma•140
    @Kishan-shr
    What challenges did you encounter, and how did you overcome them?

    Contact Form Project

    A responsive and accessible contact form built with HTML5, CSS3, and JavaScript. This project is designed to handle user input with real-time validation and provides a clean and intuitive user experience.

    Features

    • Responsive Design: Adapts seamlessly to different screen sizes, including mobile devices.
    • Client-side Validation: Provides error messages for invalid inputs and ensures data accuracy before submission.
    • Modern UI/UX: Clean layout with attention to detail and accessibility.
    • Success Feedback: Displays a success message after form submission.

    Tools and Technologies

    • HTML5: Semantic structure and accessibility enhancements.
    • CSS3:
      • Custom styling with responsive layouts.
      • Error and success states for inputs.
    • JavaScript (ES6+):
      • Form validation and dynamic interactions.
      • Ensures proper handling of input fields.
    • Google Fonts: For typography customization.
    • Responsive Design: Optimized with media queries for mobile devices.

    Project Structure

    Installation and Usage

    1. Clone the repository: 
      git clone https://github.com/Kishan-shr/frontend-mentor-solutions
    How to Use This Markdown:
    • your-username: kishan-shr.
    • contact-form-project: frontend-mentor-solutions.
    • [live demo]:https://kishan-shr.github.io/frontend-mentor-solutions/ .

    Let me know if you need further assistance! 😊

    Responsive Contact Form Built with Modern Frontend Technologies

    1
    Binh05•450
    @Binh05

    Your solution is very well-structured and follows good accessibility practices.

  • Binh05•450
    @Binh05

    i love your effect hover header.

  • Binh05•450
    @Binh05

    good job

  • P
    pablotrack5r3•80
    @pablotrack5r3
    What are you most proud of, and what would you do differently next time?

    It was a little difficult the responsive between desktop and tablet, in every problem, im improving my skills.

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

    The responsive and the size of the letter sometimes it seems that are different.

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

    I would like to improve my skills to do responsive letters, I think too that I should practice again the grid and flex.

    Testimonials-Grid-Section

    1
    Binh05•450
    @Binh05

    i love your tablet responsive

  • Binh05•450
    @Binh05

    you code very well

  • P
    Kiara•310
    @Kiara523
    What are you most proud of, and what would you do differently next time?

    Semantic html it's very important and it does make a differents for user experience, can be improved.

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

    I didn't find any big challanges

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

    feedbacks are always welcome.. Please feel free to share your opinions

    class names in html, I always feel I can improve on

    tip calculator HTML-CSS-Javascript-ES Modules

    1
    Binh05•450
    @Binh05

    love it. You write very well

  • Binh05•450
    @Binh05

    love it. Your solution looks like mine

  • pandey-prince•70
    @pandey-prince
    What are you most proud of, and what would you do differently next time?

    I am proud of that i have completed this.

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

    I did not encounterd any challenges in these

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

    It's helps in JS alot.

    Responsive Newsletter Signup Form with Success Messages

    1
    Binh05•450
    @Binh05

    I think your code is very good, you can screate responsive for different screen sizes

  • Binh05•450
    @Binh05

    There are many ways to create a triangle, one of which is using a border. You can create a triangle using a border as follows:

    .triangle {
width: 0;
height: 0;
border-top: 30px solid black;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
    • You can set values ​​for width and height, gradually add borders as well as change transparent to colors to see the difference and better understand how the triangle is created.

    You can use z-index in css to bring the share icon to the front.

    .share-icon {
z-index: 20;
}
  • Binh05•450
    @Binh05
    What challenges did you encounter, and how did you overcome them?

    At first, I set the height of the background to 100vh, which caused the content to overflow when I designed for smaller screens. It took me a while to realize the issue and change the height to min-height: 100vh.

    main {
    background-color: var(--main-background);
    min-height: 100vh;
    display: grid;
    place-content: center;
}
    What specific areas of your project would you like help with?

    This is my first time using overlay in CSS. I noticed that in the frontend design, the person in the image appears to have a stronger color tone compared to my solution. I’d appreciate any feedback on my CSS and suggestions on how I can improve it.

    .card .img::after {
    content: '';
    position: absolute;
    background-color: var(--accent);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0.7;
    border-radius: 0 .5rem .5rem 0;
}

    Stats preview card component using html css

    1
    Binh05•450
    @Binh05

    I fixed it with:

    mix-blend-mode: multiply;