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

ShrixJs

@ShrixJs30 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

  • Social Links challenge


    ShrixJs•30
    Submitted 8 months ago

    2 comments
  • basic html css blog preview card


    ShrixJs•30
    Submitted 8 months ago

    1 comment
  • basic html and css QR-component


    ShrixJs•30
    Submitted 8 months ago

    1 comment

Latest comments

  • Desenvolvedor-DavidDanielAlves•80
    @Desenvolvedor-DavidDanielAlves
    Submitted 8 months ago

    Página responsiva utilizando html e css

    1
    ShrixJs•30
    @ShrixJs
    Posted 8 months ago

    good use of semantic html, its better for class names to be in english, not responsive from around 1200px to 500px.

  • Horizon-87•60
    @Horizon-87
    Submitted 8 months ago

    blog-card

    1
    ShrixJs•30
    @ShrixJs
    Posted 8 months ago
    • There are big differences between the solution and the design:

      • the width of the card is much smaller
      • spacing is not consistent with the design
      • fonts are not the same

      You can view the spacing in figma by selecting an element with ctrl click and then hold alt (if you are interested about more figma details frontend mentor has this article

    • card is not responsive on some resolutions

      • this is mainly because you dont have a set width, and you are using dynamic css units for spacing, where the spacing is expected to be consistent.
    • html can be cleaned up a bit:

      • indentation needs to be fixed, unnecessary inline styles, good job about adding semantic tags there are some that could be improved for example learning h3 and date h2 could be a p as they are not really titles
  • Ilyosbek•10
    @IlyosbekKarimov
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am mostly proud of the style and I would like to change it for modern test cases

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

    I have encountered style problems and I have fixed them. Just can't centered the class but I have found solution so that is good now

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

    I would like help with styles mostly because I don't understand much about it for now and I should learn front-end more faster. I have encountered style problems in vue.js too

    QR code component

    2
    ShrixJs•30
    @ShrixJs
    Posted 8 months ago

    The solution has some differences from the provided design, for example the qr card paddings are not matching the ones in the design,font sizes seem to be bigger and have color mismatches with the ones in the design,the QR image is smaller.

    Steps you can take to improve this:

    1. You can check the exact spacings in figma by clicking a part of the design with ctrl and after selecting you can hold alt and hover toward another element to see the value of the space between the two elements. Then you can apply the appropriate spaces using padding for example.

    2. Regarding the fonts you can search for your font that is specified in the design system tab (in this case the Outfit font) in the googlefonts website https://fonts.google.com/, once you have your font you can add it with a link tag that is provided with the font or download the fonts and add them to your project where you can declare and import them using the @font-face css rule (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)

    3. You can also do some minor improvements such as using consistent background-color values rather than mixing HSL and HEX code values and for better maintainability you can also move the styles to a separate sheet and add them to the html via a <link> tag.

    Besides this the html structure looks good with semantic tags and is responsive. Good job keep it up and happy coding!

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