Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
8
King
@rymnddev

All comments

  • Kelvin•40
    @dripping-code
    Submitted almost 3 years ago

    QR-CODE Component

    5
    King•310
    @rymnddev
    Posted almost 3 years ago

    There are a couple of ways to center align content. What would probably be best in this situation is to use flexbox {display: flex; justify-content: center; align-items: center}. I really recommend you search and practice how to achieve this, and perhaps even resubmit this challenge.

    @media queries are generally how one would create a responsive page, but that's not really applicable on this challenge.

    Marked as helpful
  • hanifNA•520
    @Afrianns
    Submitted about 3 years ago

    Intro section with dropdown navigation w/ TailwindCSS

    #accessibility#tailwind-css
    4
    King•310
    @rymnddev
    Posted about 3 years ago

    There are ways of doing it, and event delegation would probably be the most efficient method, but since there aren't that many dropdown menus, all you need to do is code it so that no matter what menu item you click, it will:

    1. hide every other menu
    2. reveal the menu that was clicked.

    Hope that made sense! (Just experiment with it!)

  • Yohannes Teshome•50
    @johannesteshome
    Submitted about 3 years ago

    Advice Generator App Using Tailwind CSS

    #tailwind-css
    1
    King•310
    @rymnddev
    Posted about 3 years ago

    I did this same challenge with TailwindCSS, you can see my source code here: https://github.com/king-oldmate/FEM-advice-generator-app/blob/master/src/App.js

    Anyway, I used the following class with arbitrary values for the shadow/glow effect: hover:shadow-[0_0_22px_8px_rgba(82,255,168,0.5)]

    here's the documentation for it: https://tailwindcss.com/docs/box-shadow

    Marked as helpful
  • Woodrow Martyr•120
    @wmartyr
    Submitted about 3 years ago

    Interactive Rating Component

    1
    King•310
    @rymnddev
    Posted about 3 years ago

    Well done. Looking at your code, we pretty much did the same thing. To load to a separate HTML file wouldn't even work, since the JavaScript would reload and you would lose your variable. No, part of the point of these easier exercises is to develop components, and those should be as contained (encapsulated) as possible.

    Marked as helpful
  • Simbarashe Mawere•10
    @darthskyy
    Submitted about 3 years ago

    QR Code Card using Bootstrap

    #bootstrap
    1
    King•310
    @rymnddev
    Posted about 3 years ago

    Good work.

    I personally use Tailwind CSS for styling, but you could even use just plain old CSS if you wanted to try making the card yourself. Just break done the card into all it's different parts.

    I prefer using Flexbox for alignment if I have multiple elements or need to center vertically, but if it's just one I will very often use margin: 0 auto;

  • Haider Fadel•360
    @z3sb
    Submitted about 3 years ago

    Time tracking

    1
    King•310
    @rymnddev
    Posted about 3 years ago

    Well done, the layouts look great for both desktop and mobile.

    I'm not sure if you noticed that you have some bugs in your JavaScript. Firstly, the active colour doesn't change when you choose a different time-frame (i.e. weekly always stays highlighted no matter what is active), and secondly, if you click anywhere in the options div it shows no data anywhere in your dashboard. You ought to have event listeners for each time-frame.

    Keep it up!

    Marked as helpful
  • King•310
    @rymnddev
    Submitted about 3 years ago

    Job listings with filtering solution made with React

    #react#tailwind-css
    1
    King•310
    @rymnddev
    Posted about 3 years ago

    I think I do struggle with changing my mobile layouts to desktop ones. Any feedback on that point (especially in regards to using Tailwind) would be greatly appreciated.

  • JERRY COMFORTER ASARE•150
    @jcasare
    Submitted about 3 years ago

    Responsive 3-column preview card component with HTML5, CSS3, Flexbox..

    #accessibility
    2
    King•310
    @rymnddev
    Posted about 3 years ago

    What really helped me is actually designing layouts for mobile first, and then adjusting as necessary for wider screens. Maybe start your next project with that in mind and see if you notice a difference.

    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