Skip to content
OverviewSolutions
5
Comments
5

Khanh Tran

@big-hero-devHo Chi Minh City, Viet Nam70 points

Web Developer

Latest solutions

Latest comments

  • Iryna Kokolius•120
    @ikokoliusSubmitted 28 days ago
    What are you most proud of, and what would you do differently next time?

    I learned to use picture element to serve different images sizes on different devices and learned Sass basics.

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

    The challenge was to figure out the good breakpoints

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

    I appreciate any feedback and improvement tips, especially on responsiveness and breakpoints, also on semantic html. Thank you.

    Responsive Product Preview Card Component

    #sass/scss
    1
    Khanh Tran•70
    @big-hero-devPosted 20 days ago

    I suggest using

    article {
   overflow: hidden;
   ...
}

    for styling so that the img element no longer needs border-radius.

    Marked as helpful
    0
  • Khanh Tran•70
    @big-hero-devPosted 21 days ago
    • Yes, the solution include semantic HTML.
    • Yes, it accessible.
    • Yes, the layout look good on a range of screen sizes.
    • A litle note, you can use @mixins and @function in sass for more reusable. Have a nice day! 😊
    0
  • Khanh Tran•70
    @big-hero-devPosted 23 days ago

    Congratulation for doing this challenge. Some notes for your code:

    CSS Best Practices Reset & Base Styles

    • Start with a proper CSS reset (Andy Bell or Josh Comeau recommended) This ensures consistent styling across browsers.

    • Keep image styling minimal and responsive:

    img {
   display: block;
   width: 100%;
   max-width: 5.5rem;
   border-radius: 50%;
}

    This ensures:

    • Images scale properly
    • No unwanted whitespace below images
    • Content adapts to different screen sizes

    Embed missing font, you can paste this code below to inside the <head> tag:

        <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap"
      rel="stylesheet"/>
    0
  • Necati•50
    @NcticnSubmitted 4 months ago
    What specific areas of your project would you like help with?

    I am using Vue library in this solution. I worked with Single File Component Architecture by compiling from Scss to Css.I am open for support for Vue.js.

    Social Links Profile | Vue.js, Component Architecture and Scss to Css

    #sass/scss#styled-components#vue#web-components#pure-css
    1
    Khanh Tran•70
    @big-hero-devPosted 23 days ago
    • Yes, it includes semantic tags.
    • The website is fine.
    • Yes, it works well both on desktop and mobile.
    • Yes, the code is well-structured.
    • No, the solution is not different considerably from the design. This website looks like the ui design.
    0
  • Khanh Tran•70
    @big-hero-devPosted 23 days ago

    Congratulation for doing this challenge. A note for your code:

    • Keep image styling responsive:
    img {
  max-width: 100%;
  display: block;
}

    This ensures:

    • Images scale properly
    • No unwanted whitespace below images
    • Content adapts to different screen sizes
    0