Skip to content
OverviewSolutions
7
Comments
7

MelissaZhuu

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

  • Responsive Testimonials Grid with Flexbox, Grid and Sass

    #sass/scss
    MelissaZhuu•100
    Submitted 8 months ago

    I came across this issue when creating the tablet view for this project. I don't think it's very noticeable unless there's a device with a really weird dimension, but I would like to understand what's happening.

    For the desktop view, I have:

    body { height: 100vh; }

    because I wanted the content to be vertically centered. However, for mobile, I didn't need this and everything is scrollable and works great. Once I started making a tablet version, I noticed that at longer device heights, the content wouldn't be vertically centered, so I added the body height of 100vh, so it would be. But now, when I decrease the height, it cuts my content off at the top and isn't scrollable all the way anymore. Why does it do that? When I change the screen height, shouldn't the vh change to match and the content remain visible and scrollable? How would I be able to keep things vertically aligned at larger device heights but scrollable and visible at smaller ones?

    Thank you to anyone who can help and I hope that explanation made sense.

    1 comment

  • Responsive four card feature section using Sass, Flexbox and CSS Grid

    #sass/scss
    MelissaZhuu•100
    Submitted 9 months ago

    After researching a bit on best practices, I assumed that the images used for this particular challenge were more decorative and I ended up having empty alt values for them. However, I was just wondering if others did the same or if I should still included some text that described the icons such as "lightbulb icon" or "magnifying glass with eye".

    1 comment

  • Responsive Product Preview Card Solution with Sass, Flexbox and Grid

    #sass/scss
    MelissaZhuu•100
    Submitted 9 months ago

    I read on stackoverflow that you have to add the class on the img tag to style it, I was wondering how come adding it to the picture element doesn't work?

     //why not this?
    1 comment

  • Responsive Recipe Page with Sass

    #sass/scss
    MelissaZhuu•100
    Submitted 9 months ago

    Is there a simple way to vertically center-align the list marker?

    Although it's not noticeable when the list text is only one line, when the list text wraps onto multiple lines, the list marker is always aligned with the first line of text. Is it possible to have it align with the middle of the list text? Would it require using :before and flexbox or is there a better/alternative method?

    1 comment

  • Responsive Social Links Profile Solution with SASS

    #sass/scss
    MelissaZhuu•100
    Submitted 10 months ago

    I'm still a bit unsure when I should be using em as a responsive unit and when I should use rem. So far, I've only stuck with em and everything looks/behaves as expected, but I'm wondering if certain units should be in rem instead, like maybe layout container widths? Also, I was wondering if min-width values should be in px or some responsive unit.

    1 comment

  • Blog Preview Card Solution with SASS

    #sass/scss
    MelissaZhuu•100
    Submitted 10 months ago

    As mentioned above in challenges faced, I'm not sure what's the best way to deal with these spacing issues. Am I supposed to always select all text elements and give them margin: 0 to avoid random spacing issues? Or is there a simple way to cancel these defaults? Also, how do people vertically center text elements in a div? I think it's pretty common to want to horizontally and vertically center something in a div, so I'm not sure why it was so difficult. Is flexbox the way to go? It feels a little weird, almost overkill, using flexbox for a simple div with only one text element, but that's the only method that has worked for me in this project. Any alternative suggestions would be helpful! Thanks.

    2 comments
View more solutions

Latest comments

  • Nadir Bousalah•820
    @Medido1Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    proud that i was able to use my knowladge about css grid for the desktop layout

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

    i had challanges applying the correct Css grid rules that i only knew by theory, but this challenge was helpful to implement and deepen that knowladge

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

    how to determine an apporpriate breakpoint

    Testimonials grid section solution

    #sass/scss
    1
    MelissaZhuu•100
    @MelissaZhuuPosted 8 months ago

    I think the breakpoints you've chosen work pretty well! Sometimes, if the content is starting to look too small or too wide at the edges of a breakpoint, I like to set min and max widths to make it not stretch/shrink too much and still look nice. Also, just something I noticed, at 1100px - 1200px, the text for some cards cut off at the bottom, so maybe that's something to look into? Great job otherwise!

    1
  • beowulf1958•1,630
    @beowulf1958Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact the project gave me a chance to practice grid. I have been concentrating so much on flexbox, I had to review a lot of things to make it look the way I wanted it to.

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

    The point of the project was two-fold; practice grid, and continue working with Sass. Organizing the Sass most efficiently is always a challenge, but one I had analyzed the project properly, it went smoother.

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

    Nothing at the moment

    Responsive Layout using Grid and Sass

    #sass/scss
    1
    MelissaZhuu•100
    @MelissaZhuuPosted 9 months ago

    Your solution looks quite different from the design. Perhaps you can work on customizing the styles for larger screen sizes like enlarging the title font and changing the card widths to match the design. I noticed your media query breakpoint is at 400px, maybe for this design it would be more suitable to increase it to something like 800px, that way users who have a screen width of 500px don't have to awkwardly scroll horizontally.

    Marked as helpful
    0
  • P
    Nate Valline•420
    @nvallineSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I feel like I was able to quickly identify the card structure and also how to adjust the layout for the different screen sizes.

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

    This was a good challenge to refresh my memory on using SASS in a non-react environment. Though it is the same per say, getting started required a little extra thought.

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

    I would appreciate any suggestions on improving the quality of my code.

    Product Preview Card with Flex & Grid

    #sass/scss
    1
    MelissaZhuu•100
    @MelissaZhuuPosted 9 months ago

    Looks amazing!

    1
  • kirilzab•220
    @kirilzabSubmitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I spent about 3 hours crating this page and i'm glad it turned out without using Figma

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

    the hardest part was the last part of the page but i tried everything until it worked

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

    Most of all i need help with Display:Grid

    Responsive recipe page using HTML, SASS

    #sass/scss
    1
    MelissaZhuu•100
    @MelissaZhuuPosted 9 months ago

    Some minor color and font-weight differences, but looks good overall!

    0
  • Emi•90
    @emibonezziSubmitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Coded pretty fast.

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

    Styling the buttons.

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

    None

    Social Links Card

    #sass/scss
    1
    MelissaZhuu•100
    @MelissaZhuuPosted 10 months ago

    Looks good

    0
  • Redened•40
    @RedenedSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that i got my solution as close to the design as possible, despite encountering walls for seemingly no reason, which upon further digging, seemed to have been caused by my inattention to superficial details.

    Like how the design font i was provided with seemed to work despite my not using it properly in CSS (Didn't use @font-face). That little oversight caused me to uselessly spend a few hours trying to make the font look the same as in the design.

    Will pay attention next time :D

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

    Challenge: Making the solution identical to the design.

    Overcome process: Rolling face on keyboard for 2 hours.

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

    Writing cleaner code.

    Understanding the screen width requirements in the solution instructions.

    Blog Preview Card (HTML, SCSS)

    #sass/scss
    1
    MelissaZhuu•100
    @MelissaZhuuPosted 10 months ago

    Looks great to me! I like that you included the hover animation on the Learning label too. Regarding the font, I always just use Google fonts to search up the font name and copy and paste the embed code. However, I guess given the font in assets, it probably makes a lot more sense to use that. I also like how your units are all responsive, that's something I could probably work on.

    0
View more comments