Skip to content
OverviewSolutions
10
Comments
11
P
Suhas Patnaik
@SuhasPatnaik

All comments

  • Faith Achieng•110
    @FaithAchiengSubmitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    I completed the task .

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

    How to validate forms using Javascript. I overcame this by watching videos on form validation.

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

    How to validate forms using javascript. Why when I click the subscribe button the image disappears. If the layout is changed to a smaller screen the image disappears.

    Newsletter sign up using card in css and form validation with Js

    1
    Suhas Patnaik•120
    @SuhasPatnaikPosted 2 days ago

    Congrats on completing the challenge!

    The form looks good, you would benefit from learning how to place the form component in the center of the page. Both horizontal and vertical center.

    It will be super useful for your upcoming projects as well.

    Good luck!

    0
  • Suhas Patnaik•120
    @SuhasPatnaikPosted 4 days ago

    Good job on the animations!

    0
  • Gustavo Gutiérrez•150
    @gustavo2023Submitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    I think in general the project turned out well. When I started the project I easily managed to figure out how should I structure the HTML to make it look like I wanted. Although not everything looks exactly like the design, the structure works well.

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

    The hero section was a little challenging. I wasn't sure on how to make it so that when the screen is desktop size, the section displays the two images that correspond and when the screen is table or mobile size it displays the single image that corresponds. Eventually I simply added `` elements for each image in the correct place and in the CSS I used alternated using display: none and Flex to show the images I wanted.

    The other challenge was the background image in the footer and how to add the color to it. I was able to add both the image and the color, but the color doesn't look the same, I'm not sure how to fix that.

    What specific areas of your project would you like help with?
    • Improvements in accessibility that I can make.
    • Are there any improvements I can make to the semantic structure of my HTML?
    • Any feedback on the best practices that I'm not following or overlooked mistakes.
    • Corrections for the hero section and the footer to make it look more like the design.
    • Is my use of CSS Grid and Flexbox efficient or what improvements could I make?

    Responsive landing page using Flexbox and CSS Grid

    1
    Suhas Patnaik•120
    @SuhasPatnaikPosted 8 days ago

    I relate to the part where my site also didn't turn out to be a pixel-perfect match to the provided design. But I'm pretty happy with the output still while being quite aware of what improvements I could make in future projects to not repeat the inaccuracies in this project.

    Onwards and upwards! 🚀

    0
  • kassahunAmdie•100
    @kassahunAmdieSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    The layout has different paddings for some of the cards when in mobile and desktop versions according to the Figma design file. Therefore I made use of the ":nth-child() pseudo class to achieve this. In the process I learned a bit more on pseudo classes on the MDN web site. Probably there is an easier way of achieving this result. ( lines 198-206 of my CSS file).

    Responsive Testimonial Grid Section Challenge

    1
    Suhas Patnaik•120
    @SuhasPatnaikPosted 12 days ago

    The desktop and mobile site look pretty good. Keep it up!

    0
  • Suhas Patnaik•120
    @SuhasPatnaikPosted 14 days ago

    • It is awesome to see your desktop website is pixel-perfect!

    • My only suggestion would be to integrate colour on the top borders of your cards on the mobile site.

    • Also, the background colour should extend the entire body of the page.

    0
  • Suhas Patnaik•120
    @SuhasPatnaikSubmitted 17 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I built the project using a mobile-first approach for the first time, then scaled it up to tablets and desktops with media queries.

    Next time, I might use Sass to better organize the CSS, which I think would be really helpful for larger and more complex projects.

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

    I struggled to make the space occupied by the image and textual content a 1:1 ratio using flexbox. I tried the flex: 1; property in each class but couldn’t get the desired result. Eventually, I switched to a grid layout and achieved the 1:1 ratio using grid-template-columns: 1fr 1fr;

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

    I’d like to understand what I might have missed with the flexbox approach to achieve equal width for the image and text. I think there’s a bit of a conceptual gap in my understanding.

    Responsive Mobile-first Product Preview Card Component

    2
    Suhas Patnaik•120
    @SuhasPatnaikPosted 15 days ago

    Thanks a ton for your comment, Grace.

    I really appreciate the time you have taken to study my code and give in-depth feedback to create a habit of best practices and better web accessibility.

    I have integrated most of the changes into this project and will ensure that other points are integrated into upcoming projects.

    0
  • Suhas Patnaik•120
    @SuhasPatnaikPosted 17 days ago

    Kudos on the transition animation! It's a unique feature you've added to your project.

    0
  • Suhas Patnaik•120
    @SuhasPatnaikPosted 21 days ago

    Hello! I had a glance at your project. A quick suggestion:

    • The website is not responsive in the way the mobile design requires it to be. Please take a look at the mobile design file provided so you can make better decisions for your media queries.
    • Also, there could be a better use of semantic HTML5 tags. I see that you have used <main></main> to wrap the entire site which is nice but the page itself can be broken down further into <section></section> tags.
    0
  • Suhas Patnaik•120
    @SuhasPatnaikPosted 4 months ago
    1. Your solution could use semantic HTML tags. Use <main> for the container and within the card <section> off the profile details and the navigation links.
    2. The challenge is not complete yet since you have to add the hover and active state effects on the links.
    3. Only the text inside the <li> is clickable, try to create a button-like effect for <a> tag as the whole area should be clickable.
    0
  • Suhas Patnaik•120
    @SuhasPatnaikPosted 7 months ago

    Hello!

    Congratulations on completing the challenge.

    Some quick suggestions I can think of for improving the project would be:

    1. Make sure to add meaningful text in the 'alt' property of the 'img' element, instead of leaving it empty. It serves a very useful purpose.
    2. Use the 'gap' property inside your flexbox so that the content is well-spaced.
    0
  • virajdomadia•40
    @virajdomadiaSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Getting started with this

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

    box shadow

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

    box-shadow

    QR Code Component

    2
    Suhas Patnaik•120
    @SuhasPatnaikPosted 8 months ago

    Hello Viraj,

    Try to be more descriptive as to what you found challenging about the box-shadow property so that the community can help you better.

    0