Skip to content
OverviewSolutions
6
Comments
24
mohammed-sarhad-ahmed
@mohammed-sarhad-ahmed

All comments

  • Muhammad Faizan Soomro•60
    @Muhammad-Faizan-SoomroSubmitted about 1 year ago

    Hey Everyone! This is my solution for Result Summary Component challenge by Frontendmentor.io.

    I am little bit unsure of my styling skills and I ended up creating lots of classes. I know this issue can be resolved by using Tailwind CSS and I am learning it but for now I want some valuable advice on how can I improve my code and create less classes.

    Please review it and give some valuable advice/feedback as feedbacks are highly appreciated and I am open to suggestions on the best way I can solve this challenge. Looking forward to hear the views of other coders.

    Responsive result summary component using CSS Grid and CSS Flexbox

    2
    mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    .reaction { margin-left: 30px; } .memory { margin-left: 30px; }

    .verbal {
    margin-left: 30px;
}

.visual {
    margin-left: 30px;
}

button {
    margin-left: 30px;
    padding: 8px;
}

    Just create one class instead . .Margin-30{ margin-left:30} and add them to the HTML

    1
  • Muhammadjavohir•280
    @MuhammadjewelSubmitted about 1 year ago

    My 6th challenge is completed 🎉

    This visibly simple component was interesting to code. I've added some optional features, like dark theme toggler. Also, the page will save the theme value using localStorage and show the page with preferred theme even after page reload.

    The page also will adapt to device's preferred-color-scheme. That was done using simple media query. I would recommend adding this in your future projects. Your websites users will probably happy for this feature.

    UPDATE: Due to some reasons, if your phone is in dark mode, the theme toggler was not working. I removed this features until I find the workaround. Your help in this issue is highly welcome.

    UPDATE 2: I fixed the issue. Now the page can adapt to user's default theme on page load. But, I could also improve the solution so the page would adapt to device's theme change instantly. Right now the user should refresh the page for changes to occur.

    This video was very helpful for theme switching. The code is clean, too. https://youtu.be/Xk12JtYG8rw?si=cJT0kI_gwDJJ1B-7

    Any constructive feedback is welcome.

    In case you want to watch my live coding of the component, the video is here

    Take care and good luck in your other FrontendMentor challenges 👍

    QR code component with theme toggler (dark/light), flexbox and BEM

    3
    mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    This link might be helpful for fixing the issue https://youtu.be/6fTGj1TY6rE?si=LrhZMj2LoSCM7hi, a while back I coded a dark mode toggle, first I took whether or not the user toggled the mode switch before( of course loading it from the local storage) if not I used the info in that link to know the user preferred mode and use that.this made the toggle really dynamic.

    Marked as helpful
    1
  • mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Fix the GitHub deployment.

    0
  • mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Fix the image path.

    0
  • mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Fix the image path.

    Marked as helpful
    0
  • daneshaux•10
    @daneshauxSubmitted about 1 year ago

    I found the CSS property "gap" difficult when I was writing the code because it kept creating a really big gap at the top of the QR code. I had to adjust the padding to keep the aesthetic, but I'm unsure if I used the best practices for that. Any and all feedback is welcome!

    My First Challenge using HTML & CSS :)

    1
    mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Did you use margin with the gap? If so that is the reason.

    0
  • BryanCarlos•80
    @BryanCarlosSubmitted about 1 year ago

    The only thing I messed up it's when the nft image get the :hover status. If you hover over the view icon it keeps "shaking".

    If you know how to solve this, I would be so grateful to get your soluction.

    NFT Preview card

    2
    mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Check my solution to solve your problem.

    0
  • Kingsleigh•260
    @Kingsleigh-ObiSubmitted about 1 year ago
    1. I do not understand what colour grading means how it is applied
    2. i also had to read about the <svg> tag

    result summary webpage

    1
    mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Gradient basically means the background color starts with a color and slowly becomes another color. for example, it can start from red and then becomes oranges. (this is simplifying it)the most common type of gradient is linear gradient.

    0
  • mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Where are the active states? If you are struggling to implement check out my solution.

    0
  • mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Change the background to the one in the style-guide And try to play around with the height. Besides that is almost perfect.

    0
  • mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Put both parts in a div and play around with border-radius and try to put both in the center of the page. For the use '''Display: flex”

    You can also check out my solution for more help.

    Marked as helpful
    1
  • mohammed-sarhad-ahmed•250
    @mohammed-sarhad-ahmedPosted about 1 year ago

    Well done!

    0