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

OswyChow

@OswyChowItaly20 points

Meow

Latest solutions

  • Blog preview card using plain html-css


    OswyChow•20
    Submitted about 2 months ago

    Not sure, please take a look and let me know how i can do better, I'm 100% open to constructive feedback.


    1 comment
  • QR code component using plain html-css


    OswyChow•20
    Submitted about 2 months ago

    The areas where i think i fall short are:

    • Usage of semantic elements -- I'm not sure i always use the correct semantic elements.
    • CSS units -- i struggle on choosing the right units to be able to achieve a smoother transition to a responsive layout later.

    1 comment

Latest comments

  • Sujwal Dhungana•40
    @sujwal19
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my knowledge of flexbox. Next time I would use grid to complete this project.

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

    I had difficulty with box shadow and font sizing.

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

    Box Shadow. Font Sizing. Layout width/height.

    Blog Preview Card using Flexbox

    1
    OswyChow•20
    @OswyChow
    Posted about 2 months ago

    Great work! Only some minor differences between your solution and the original and i see you are fully aware of what these are. I would suggest opening the Figma file provided to analyze all the little details such as the font size.

  • Nhan Phan•50
    @niophan
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I think the most importance thing for me in this project is to center the whole object without using flex or grid.

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

    I found it a bit difficult to try to reach the same text thickness compared to the picture. Based on the reference, there is font-weight: 700, and when i implemented it, i didnt see much change.

    Absolute center

    1
    OswyChow•20
    @OswyChow
    Posted about 2 months ago

    Hello!
    I checked your code specifically the issue about font-weight, if you go to the stylesheet you're importing:
    https://fonts.googleapis.com/css2?family=Outfit&display=swap
    there is no weight 700, so what's happening is that you're specifying that weight in your CSS but it can't find it and reverts back to 400.
    To fix this simply change that import line to:

    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">

    Or if you want to import just 400 and 700 you can do it like this:

    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    Hope this helps.

  • Sabbir Ahmed Samir•80
    @sasamir10
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    learn little bit CSS. Basically how applied. Next time try to work without any help

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

    design layout with css

    QR code using HTML & CSS

    2
    OswyChow•20
    @OswyChow
    Posted about 2 months ago

    Hello there! Nice work, just a couple of issues:

    • The heading has a couple of typos:
      • front > frontend
      • project > projects
    • The paragraph is overflowing the content div, to avoid that you could set the height of the div to 'auto'
    • Missing box-shadow -- its subtle, so you probably missed it in the design file
    • Text color -- refer to the style guide file, specifically the slate 500 and slate 800 which are the colors for the paragraph and heading elements respectively
    • Missing font -- again refer to the style guide file

    I would ultimately suggest taking a look at the Figma file that frontend mentor provides you for this project.
    You can inspect every element of the design so that you don't miss any details.

  • Ayush Pokhariya•60
    @Ayush-Pokhariya-07
    Submitted about 2 months ago

    QR code component using CSS

    1
    OswyChow•20
    @OswyChow
    Posted about 2 months ago

    I would suggest adding more bottom padding to the div element as to better reflect the original design.

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