Skip to content
OverviewSolutions
16
Comments
40
IO
@i000o

All solutions

  • Interactive rating component JS

    #sass/scss
    IO•690
    Submitted 12 days ago

    I would love some help with box-shadow for this challenge. I don't have the Figma file, so I'm guessing how it's been designed, but I really couldn't put my finger on it. Mine doesn't perfectly match the design. Can anyone show me how the code should look? You can particularly see my struggle on the thank-you state.

    Secondly, please check that my Javascript makes sense and if there's anyway to simplify it, do let me know.

    Thirdly, I always welcome Sass critique. I'm going for streamlined simplicity if I can. I have some comments in there of things I think could be improved, but further thoughts are welcome.

    0 comments

  • Huddle landing page with Sass

    #sass/scss
    IO•690
    Submitted about 2 months ago
    1. Please help with background-image. It cuts off on scroll. Why?
    2. Are Font Awesome the only way people use social icons? Why do they name their classes fa fa-instagram for instance? How can I refer to the class directly when it has a space in it? I had to use nth-child() to get around this. It was annoying.
    3. I know the Responsiveness can be improved between Tablet - Desktop, but I'm not sure how to go about redesigning the page proportionally to flex down/up nicely. I'd like help with this if anyone has ideas, I'll also look at how other devs responsively designed.
    4. Feedback on Sass as per. Was there anything more I could've used? An @mixin on :active maybe for repeated declarations? I'd like to make the most of it.
    0 comments

  • Single price Grid component

    #sass/scss
    IO•690
    Submitted 2 months ago

    I'd like help with using classes for specificity. My HTML contains many <section> tags, which might not have been the best use. I also created <article> tags, but didn't call on them in the CSS. I'm not sure why my design breaks when I replace the card tag of <section> with a class target. I'd like to understand this as I didn't foresee it and attempting to do the box-shadow around the outside was one of the last things I tried to do.

    How do I get rid of the <ul> margin? margin/padding: 0; has no impact.

    Why am I unable to remove border-radius in the mobile design? I don't know why my declarations have no impact when I attempt it.

    1 comment

  • Grid & Flex Social Proof Section

    #sass/scss
    IO•690
    Submitted 2 months ago
    1. Please review my Sass and let me know how I could make better use of it here.
    2. Please test the responsiveness and see where you think it could be improved.
    3. How can I use bg-img well in this design? I positioned it correctly for desktop but it's not responsive and it doesn't cover the entire viewport, it cuts off. I'm not confident with those properties yet so I'd appreciate help with this!
    1 comment

  • Responsive 3-column layout with active states using Sass

    #sass/scss
    IO•690
    Submitted 3 months ago

    I'd like feedback on my Sass. I tried to make better use of it this time, incorporating nesting, mixins, variables and partials. I'd like to go deeper over time, though. I find that writing careful Sass makes me understand my CSS better, which I appreciate.

    I couldn't figure out how to remove the previous border-radius settings on the mobile design in the media queries. Those settings weren't behaving as I'd expect. I tried targeting specific corners, as well as a general border-radius attempt (I learn that this is actually shorthand, which is good to know). This bugged me a lot, so help would be appreciated.

    1 comment

  • Responsive Flex Stats Card with Sass

    #sass/scss
    IO•690
    Submitted 3 months ago

    I'd like feedback on my Sass, if there's anything I could add/adjust. I'm comfortable writing it, but I don't think I'm using it to its full potential. This is mostly because I don't always know what the project will entail so I don't make intentions to necessarily create mixins or variables as readily. (Also my documents are pretty short at this stage, still.) I namely just use nesting without thinking about it too much, which I enjoy.

    1. Please help with the image filter and how to make it match the lighter design.

    2. Please also help with the tiny gap underneath the image in the card. I couldn't figure out how to remove this and I think I've been able to in the past with similar briefs but I couldn't in this instance! It must be simple?

    0 comments

  • Profile Card Component with Sass

    #sass/scss
    IO•690
    Submitted 3 months ago

    If anyone knows a better way to have the bg images proportionally resize compared to the viewport without changing their position in relation to the card, that'd help me. I almost wanted to 'pin' them to the corners of the card. But instead it seemed that with every position change, the size would also change and vice versa, so it felt annoying to grapple with. Should I have used specific pixel units in background-size instead of contain? Should I have only adjusted background-size instead of the position values?

    0 comments

  • Testimonials Grid Sass Mobile-First

    IO•690
    Submitted 3 months ago

    I'd like help with the ways that I could have made more use of Sass syntax in my code because I felt I was too preoccupied with the problem-solving of the desktop grid that I didn't think as much about possible variables, mixins etc. and at some point I felt that my code was getting long and potentially inefficient.

    1 comment

  • Order Summary Component with Sass

    #sass/scss
    IO•690
    Submitted 4 months ago

    I'd like feedback on my Sass. Is there anywhere else where I could've implemented Sass resources that I overlooked? I used x1 partial, x1 mixin and x3 variables.

    How can I make the sizing/alignment of the page (body) match exactly with the design? I always get this wrong.

    0 comments

  • NFT Preview Card

    IO•690
    Submitted 4 months ago

    Lots of other devs resolved this hover effect in a different way but please give feedback on my method. Specifically in my HTML, the `` element container, and the CSS with hover pseudo-class and pseudo-elements ::before and ::after.

    0 comments

  • Four card feature Grid Mobile-First

    IO•690
    Submitted 4 months ago

    Are my cards too big? How would I adjust them to suit this flexible layout if so?

    1 comment

  • Perfume Mobile-First

    IO•690
    Submitted 4 months ago

    Has anyone used Grid for this instead? Might it have been faster or granted more control in the desktop version?

    1 comment

  • Recipe page Desktop & Mobile

    IO•690
    Submitted 4 months ago

    How do I center the content from the top? Height property?

    1 comment

  • Social Links Profile

    IO•690
    Submitted 5 months ago

    Do I need JS to make the pointer cursor black?

    1 comment

  • Blog preview card

    IO•690
    Submitted 5 months ago

    Please advise as to the above. I don't imagine that the best way was to reorder the stack in the HTML, but I couldn't figure out how to make proper use of the order property within flex containers. In a situation like this, would you always assign the flex container to body rather than the card itself? I'm not sure...

    1 comment

  • Responsive QR Code for Desktop and Mobile

    IO•690
    Submitted 5 months ago
    2 comments