Skip to content
OverviewSolutions
8
Comments
14

nicowashere

@devdrivenai250 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

  • Article Preview (Dialog HTML elem & abs positioning + JS for events)

    nicowashere•250
    Submitted 7 months ago

    As always, any advice from more experienced people can only help and is prone to be very thanked for.

    However, the one that I would appreciate the most is, if at all possible, anyone with experience were to have a look at the second set of URLs (the ones in my previous response above) and figure out where I lost my path to make that popover + anchor positioning thing work as it should. What did I misunderstand about them?

    If you're such a good soul, what you have to do to test this is:

    • open in a Chromium browser (Chrome, Edge, etc) in a non-iOS system (mobile or desktop doesn't matter).
    • now, open the popup (by clicking -or focusing and pressing enter- on the share button). It may be that the first time it appears perfectly in place. If so:
    • try to resize the height/vertical/y-axis of your screen (whether using responsive mode of dev tools or simply the browser window itself). If you reached until here, thank you! Please tell me if you happen to understand where I lost my path, and why the dialog box positions itself weird like that (as if it remained fixed, even though it's absolute and anchored).
    2 comments

  • Testimonial Grid (HTML & CSS)

    nicowashere•250
    Submitted 7 months ago

    Any advice or hint as to what I might have missed in terms of pure styling, layout and/or responsiveness is welcome.

    But also, something that I'd like to know is if there's any better way to select the cards than just going one by one like .card-1, .card-2 (or nth-child(1n), nth-child(2n)), etc. I think due to the very nature of the selectors (for example, assigning a different background color to each) that's not possible, but just in case I thought I'd ask. I know about CSS nesting, but adoption is still lower than 95% according to Caniuse, so I preferred to abstain for now.

    1 comment

  • Four Card Feature Section (HTML & CSS)

    nicowashere•250
    Submitted 7 months ago

    I would love to know if it was possible at all to actually do the whole thing just with an implicit grid. I honestly feel like that wasn't possible, which is why I ended up using container queries an creating grid areas for larger screens, which allowed me to set the cards 2 and 3 in the same column.

    But is there a way? Or any other suggestion or feedback is welcome, especially with regards to CSS layout and responsiveness which is my main focus right now.

    TIA!

    1 comment

  • Product Preview Card (HTML & CSS)

    nicowashere•250
    Submitted 8 months ago

    Hmmm... anything. I think I solved everything I set out myself to get done. However, experience cannot be bought. So if you see this and find smth I could do better or take into account next time, please tell me.

    Thank you!

    1 comment

  • Recipe Page (HTML & CSS)

    nicowashere•250
    Submitted 8 months ago

    Any and all type of constructive feedback is greatly appreciated. One specific example, though, where I would like advice is on my compromise with and when they go from small screen to larger. Is there a more convenient or "better practice" approach to this? I'd appreciate advice. Thanks!

    1 comment

  • Social Links Profile (with Flexbox, transitions and a custom cursor)

    nicowashere•250
    Submitted 8 months ago

    I'll be honest. I didn't leave anything undone of what I set myself to do. However, if you notice anything that I could improve, or anything that could have passed unnoticed to me, please let me know. TIA!

    2 comments
View more solutions

Latest comments

  • Fopefoluwa Ikufisile•850
    @FopefoluwaIkufisile
    What are you most proud of, and what would you do differently next time?

    I am not satisfied, This was a struggle for me, I would try it out again

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

    I faced challenges getting JavaScript to handle the social links container's behavior at different screen sizes. My initial attempts complicated the layout, but I eventually found a more manageable solution. While it works, I realize there's room for improvement in my approach to responsive design.

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

    The explanation of how the dynamics of the two different behaviors of the social links container work at mobile and desktop view.

    Article preview component

    1
    nicowashere•250
    @devdrivenai

    Hi! First of all, I want to tell you it is normal to struggle. It is not a negative thing. Actually, it is only through struggle that we learn more and get better. I would say "Embrace struggle". :) So don't worry about that bit.

    Also, the project looks quite good and I really liked the transition effect of when the popup fades in and out. That was cool.

    With regards to what you request specifically, IMHO it may work better to place the .share-box2 inside the .share and then from there you can handle the positioning with a media query (or container query, whichever you prefer) and then using absolute positioning (eg you change the relative positioning according to the viewport/container width). Then, in JavaScript, you only handle the opening and closing of your popup (not its positioning, which is more like style, and it's probably better handled in CSS).

    Also, it would help to use more semantic HTML, (section, article, button, etc.) and this includes probably using the <dialog> HTML element (I would use it as non-modal, check MDN for this). It should make things easier with opening and closing it, I think.

    Hope that's both helpful and clear, but feel free to follow up, responding here, and I will try my best to be of help.

    Also, remember you've done a great job, and in development there's never a goal, you're always in a "struggle" to learn and improve on smth. Don't worry about it, just enjoy it. HTH!

  • nicowashere•250
    @devdrivenai

    This was a really cool solution! There were many things that I really liked, but some that stand out:

    • the transition of .share-links popup on mobile is just dope! :)
    • the shadow around the .share button feel like a fresh, intuitive addition.
    • the transition with scaling on the furniture picture makes it come alive.

    Hard to come up with suggestions here, but here is my best attempt:

    • some of the divs could use more semantic elements (like section, article, button, etc.)
    • maybe adding also a transition to the .share-links popup on larger screens?

    Overall, though, really inspiring one!

    Marked as helpful
  • nicowashere•250
    @devdrivenai

    Great effort! Hard to come up with some suggestion for improvement. :)

    Maybe bumping up just a bit the font-size in the card__description-bold-white would make sense?

    And another tiny detail I noticed is the border of the images inside the card__headers looks a little thinner and whiter (how do you say more white? :) ) than in the design. Do you think maybe increasing a bit border-width and changing border-color would work?

    However, I gotta say, IMHO, great work! Keep it up!

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

    Well this was an interesting challenge but i decided to add my own style to it. The reason being i wanted to design it close but still wanted to experiment and add some originality.

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

    How can i position the elements which exactly as the image provided. This problem i encountered but i also did not want to waste more than a day so i made the design with some changes .

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

    Maybe postioning of bottom elements exactly the same as the material provided.

    Four Card Page

    3
    nicowashere•250
    @devdrivenai

    Good job, mate! That was a good effort.

    Some things you can still improve, though:

    • I suggest you to maybe follow this path in MDN, in particular the "grid" section (and, of course, make your notes and experiment).

    • Also, have a look at this property.

    Looking forward to the next one! Keep it up!

  • Daniele Ercoli•170
    @DanieleErcoli243
    What are you most proud of, and what would you do differently next time?

    I'm proud because I solved the problems all by myself, it took a while, but it was worthy. Next time I would foresee the problems and look better for a solution.

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

    The challenge I encountered was to place the cards to form a sort of cross and I overcame it by trusting css properties.

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

    No-one actually.

    Responsive page with four cards

    1
    nicowashere•250
    @devdrivenai

    Very good.

    Marked as helpful
  • nicowashere•250
    @devdrivenai

    Good job!

    Just in case you're interested, if you want, you can make sure that the height of your page occupies at least the total height of the screen with:

    body {
    min-height: 100vh;
}

    Good work there. Keep it up!

    Marked as helpful
View more comments