Skip to content
OverviewSolutions
8
Comments
8
Sunil
@SunilParbhoo

All comments

  • Chris•180
    @Ramirez-ChristopherSubmitted 16 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of implementing a mobile-first approach. Moreover, my first grid project! next time I would like to approach the project with the cube methodology - I rewrite a lot of the same code.

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

    I had trouble making it the most responsive I can. I have an initial mobile view and desktop but the in between is messy. I sorta fixed it with grid template col.

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

    If you have experience creating projects with the cube methodology, any tips on structuring my code to adhere to it would be appreciated :) but any help is appreciated!

    grid testimony with grid!

    1
    Sunil•180
    @SunilParbhooPosted 16 days ago

    Nice job! I believe the auto-fit (in the grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); may be the cause of the cards with large amounts of text becoming super narrow and long when the page is between 555px to about 810px ). One thing to potentially improve your implementation is to add another media query around the 555px range where the cards tend to get really narrow and long, and create your own custom card layout utilizing the grid-template-areas such that the cards with large amounts of text continue to be tall enough to fit their content, and the cards that have less content can be smaller cards. For example:

    grid-template-areas:
"Daniel Jonathan"
"Daniel Jeanette"
"Patrick Kira"

    Here, Daniel continues to be long enough to fit its text content, but since Jonathan and Jeanette have a lot of empty space, they can be condensed. I think you did a very good job for your first grid-project and wish you continued success on your coding journey.

    Marked as helpful
    1
  • moaz-shamim•60
    @moaz-shamimSubmitted 28 days ago
    What are you most proud of, and what would you do differently next time?

    I learned the concept of using CSS properly. First, I reset all the browser-based CSS, and then I applied my own CSS. I also learned how to create variables in CSS and implement them easily, so that the project maintains consistency. Additionally, I learned how to make things responsive by using rem or em for sizing.

    Responsive profile card using html and css

    1
    Sunil•180
    @SunilParbhooPosted 28 days ago

    Hello Moaz-shamim, well done on completing this challenge! I noticed that your profile card is aligned vertically closer to the top of the page. Additionally I noticed that you made both the body and the main element display of flex. In order to align the card vertically to more closely align with the design, you could remove the display:flex (along with the other flex properties on the main element ( flex-direction, justify-content, and align-items), and add min-height: 100vh to the body element. This should help it better center vertically. Hope this helps, and all the best on your continued coding journey!

    1
  • Sunil•180
    @SunilParbhooPosted about 1 month ago

    Nice job! I like how you incorporated flexbox to make the cards work in desktop and mobile. The only thing I could think to improve this closer to the design is to move the images inside the cards on desktop mode more to the right. Other than that excellent work!

    0
  • Sunil•180
    @SunilParbhooPosted 3 months ago

    Nice job on this project. One thing I think you could try in order to reduce redundancy in your css code is to set the border radius on just your .container class, remove the additional border top left radius: .07em; and the border bottom left radius: .07em; on the img-container. Instead add overflow:hidden to the .container class. This should reduce some lines of code and still produce the desired effect.

    Marked as helpful
    0
  • innitman•130
    @innitmanSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Reading about semantic HTML :) Made me rethink how often I reach for div all the time.

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

    Thinking of how to include a heading or similar in each article or section, but found this comes naturally after a while.

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

    I've read the MDN docs, and my take home understanding is is used for something "standalone" and/or reusable. is more for highlighting a non-standalone area or group of items (or basically when a more specific element isn't available). is use purely when styling needs to be added to a block. I'd be grateful for any mental models people have found helpful for when to use one or the other.

    Practising semantic HTML

    1
    Sunil•180
    @SunilParbhooPosted 4 months ago

    Nice job on this project! Nice job utilizing html elements other than divs for everything. To address your question regarding possible additional elements to use other than divs, here is an article that may be useful (although I see you already read through the MDN docs for this as well). Stop using so many divs! An intro to semantic HTML

    One thing to possibly get this to look more closer to the design is to make sure you are using the correct font color for the text. Other than that, keep up the good work!

    Marked as helpful
    1
  • Sunil•180
    @SunilParbhooPosted 4 months ago

    Hello Dirk, I like your solution to the challenge, and like how you organized your code. Your use of CSS variables is great for reusability. One suggestion may be to possibly provide space between your attribution and the main content, but of course this design choice may be considered subjective. Congratulations on completing this challenge and happy coding!

    0
  • gautam kamlesh yadav•20
    @Gautamy201Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Reflecting on my recent projects, I'm most proud of the seamless integration of various frontend technologies like HTML & CSS

    Blog preview card

    2
    Sunil•180
    @SunilParbhooPosted 5 months ago

    Hey there, nice job on this! A suggestion may be that in mobile size, possibly add a little padding or margin to the sides of blog-card so that there is some space between the card and the body. I like your use of CSS variables for reusability and your use of the transition property to smooth the hover state on the button.

    0
  • Sunil•180
    @SunilParbhooPosted 5 months ago

    Hello, nice job! I believe you may have forgotten to utilize the correct font family and font weights that were listed in the style-guide.md file that was included with the project starter files. Overall I think you did well! Happy coding!

    Marked as helpful
    0