Skip to content
OverviewSolutions
26
Comments
6

Manav

@manav-sharma69390 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

View more solutions

Latest comments

  • Manav•390
    @manav-sharma69

    Hi! Your solution looks really good.

    You would be of great help if you tell us how did you manage to make your solution look same as given in design file (in terms of size)?

  • Jerry Potter•50
    @RZXX1
    What are you most proud of, and what would you do differently next time?

    did it

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

    to organize links list

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

    Alright, I'm still wondering, is active state an hover or active pseudo class.

    and how can I change the background color of link and color of the link text together when I hover over at link's area, but not directly to link text?

    please help.

    • sorry I set the container width by percent, and messed up this

    Social Links Profile

    2
    Manav•390
    @manav-sharma69

    Hi! There's nothing wrong in using percentage to set widths. However, if you set widths using em, there's a good chance that you'll be sorry 😂

    Regarding the background and color problem, this should work:

    .link:hover - use this to change the background color of link on hover (you've already implemented this part)

    .link:hover a - use this to change color of anchor tag when user hovers over li or, .link.

    What it's doing is selecting the anchor when the user hovers over your li element.

    Descendant combinator - you've used it before in your code

    Hope this helps 🙏

  • Shiv•350
    @undrthegraveyard
    What are you most proud of, and what would you do differently next time?
    • One opportunity to improve is that the final design of the mobile preview is not similar to the original design, for instance, the "Preparation time" section.
    • Overall, the spacing around the bullet points could also be improved drastically.
    What challenges did you encounter, and how did you overcome them?
    • There were a few challenges that I encountered, one of them was using classes logically in my code. I have been struggling to use classes efficiently, especially in my CSS code.
    What specific areas of your project would you like help with?
    • On one specific issue, I would really appreciate some help from the community. I was not able to make the color of the bullet points(dots) same as that of their heading.
    • For instance, the color of the heading "Ingredients", and its bullet points(dots) should have been the same.

    Responsive webpage design with HTML and CSS

    1
    Manav•390
    @manav-sharma69

    Hi! You can add colors to bullet points by using the ::marker pseudo-element.

    Here's the MDN link: ::marker

    Hope this helps!

    Marked as helpful
  • Ricardo•520
    @ricardo1003
    What are you most proud of, and what would you do differently next time?

    not sure in this project, probably the hover effect i added

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

    i didnt encounter any big challenge

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

    i don't know why but when I try the page on my computer it looks perfect, but when I try on my phone some texts inside the buttons aren't centered for some reason, i even tried changing the centering method but it didn't worked

    Responsive landing page without media queries

    2
    Manav•390
    @manav-sharma69

    Hi! I looked at your code and found out that you're using align-content: center; property on the anchor tags.

    However, this might not be working because, as MDN says, 'This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap)'.

    And the default of flex-wrap is nowrap.

    Your problem should be solved if you used align-items: center; on <li> element. Also, there's the align-self property which can be used in place of align-content, but I don't really use it and it doesn't always work (read the docs).

    Relevant MDN links:

    Hope this helps!

    Marked as helpful
  • shaunso•30
    @shaunso
    What are you most proud of, and what would you do differently next time?

    Most proud of completing the challenge completely. It would be easy to just leave out one aspect of the challenge, but tenacity is imperative.

    Next time, I would ensure that I code for tablets even if the challenge doesn't call for it

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

    The keyboard navigation.

    Looked at the FAQ of actual companies to see how they handled this to discover that

    This wasn't intuitive to me at first, but I do understand now.

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

    Looking for help on how to refactor the JavaScript in my 'app.js' file. It feels rough & dirty to me and I feel like I could simplify the code.

    Responsive FAQ accordion

    1
    Manav•390
    @manav-sharma69

    Hii! I looked at your JS and HTML code.

    Most of your JS code wouldn't be needed if you use the <details> element. Also, using this tag would make your markup more semantic and accessible.

    Here's the MDN link: <details>: The Details disclosure element

    Hope this helps 🙏

    Marked as helpful
  • kavallir•50
    @kavallir
    What are you most proud of, and what would you do differently next time?

    I am proud that I did it all by self. Next time I want to start from the mobile size and then do css for the large screen size.

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

    Nothing was challenging.

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

    I want to know how to do hover visible on phone devices if it is possible.

    Blog preview card

    1
    Manav•390
    @manav-sharma69

    No, hover is not possible for devices which don't have a cursor.

    If you use :active state then the box shadow will change as long as the user is somehow tapping the blog component. In other words, as long as user's finger is on the blog component, the box shadow will be different.

    When the blog component is not "touched", the pseudo class's styles don't apply.

    It creates a hover like effect (if that's what you were looking for). Also, take a look at touch events.

    Link for more context: CSS3 hover/tap doesn't work in mobile browsers

    Hope this helps ☺️

    Marked as helpful