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

Jinet Onyango

@JonyangoEarth 🌍160 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

  • Responsive Product Preview Card Component


    Jinet Onyango•160
    Submitted almost 3 years ago

    1 comment
  • Interactive-rating-component


    Jinet Onyango•160
    Submitted about 3 years ago

    0 comments
  • Responsive QR-Code Component


    Jinet Onyango•160
    Submitted almost 3 years ago

    0 comments
  • Responsive Manage Landing page sing Taiwind CSS

    #tailwind-css

    Jinet Onyango•160
    Submitted about 3 years ago

    0 comments

Latest comments

  • Jack Padalino•10
    @JackPadalino
    Submitted almost 3 years ago

    QR Code Component Challenge - Solution

    4
    Jinet Onyango•160
    @Jonyango
    Posted almost 3 years ago

    Hello Jack. Your solution looks good and is actually responsive on mobile screens. I will try to answer some of the questions you have raised.

    • How to bolden a text.
      • There are a couple of ways to bolden a text. You could use the <b> tag in HTML to make the text contained in the tag bold. Another way in which you can bolden a text is through the use of font-weight in CSS. For example,
    p{
    font-weight:600;
    }
    

    The higher the font weight, the bolder the text would be.

    • How to create mobile views.
    • The web is naturally responsive and has multiple ways to make mobile views. One of the ways you could use is through media queries. Media queries help specify a behaviour you want to happen at a particular screen size. This article here has a detailed guide on how to use them.
    • Another way you can achieve mobile views is by using percentages for widths instead of fixed widths. This ensures that the content never overflows in a box and changes sizes accordingly.

    I hope this help answer some of your questions.

    Marked as helpful
  • Brannon•80
    @ekkas303
    Submitted almost 3 years ago

    Used flexbox to space the contents evenly

    3
    Jinet Onyango•160
    @Jonyango
    Posted almost 3 years ago

    Hello Brannon. I use a chrome extension, mobile simulator, to check for responsiveness on my websites. Mobile Simulator that is the link. I hope this helps you.

    Marked as helpful
  • Gaurav Raj•10
    @Gauravraj360
    Submitted almost 3 years ago

    Simple positioning of layout with absolute and relative concept.

    #cube-css
    1
    Jinet Onyango•160
    @Jonyango
    Posted almost 3 years ago

    Hello Gaurajav. Good Job on getting a working responsive solution using the position property.

    • There are different ways of adding external fonts. You can download a font and make use of the @fontface property, or another way is to use a special style sheet link in your file's <head> tag to introduce the font. This article gives a detailed guide on how to add a Google font.

    • The style guide provided in the files gives you the font type used, the colours, etc. To be able to apply the colour, you need to use the colour property on each selector. An example p{ color: hsl(212, 45%, 89%) } This code snippet will apply the specified color to the paragraph element.

  • AndyGuit•230
    @AndyGuit
    Submitted almost 3 years ago

    Interactive rating component

    1
    Jinet Onyango•160
    @Jonyango
    Posted almost 3 years ago

    This looks good. I especially loved how your Javascript code was concise using the form data. It is well done. I love that the design is also pixel perfect with the provided one. Good job AndyGuit.

  • Samantha Lippiatt•10
    @SamL2021
    Submitted about 3 years ago

    Interactive rating component

    2
    Jinet Onyango•160
    @Jonyango
    Posted about 3 years ago

    Hi Samantha,

    First of all, good job getting most of the aspects of the solution to work. You have done well. As Johnny has already said, using radio buttons would have been a better HTML choice, especially when trying to ensure once a user picks a single value and if they change to a different value, only the value they have currently chosen is highlighted.

    Secondly, using your current approach, instead of listening for individual li elements, you could have listened for the click event on their parent element, enabling you to write the click event only once. This is something called event delegation. You can read about it here.

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch
    Submitted about 3 years ago

    Expenses chart component

    #react#accessibility
    4
    Jinet Onyango•160
    @Jonyango
    Posted about 3 years ago

    Hey Adarsh. First of well done on the Expense chart component. It looks great and neat. I went through your codebase as well, and I love how you structured your work. Good Job.

    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

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub