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

Ye-Won Seo

@yaywonahGaithersburg, MD170 points

Student in Tech

Latest solutions

  • Article Preview Component with JS


    Ye-Won Seo•170
    Submitted 6 months ago

    I'm having trouble aligning the share button with the user pic and name/date on the bottom of the card, especially in mobile view. I'm guessing that it's because I coded the share-btn in a separate div from the info in my HTML?

    As for desktop view: I'm stumped on why the bottom of the container is falling off in the generated screenshot. It looks normal on my desktop. I think it's because of how I used the margin to push everything down.


    1 comment
  • testimonials grid using css grid


    Ye-Won Seo•170
    Submitted 8 months ago

    There's a bit of white space left on the bottom of the cards with shorter reviews. I tried messing with font-size and padding/margin to get it closer to the final design imgs, but there's still a bit of space left in Jeanette's card.

    Also, I used the colors in the provided styles md, but they still look off compared to the final design.


    1 comment
  • Four Card Feature SEction


    Ye-Won Seo•170
    Submitted 8 months ago

    Any redundancies in my code! Also, I'd like to know if my CSS is easy to follow along. I'm thinking of switching to coding all the typography in the beginning and then the rest, instead of coding each part as it appears in the design file.

    Also, any suggestions on how to fix my box shadow so that it looks more like the design would be very helpful.


    1 comment
  • Product Preview Card


    Ye-Won Seo•170
    Submitted 9 months ago

    I keep getting a small amount of white space between the bottom of the img and the end of the product card when viewed via desktop. I'd like to know how others went about planning the height of their product card, and if they used px or a more responsive unit of measurement.


    1 comment
  • Recipe Card


    Ye-Won Seo•170
    Submitted 9 months ago

    I did choose to use to emulate the line breaks in the design, but I'm curious to see if there's a better or neater way to accomplish that with another kind of CSS. I'd also like to know if I used the table html correctly for the nutrition information section.


    1 comment
  • Social Links Profile Solution


    Ye-Won Seo•170
    Submitted 10 months ago

    I saw that the pointer cursor in the active states screenshot was black as opposed to white. Is there a way to style the cursor: pointer in CSS to be black? Or does it have to be a custom pointer: url()?


    2 comments
View more solutions

Latest comments

  • MartaOcvirk•70
    @MartaOcvirk
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    That I finished the project!

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

    JavaScript was a challenge.. I'm not sure I overcome them, but hey, code works :)

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

    JavaScript

    Article-preview-component

    2
    Ye-Won Seo•170
    @yaywonah
    Posted 6 months ago
    • Great use of semantic HTML. The code was easy to read and follow along with. Your CSS is also neat and well-structured.
    • As for JS, I agree that as long as the code works then it's fine!
    • But if you were curious about a shorter/simpler solution, then you could consider adding a .no-show class toggle to your shareLinks under your shareButton event listener instead:
    shareButton.addEventListener('click', function() {
          shareLinks.classList.toggle('no-show')
    }
    

    That way it adds and removes the no-show class to your share links with every click.

  • @valchiz•150
    @yemmighto
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Learning how to make grid layout and using grid area

    Testimonial Grid Page Using Vscode

    2
    Ye-Won Seo•170
    @yaywonah
    Posted 8 months ago

    CSS

    All of my suggestions follow the order in your CSS file.

    design/typography

    • I'd put a margin: 0 on the .word p selector in order to get rid of the space between the name and verified graduate. That way, it looks closer to the design where both are on top of each other instead of having space in between.
    • remove the padding-top: 12px and padding-top: 15px on your img selector so that the profile pic is a circle instead of a half oval in mobile and desktop layout. Instead of using padding-top, add a align-items: center in your .name to align both divs.
    • there is a missing ; after --white: hsl(0, 0%, 100%). adding the semi-colon will make your card_3 and card_5 have white backgrounds
    • the justify-content and justify-item properties has no effect on divs with display: inline-block, which you added in your .container in your @media (max-width: 1000px) media query.

    /css grid/

    • I recommend this CSS Grid tutorial by Kevin Powell. He shows how to use CSS grid using this project as an example.
    • you can also look at his code to see where to add the quotation mark svg graphic into your design.
    Marked as helpful
  • m-maher97•160
    @m-maher97
    Submitted 10 months ago

    Four-card-feature-section

    1
    Ye-Won Seo•170
    @yaywonah
    Posted 8 months ago
    • Your HTML and CSS were easy to read and follow along.
    • I would suggest changing the px values of your margin, width, padding, and font sizes to em/rem, so that the layout is more responsive.
    • The card divs in your mobile media query touch the edges of the screen once it hits less than 400px. I would change the
    .col1, .TeamBuilder, .Karma, .col3 {
    width: 100%
    }
    

    to a smaller value like width: 80%

    • I'd also change the margins of your h2 and h1 elements in your title div so that there's less space between them. That way it can look more like the design.
  • Davi Luiz•90
    @Davi-log
    Submitted 9 months ago

    Componente de cartão de visualização do produto

    2
    Ye-Won Seo•170
    @yaywonah
    Posted 9 months ago

    Your code is well-structured and readable. However, I would change the fixed width of the .container div (width: 400px) to a value under 375px, so that your card doesn't get cut off in mobile view.

    Marked as helpful
  • cyber-m•140
    @cyber-m
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    It was my first time that I had to use the CSS counter() function, it was pretty useful in order to match the design of the ordered list.

    Recipe page

    1
    Ye-Won Seo•170
    @yaywonah
    Posted 9 months ago

    I like how both your HTML and CSS is very neat and well-structured. Your solution looks similar to the design for both desktop and mobile. I liked that you used the CSS counter function to style the numbers in your ordered list!

  • youcef laala•540
    @toubayes
    Submitted 10 months ago
    What specific areas of your project would you like help with?

    a aaaa i want heelp with this javascript and design

    Responsive social link

    1
    Ye-Won Seo•170
    @yaywonah
    Posted 10 months ago
    • I would add a border-radius: 15px property to the .out-card div to round the corners like in the solution.
    • change the color of the .header-card .job CSS to color: var(--White);
    • decrease the width of the .out-card div under @media (min-width: 1200px) so that it's not as wide when on desktop
    • decrease the font size of the <h1> title
    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

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