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

Nguyen Duy

@koalalikecode245 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Reactjs

Latest solutions

  • Ecommerce page with Reactjs, flexbox

    #react#sass/scss

    Nguyen Duy•245
    Submitted over 3 years ago

    0 comments
  • Blorg landing page with html, scss, flexbox and Js


    Nguyen Duy•245
    Submitted over 3 years ago

    1 comment
  • Shortly URL shortening API Challenge (Html, scss, flexbox, vanilla js)


    Nguyen Duy•245
    Submitted over 3 years ago

    3 comments
  • Interactive pricing component (scss, flexbox, html, vanilla Js)


    Nguyen Duy•245
    Submitted almost 4 years ago

    0 comments
  • Easybank landing page with Html, css and vanilla Javascript


    Nguyen Duy•245
    Submitted almost 4 years ago

    1 comment
  • Testimonials grid section (Html, CSS, CSS Grid, CSS flexbox)


    Nguyen Duy•245
    Submitted almost 4 years ago

    1 comment
View more solutions

Latest comments

  • Nguyễn Quang Huy•20
    @a3-1811
    Submitted over 3 years ago

    Html, Css, Sass,GridBox ,FlexBox

    1
    Nguyen Duy•245
    @koalalikecode
    Posted over 3 years ago

    Hey Nguyễn Quang Huy, congrats on finishing your first challenge! It looks so close to the design, but I think there is something you can do to improve your page.

    • Firstly, you should add the hover state to your page, use that a:hover{ color:...;}
    • Secondly, your page should have the main tag(header > main > footer in that order); you had better wrap your section tags in the main tag.

    Aside from that, good job on this challenge!

  • SHAHAB MALIK•345
    @Shahab-Malikk
    Submitted over 3 years ago

    Old Summary Card using HTML,CSS

    3
    Nguyen Duy•245
    @koalalikecode
    Posted over 3 years ago

    Great work on this challenge bro, but I think you can have some regulations for a better job

    1. You should fix your body background with background-size: contain;
    2. If your div tag means main, you should use the main tag instead
    3. Your solution should be responsive for the mobile version.
    4. Your annual plan's height is too big compared to the design.

    Happy coding!

  • Asiimawe•150
    @Pablo-cyber21
    Submitted over 3 years ago

    Semantic HTML5 markup - CSS custom styling. - Flexbox - Mobile-first

    1
    Nguyen Duy•245
    @koalalikecode
    Posted over 3 years ago

    Hey Asiimawe, congrats on your first challenge. I think you have grasped a basic use of HTML and CSS, but you need to practice more on your next challenge.

    • Firstly, your card is too big compared to the design, you can css your card class with max-width: ...;background-color: white; and have your img in it and the container class with max-width: 100%. You can try these codes.
    • Secondly, your background image should have css that background-repeat: none; to remove the default value.
    • Try to use your h tag respectively, such as h1 -> h2 -> h3
    • Finally, try to make your solution close to the design as much as you can.

    Happy coding!

    Marked as helpful
  • Matias•330
    @mmc1999
    Submitted over 3 years ago

    responsive design with css, html y js

    2
    Nguyen Duy•245
    @koalalikecode
    Posted over 3 years ago

    Hey, great work on this challenge!

    • I think you can use the icon on 'fontawesome' for network icons that you mentioned instead of images, then css the color of their hover state
    • Moreover, I don't think you shorten links work well enough because I have to click on the button twice for the result, you can consult my code https://www.frontendmentor.io/solutions/shortly-url-shortening-api-challenge
    • And you should use your h tag respectively, such as h1>h2>...

    Aside from that, great work!

  • opdevs•10
    @opplayz
    Submitted almost 4 years ago

    Order Summary Component With Only HTML and CSS

    3
    Nguyen Duy•245
    @koalalikecode
    Posted over 3 years ago

    Congrats on finishing your challenge. It looks good for a beginner.

    However, you can improve your code by taking some steps:

    • Firstly, Instead of using a center tag <center>, you had better use a main tag like this `<main>your codes</main>
    • Secondly, you should use CSS for regulating the value of images' width and height <img class="musicicon" src="assets/icon-music.svg" alt="Music Icon" width="50%" height="50%">
    • Moreover, use your CSS to make margin, it will make your Html code clearer.<br> </br>
    • Finally, it will look better if you use an external CSS file instead of the internal one

    Aside from that, great work!

  • ara6i•15
    @ara6i
    Submitted almost 4 years ago

    Order-summary flexbox used

    2
    Nguyen Duy•245
    @koalalikecode
    Posted over 3 years ago

    Congrats for your first time, it looks so close to the design!

    You can have some improvements for your code:

    • <h2>Order Summary</h2> You had better use you h tag respectively such as h1>h2>h3 and CSS them.
    • <button class="button pay">Proceed to Payment</button> your Payment should be a descendant of a tag because it can link to another page
    • And add your body with background-position: contain;. It will work well on a larger screen

    Aside from those, great work!

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