Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Joanne Wang

@joanneccwang
135Points

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

  • Desktop design screenshot for the Sunnyside agency landing page coding challenge

    Landing Page using Vue3 + Vite with Mobile-first workflow

    • HTML
    • CSS
    • JS
    1
    Submitted

    In this project, the biggest takeaway for me is learning how to work with JS media queries using window.matchMedia() method. Reference from CSS Tricks

    // Create a media condition that targets viewports at least 768px wide
    const mediaQuery = window.matchMedia('(min-width: 768px)')
    const handleMediaQueryChanged = (e) => {
      // Check if the media query is true
      if (e.matches) {
        // Then log the following message to the console
        console.log('Media Query Changed!')
      }
    }
    // Register event listener
    mediaQuery.addListener(handleMediaQueryChanged)
    // Initial check
    handleMediaQueryChanged(mediaQuery)
    

    -- Any feedback is welcomed. Thanks in advance!

  • Desktop design screenshot for the Profile card component coding challenge

    Profile Card using Plain HTML + CSS

    • HTML
    • CSS
    0
    Submitted

    Hello! It's my first tryout on Frontend Mentor!

    1. I don't think I get the box-shadow right.
    2. I usually layout everything using flexbox. Do you think it's okay or any suggestions?

    Thanks in advance for your feedback.

Latest Comments

  • Solution screenshot
    • HTML
    • CSS
    • JS

    Calculator App With Theme Switch Using CSS Variables & Vue

    4
    Joanne Wang135 | Posted 10 months agocommented on BrandonSdvl's "Calculator app" solution

    Seems like you use this.$parent.content to manipulate display result. I'd suggest you to try use prop and emit for data propagation. You can also try Vuex, but I think prop and emit are enough for this project.

    0
  • Solution screenshot
    • HTML
    • CSS

    Flex Baux, go! HTML & CSS

    9
    Joanne Wang135 | Posted 10 months agocommented on Bob's "3-column preview card component" solution

    To make the design match the preview better, I usually set the design jpg as background image with opacity while developing so that I can layout more precisely. So far it works pretty well!

    You can set flex property for each box to have specific flex effect. To prevent from growing, flex: 0 0 auto or flex-grow: 0 should do the job.

    5
  • Solution screenshot
    • HTML
    • CSS
    • JS

    social media dashboard with theme toggle - scss grid and flexbox

    2
    Joanne Wang135 | Posted 10 months agocommented on Conrad's "Social media dashboard with theme switcher" solution

    I'd probably use <img> since it's more readable for me. And we usually don't have to manipulate inline svg if your designer does a great job.

    BTW, the RWD is so smooth. Really love your work!

    0
  • Solution screenshot
    • HTML
    • CSS

    HTML CSS Practice - using basic CSS, CSS Flexbox, CSS Button Creator

    2
    Joanne Wang135 | Posted 12 months agocommented on kevinozyx's "3-column preview card component" solution

    For flex-items, by given flex: 1 for each boxes, will give you the same effect to equally divide container's width into 3 columns. If you want to keep the 12rem to specify the min width of each column. flex: 1 0 12rem is what you're looking for. It stands for flex-grow: 1; flex-shrink: 0; flex-basis: 12rem. And for the same properties shared between each boxes, I'd suggest to define them in another class.

    0