Skip to content
OverviewSolutions
8
Comments
8
Ye-Won Seo
@yaywonah

All comments

  • MartaOcvirk•70
    @MartaOcvirkSubmitted 3 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
    @yaywonahPosted 3 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.

    0
  • Ye-Won Seo•170
    @yaywonahPosted 4 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
    0
  • Ye-Won Seo•170
    @yaywonahPosted 5 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.
    0
  • Ye-Won Seo•170
    @yaywonahPosted 5 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
    0
  • cyber-m•140
    @cyber-mSubmitted 6 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
    @yaywonahPosted 6 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!

    0
  • youcef laala•540
    @toubayesSubmitted 7 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
    @yaywonahPosted 6 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
    0
  • Ye-Won Seo•170
    @yaywonahPosted 6 months ago

    Clean and neat code using semantic HTML and CSS. Layout looks good on both mobile and desktop. The only thing I'd suggest is centering the container vertically too, but overall it is accurate to the design.

    0
  • Kauã_Almeida•100
    @Kaua-AlmeidaSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    me orgulho de ter conseguido finalizar em pouco tempo e ter resolvido alguns problemas de tamanho que estão desalinhados. Não sei o que mudaria.

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

    Não sabia como utilizar o Figma para pegar as informações do desafio mas fui procurando e consegui achar.

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

    Gostaria de saber no que eu poderia melhorar quanto a medidas como px, vh, e %. As vezes e difícil saber qual usar.

    Componente de QR code criado com HTML e CSS

    1
    Ye-Won Seo•170
    @yaywonahPosted 7 months ago

    Looks good!

    I would recommend this resource for more on px, vh, e, and %. Otherwise, using percentages is probably better for width, height, and padding, but I'm still a novice in this subject too.

    Marked as helpful
    1