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

Chris Bui

@chrisvn180890 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!

Latest solutions

  • Recipe Page

    #accessibility#cube-css

    Chris Bui•90
    Submitted about 1 year ago

    Any feedbacks on the project would be valuable to me and be appreciated. Happy coding!


    1 comment
  • FAQ Accordion

    #accessibility#cube-css

    Chris Bui•90
    Submitted about 1 year ago

    Any feedbacks would be great! Happy coding!


    1 comment
  • Social Links Profile

    #bem

    Chris Bui•90
    Submitted about 1 year ago

    Any feedbacks would be valuable to me. Happy coding :)


    0 comments
  • Blog Preview Card

    #bem#accessibility

    Chris Bui•90
    Submitted about 1 year ago

    Any recommendations about the project would be valuable to me :)


    1 comment
  • QR code component


    Chris Bui•90
    Submitted about 1 year ago

    Feel free to check out my solution and feedbacks are valuable to me.


    1 comment

Latest comments

  • María López•280
    @oppahero
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    For the next practices I will pay more attention to accessibility

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

    It took me a bit to figure out why the span element (category) took up the entire width of the card body, when it's an inline element. But in the end I solved the problem, the display flex of the parent container was affecting it

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

    Any feedback is appreciated

    Blog preview card with HTML and CSS

    #lighthouse
    2
    Chris Bui•90
    @chrisvn1808
    Posted about 1 year ago

    Hi, congratulations on completing the project. You did a great job. I just have a suggestion that in HTML, you are using this:

    <div>
        <span class="category category--yelow">Learning</span>
    </div>
    

    Instead, you can use a single p tag to not only achieve the same result but also add meaning to the information you are marking up.

    <p class="category category--yelow">Learning</p>
    

    Hope it helps :). Happy coding!

  • keremozcann•60
    @keremozcann
    Submitted about 1 year ago

    Responsive landing page with using CSS Flex, Position and Grid

    1
    Chris Bui•90
    @chrisvn1808
    Posted about 1 year ago

    Hi, congratulations on completing the project. I can see in HTML, you are using img element inside a section element. This should be avoid. Instead, you can use div tag instead of section for grouping purposes or img can stay on its own.

  • tanujabeesa•50
    @tanujabeesa
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Im proud of improving skills than the previous one although it is some what difficult i have done it for desktop version and not able to work on mobile version will surely work on next project

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

    The challenges encountered by me is the image and content on same line that hasn't been happened it taken so much time and media queries for mobile version it makes me difficult want to work on it

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

    media queries

    An Sample Preview Card

    1
    Chris Bui•90
    @chrisvn1808
    Posted about 1 year ago

    Hi, keep up the work. You don't have to use media queries to complete this project. For now just focus working on desktop. Try some tutorials on the internet and learn from them. Make sure you understand why it work. After you are confident, come back here and complete the project.

  • agnese•360
    @aggie-l
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud I managed to finish this exercise, and also the extra challenge: changing font size without the use of media query.

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

    I hadn't used the clamp function in CSS before - that was a challenge for me in this exercise. I looked up ways of resizing font without using media queries, so doing research definitely helped me to solve it.

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

    I suppose I need to look more into the correct way / formula to convert pixels into viewport units.

    Blog preview card using CSS flexbox

    1
    Chris Bui•90
    @chrisvn1808
    Posted about 1 year ago

    Hi, great job on completing the project. I will give you some suggestion about making it better.

    I can see that you are using h3 element before h1 element in the HTML. You should avoid this because headings that should be appeared on a webpage in order. h1 -> h2 -> h3 ...

    You can read more from here.

    https://www.w3.org/WAI/tutorials/page-structure/headings/

    Marked as helpful
  • Siddarth•170
    @siddarthm93
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Currently used custom css next time ill be using css lib

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

    Nothing

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

    CSS

    QR Card Component

    1
    Chris Bui•90
    @chrisvn1808
    Posted about 1 year ago

    Hello! Congratulations on completing the project. I have a couple of suggestions for improvement.

    Regarding HTML, it would be beneficial to enhance the img element by providing a more descriptive alt attribute. For instance, something along the lines of "A white QR code against a blue background." This enables browsers to display a description if the image fails to load, and aids screen readers, which are technologies designed to assist individuals with visual impairments in accessing web content. This alt text is also read aloud by screen readers, providing access to the image description for visually impaired users.

    Hope that'd help :)

    Marked as helpful
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