Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
685

Elaine

@elaineleungHong Kong11,360 points

Frontend dev brushing up on frontend skills! Thanks for checking out my work, and please feel free to let me know if anything is not working as it should, especially the older projects. No browser extensions or Figma files are used in these projects, just my eyes 🙂

Latest solutions

  • Responsive news homepage with mobile nav and accessibility design

    #accessibility

    Elaine•11,360
    Submitted over 1 year ago

    2 comments
  • Responsive calculator built with Vanilla JS

    #accessibility#sass/scss

    Elaine•11,360
    Submitted almost 3 years ago

    9 comments
  • Landing page with dropdown nav using plain JS

    #accessibility

    Elaine•11,360
    Submitted almost 3 years ago

    5 comments
  • Responsive toggle component with only CSS and HTML

    #accessibility

    Elaine•11,360
    Submitted almost 3 years ago

    3 comments
  • Responsive image slider/carousel built with SCSS and plain JS

    #accessibility#sass/scss

    Elaine•11,360
    Submitted almost 3 years ago

    4 comments
  • Responsive testimonials grid section using grid and CUBE CSS

    #cube-css

    Elaine•11,360
    Submitted almost 3 years ago

    1 comment
View more solutions

Latest comments

  • Dilhan Boca•220
    @dboca93
    Submitted over 1 year ago

    Stats Preview Card Component

    #sass/scss
    1
    Elaine•11,360
    @elaineleung
    Posted over 1 year ago

    Hey Dilhan, excellent job here, and it makes me want to go back and clean up some of my old code for this challenge!

    The semantic HTML looks pretty clean to me :) In terms of suggestions, one I could think of would probably be just to add a header tag even though it can be optional, but it would be nice to have since you got a main tag with an h1 in there, and I might put that h1 under header instead. (By the way, what you did with the h1 was also something I did for a lot of these component challenges... I think that's a good idea too!)

    One other thing I saw (which was also something I did in my own solution) was putting the stats in p tags. If I could do that differently now, I would have the stats as an ul list instead, as that might be easier to pick out for users with a screenreader.

    Once again, great work!!

    Marked as helpful
  • Dhanya•50
    @dhan5a
    Submitted over 2 years ago

    NFT preview card component

    3
    Elaine•11,360
    @elaineleung
    Posted over 2 years ago

    Hi Dhanya, first off, I think you did a great job putting this together! About the custom variables not working, it looks like there's a trailing curly brace in line 3 of your CSS file, and I think if you try to remove that, you'd be able to use the variables (I tried it in the browser just now using your code).

    Some suggestions I have here: I'd remove the width: 50% from the body selector, and if you're hoping to put some space on the sides to prevent the component from touching the browser sides, instead of having max-width: 300px on .card, you can try width: min(90%, 300px). This declaration tells the browser to keep the width at 90% until it gets to 300px, at which point the width would be maintained at 300px as the max width.

    Lastly, about using fixed pixel values in font sizes: It's generally good practice to use relative units (such as rem), so that's something I encourage you to try as well (by default, 1 rem is 16px). One of the main reasons is because relative units allow users to have their own preferred browser/system settings and won't be locked into using fixed sizes in the code.

    (Oh, and be sure to fix add alt tags in your img elements, otherwise these would show up in your report for sure)

    Hope this helps you out!

    Marked as helpful
  • Dytoma•550
    @Dytoma
    Submitted over 2 years ago

    SASS for flexible CSS, Media queries for responsive Design

    #sass/scss
    3
    Elaine•11,360
    @elaineleung
    Posted over 2 years ago

    Hi Dytoma, this looks like a great start, and I think your code works fine. I do suggest giving your classes and variables more meaning names, where instead of

    const rating = document.querySelectorAll(".nbr");
    

    ... you can try something like this:

    const ratingBtns = document.querySelectorAll(".rating");
    // note that Btns stand for buttons since there is more than 1 button here!
    

    For the for loop, I suggest using classList instead of className so that you can easily add or remove a class instead of changing the className attribute directly. I also don't think selected needs querySelectorAll since there's only one button being selected. You can try this:

    for(let i = 0; i < rating.length; i++) {
        rating[i].addEventListener("click", function() {
            let selected = document.querySelector(".selected");
            selected.classList.remove("selected")
            this.classList.add("selected");
        });
    }
    

    Lastly, instead of having a default score of 1, I would just leave it empty and let the user choose. Sometimes users might accidentally click on the submit before they select the score, and you wouldn't want them to accidentally send a score of 1! Hope this helps you out a bit 🙂

  • Trung Lam•270
    @trunglam7
    Submitted over 2 years ago

    Interactive Rating Component

    2
    Elaine•11,360
    @elaineleung
    Posted over 2 years ago

    Hi Trung, I think this looks quite well put together! If there's one thing I'd change, I would use a class to change the style of the selected button instead of using the :focus pseudo class, seeing that focus is meant to used for showing which element the user had last interacted with. If you accidentally click on something else like the background or the text, the selected button would go back to its unselected color because it has lost the focus, and that would make it seem like no button got selected, even though in the background JS is still keeping track which button got selected. I would just create a new class called selected, style the selected button with that class, and then use JS to add/remove the class as needed. Hope this helps you out a bit!

    Marked as helpful
  • agyemang•100
    @Owura-56
    Submitted over 2 years ago

    Fylo Data Storage Component

    1
    Elaine•11,360
    @elaineleung
    Posted over 2 years ago

    Hi Agyemang, good job putting this together! For the triangle with the ::after pseudo element, instead of having just border: solid transparent, try specifying the sides, like this:

    .grid-item-3::after {
      top: 98%;
      right: 0; // remove left
      border-left: solid transparent;
      border-top: solid white;
      // rest of your code
    }
    

    Also, change the border-radius in .grid-item-3 to border-radius: 8px 8px 0 8px;, which should give you that sharp corner instead of a rounded one.

    With the media query, I'd choose a much higher breakpoint since right now when the layout changes, the sides are cut off. Also, there appears to be some overflow going on, and I think it may have to do with the large margins you're using (such as in .grid-item-3) to do positioning. I would actually suggest not having .grid-item-3 as a grid element but to have that as a child of .grid-item-2 instead, and I'd use position: absolute instead of using things like margin-left: 21rem, which is what I think is causing things to be pushed off to the right side of the screen.

    Hope this helps you out!

  • Jody VanHoose•40
    @jodyvanhoose
    Submitted over 2 years ago

    Product-preview-card-component with using HTML, CSS, and CSS Flexbox

    2
    Elaine•11,360
    @elaineleung
    Posted over 2 years ago

    Hi Jody, first off, great job in getting your solution to look very close to the design! 🙂 I think you did many things well; for instance, I like how readable and well-annotated your code is. There are just a few things I noticed in the area of responsive design that you can check out:

    Breakpoint: The breakpoint is quite large, and you'll notice that the photo in the mobile view gets pixelated past its width of 686px, plus having the mobile view at such a wide width is not very optimal for this card component, as the photo would be gigantic while the lines of text and CTA button gets stretched. What I suggest is to use a smaller breakpoint: to find ideal point, simply see how wide the desktop view is meant to be and use that as a starting point. From what I recall, the design's desktop width should be about 600px.

    Image distortion: The image at the desktop view is getting distorted, meaning that the original aspect ratio is being changed. To make sure the image doesn't get stretched or squished, add a object-fit: cover to the image class.

    Component width: Aside from changing the breakpoint, one other thing you can try is to ensure the mobile view card width doesn't get too wide. To do that, instead of just having width: 93%, try width: min(93%, 400px); which tells the browser to keep the width at 93% if the width is smaller than 400px (you can use any value here you wish). Likewise, for the desktop view, try width: min(93%, 600px); instead of width: 35%. Once you do that, you may find that the width property for your desktop image doesn't have to be 25%; in fact, it can be 100% or 50% and still be the same width because you have flex: 1 as a declaration, and you also have a width: 50% for your description container.

    Hope this can help you out!

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Month - 3rd Place

This badge is awarded to the 3rd placed community member on the monthly Wall of Fame.

Fun fact

An abacus is an ancient calculating tool. These days we would typically use a calculator or computer but the abacus is where it all started!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub