Skip to content
OverviewSolutions
2
Comments
3

Aiden

@sorcerycssSan Diego, CA20 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!

I’m currently learning...

Responsive web design & JavaScript

Latest solutions

  • Blog preview card using flexbox

    Aiden•20
    Submitted 5 months ago

    I find it very complicated to set up the right width for my image based on the figma design file. Perhaps, I used incorrect width elements or was wrong with the sizing that I have set on the image itself, not sure. I'm still in the process of improving the solution, refactoring in other words, to make it look much cleaner.

    2 comments

  • QR code component using CSS Flexbox

    Aiden•20
    Submitted 5 months ago

    First of all, I'd love to hear experitise opinion regarding the CSS reset, more specifically box-sizing: border-box;. I noticed that it shrinks the component a little bit, so I decided to comment it out for now. Please advise!

    This is my very first solution on this platform plus I have zero experience working with Figma, so I'd also love to find out if my min-width: 288px; and max-width: 288px; on generic .container have place to be as a workaround.

    Regarding the .container: I started to overthink a lot, and made my .container extremely large in terms of attributes inside, so I can't really call it generic afterwards. As far as I know, there should be only width, max-width, and margin: 0 auto;. Should I just make another div inside the .container where I would include things like box-shadow, border-radius and background, or just make an additional class and append to existing div?

    Image tag <img>: Is it a good practice to have my <img> wrapped inside separate div? Or it just depends how I implement flexbox to such things if I were to use it on this specific image? Also, I've added a fixed height: 288px; and width: 288px; to the qr code image, but I'm very unsure if that's proper way of doing that. Please help!

    Lastly, margin on .qr-title in em units. When I do 1.5em for margin-top, it shows as 33px, not 24px in Dev Tools, but when I do it in px instead of ems everything fine in Dev Tools. Any ideas on why this is happening?

    1 comment

Latest comments

  • Aiden•20
    @sorcerycss

    Very nice! I would figure out how to make that <div class="attribution"> not to push the card component up. Overall, I like your solution. It's pretty neat that you used root for the colors and fonts. Keep it up!

  • Rexy-tan•10
    @Rexy-tan
    What are you most proud of, and what would you do differently next time?

    I'm proud that i was able to do this project in one sitting. though, it idid take a few hours since i ran into some trouble. but overall i am very happy with the outcome.

    I am a bit unsure if the way i centered the divs are correct. and also if the amount of divs created were necessary.

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

    the most challenging part for me was making the website responsive. I actually keep starting over becasue i get super confused. A mentor suggested that i try working on a phone size version then adjust the screen once i am done. and i found that really effective, with a little more explanation from chatgpt i was able to get the concept.

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

    Definitely need help with the correct sizes and spacing and the making the website responsive

    qrcode2

    1
    Aiden•20
    @sorcerycss

    Nice solution, Rexy! I'm not super experienced myself, but I might give you some tips for you to utilize.

    1. Personally, I wouldn't put direction: flex; on the body itself, but it's fine for this challenge I guess.

    2. Also, I think that @media queries is not a must have, since both mobile and desktop versions have identical sizes as I can see by looking at the figma file.

    3. Try to use shorthand version of padding for your .container1 to reduce the amount of code.

    4. You can set text-align: center; on the entire body. That's what I would do.

    5. For the spacing that you're asking, I would add some padding to the whole container what holding your component, and then work with text margin inside that container.

    P.S. My solution isn't perfect, of course, and there's huge room for improvement, especially with widths and heights. Hope my feedback might help a bit =)

  • Aiden•20
    @sorcerycss

    Very well done! However, one tip that I could give you is try to not use display: flex; on the body itself, but create another div element and target it instead.