Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions8Comments17

All comments

  • Mico Gee M. Cuarto• 140

    @trander123

    Submitted

    I dont know how to make those filter buttons ["all", "active", "completed"] append or inline with clear items on the breakpoint.

    ReactJS/Tailwindcss

    #react#tailwind-css

    1

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello pal👋👋👋👋

    It's easy actually, Assuming you have stored your app's data in an Array of objects like this one {content: "Lorim", checked: true"}.

    You have to create two states,

    1. One for storing all the data.
    2. The other for storing the data that you want to view to the user.

    Whenever you want to view all the data the data in the two states should be the same, If you want to only view the completed TODOS then filter the data in the first state and set the second state to the filtered data, and you can do the opposite with the filter method and view only the active TODOs. here is my solution for this challenge.

    Hope I delivered the idea

    Good luck with the project and Happy Coding

    0
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hey man👋👋👋

    🎉🎉🎉Congrats on completing the landing page challenge🎉🎉🎉

    I just wanted to tell you that the waves image should be on top the first section.

    Overall your solution looks impressive, Keep going and Happy Coding😉😉

    0
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello, Kairat👋👋👋

    🎉🎉🎉Congrats on completing the countries API challenge🎉🎉🎉

    If I had to give any valuable feedback, Then it would be:

    1. To remove any margin from the container element, Your website is acting weird on the mobile mode in small sizes.
    2. And make your flags bigger with lesser space between them.
    3. Also the Where in the world text and Search field and Filter country should be aligned with the Other elements.

    Overall your website looks amazing, Keep going and Happy Coding

    Marked as helpful

    0
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello, Niroyan

    🎉🎉Congrats on completing the Intro section challenge🎉🎉 I checked your website and it looks amazing, I specially loved how smooth the transitions were in the nav items and the Learn More Button, If you want to make your solution exactly like the design you can remove the box-shadow from the navigation bar and add some margin-bottom to the text beside the image.

    Thanks for your time and Happy Coding😉

    0
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hey jorge 👋

    CONGRATS ON COMPLETING THE CHALLENGE

    YOU DID AN AMAZING JOB 🥳

    I got some small tips for you:

    • You should reduce the width of the month & year & cvc fields to be nore like the design.
    • Also make sure the user can't write more than he is allowed in the number fields.
    • Add cursor: pointer; to the buttons.

    This is my Solution, it should give you a vague hint of what you should be doing.

    IF YOU HAVE ANY QUESTIONS, I'M HERE

    HAPPY CODING

    Marked as helpful

    0
  • Abdallah Muhammed• 60

    @abdallahifox

    Submitted

    feedback makes me more productive even if it was bad or embarrassing, please make sure to let me a feedback

    thank you

    this application was made with react js, it can be done with normal js. i made the app with react to learn more about file structure and how to organize my components and made them more flexible, i have learned also how to integrate my app with APIs using ContextAPI for state management, also using Tailwind CSS was more comfortable for me.

    Shortly cut application

    #react#react-router#tailwind-css#axios

    1

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hey Abdallah

    ON small screens, your website looks a bit off, the padding on the navigation bar is too much and there should be some padding on the image.

    You might want to fix those issues.

    However overall you did an amazing job, Keep it up

    0
  • Oshane• 130

    @Noid3ah

    Submitted

    Had some issues with the image shrinking when the page was resized. Even with both containers(image and text) set to 50% width and 100% height. i ended up setting a min-height on the image to keep it from shrinking. Is there anything else i could have done differently? I'd love to know.

    Responsive Stats-preview-card-component

    #bem#sass/scss

    2

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello Oshane 👋

    If you want to keep the image from scaling down horizontally, you could use the css property object-fit like this :

    • object-fit: contain ; in this state the top and bttom of the image will remain in place.

    • object-fit: cover ; in this state the right and left of the image will remain in place.

    Try it out, If you have any questions, Feel free to ask

    Marked as helpful

    1
  • Elaine• 11,420

    @elaineleung

    Submitted

    I've been wanting to build a slider because one of the recent tutorials from Kevin Powell features an FEM page with a slider. The most challenging part wasn't building the actual slider but positioning all the SVGs and to make sure they can be viewed optimally while still maintaining a good distance/relation with the surrounding elements. It's also interesting that one of the requirements is to use arrow keys for the slider because I've read that for a screen reader user, it's best to have users use the tab key for navigation and not so much the arrow keys. I did come across some insightful articles on the challenges of building an accessible slider/carousel, and I do hope to work on this some more later. I also hope to put in some opacity transition later on, but I think on the whole, everything works for now, and I think this was a good attempt in building a slider that can be accessible.

    Do let me know if something isn't working as it should. Happy testing!

    Responsive image slider/carousel built with SCSS and plain JS

    #accessibility#sass/scss

    4

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    AMAZING

    I like the details, good work.

    1
  • David• 8,000

    @DavidMorgade

    Submitted

    Hello everyone, this challenge is by far the most fun I have done from frontendmentor, it was a bit tricky at the start, and got stuck a lot with the layout but I managed to finish it.

    This is also my second project using React, in this project I'm using useEffect, useContext, useState, if anyone can check if im using this hooks correctly it would be awesome cause I'm trying to improve my react and this hooks are core.

    I did use Context API to store the values of the state and use them in other components, dunno if this is the best approach or ¿Should I use prop chain instead?

    For the logic of the game I used a ternary operator with 9 conditions, if anyone knows other way to archive this goal with a better solution, go ahead and teach me!

    Thanks everyone and happy front-enting!

    [Rock, Paper, Scissors] - React

    #accessibility#react

    1

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello David

    Congrats on completing the rock paper scissors challenge,

    I got a small tip for you:

    if you want to add the shades to the design, here's how

    • nest the rock_paper_scissors images inside a container
    • add below styling to the container:
    box-shadow: inset 0 0.3rem 0 2px rgb(64 64 64 / 25%)
                    , 0 0.5rem 0 0px rgb(162 21 47);

border: 1.6rem solid #dc3550; ```
    0
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Salaam alaikum

    Hello Abdulkareem

    You are right, I struggled quite a bit myself at that part.

    If you want an easier way to achieve a responsive result, You should use a transform: translate() ; css property to style the phones image, It Works like magic:

    
    .home-section-images{
        flex-basis: 50%;
        width: 100%;
        position: relative;
    }



        .home-section-images   .phones-img{
            width: 100%;
            position: relative;
            left: 100%;
            transform: translate(-83%,-15%);
            z-index: -1;
        }




       .home-section-images   .phones-bg{
            width: 400%;
            position: absolute;
            left: 100%;
            transform: translate(-25%,-25%);
            z-index: -10;
        }

    Assuming that you used a flex display to align the home section texts and images

    Hope i was of help to you, Tell me if you have any questions.

    Happy Coding, And Best Regards

    Ahmad

    0
  • Queen-codes• 280

    @Queen-codes

    Submitted

    Hi everyone, I need help to figure out why the map isn't auto-zooming on the change of IP address. One has to manually zoom out for that. any suggestions on how to fix this?

    IP address Tracker using React

    #fetch#react#vite

    1

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Greetings my Queen 👋😁

    If you want to edit the zooming when an IP address is inputted, You can do that by changing the second parameter of the setView method:

    var map = L.map('map');

map.setView([Longitude, Latitude]  , *Zooming Intensity * );

    You can also set some animations to the zooming, for more in-depth info you should go check out their documentation page.

    Hope i was of help to you, Your Highness

    Happy Coding

    0
  • Lucas 👾• 104,580

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.

    Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) 😂

    I added some features:

    • 🎨 Dark and Light mode button
    • 👾 Custom QR Code image
    • 🧚‍♂️ A little bit of color customization
    • 👨‍💻 Custom image hover state

    I'll be happy to hear any feedback and advice!

    QR Code component (Vanilla CS + JS + Dark-Light Mode) 🌞🌚

    18

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hi @Lucas👋

    I'm Ahmad, A Front-end developer and One of your fans😄

    I had a question for you, If you don't mind of course.

    Do you get any job offers from frontendmentor?

    I'm currently job-hunting, and I was wondering if frontendmentor is worth investing my time in?

    Best Regards

    Ahmad.

    Marked as helpful

    4
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello Renner 👋,

    Congrats on completing the easy bank landing page challenge 🥳

    I too solved this challenge, it was a good experience.

    Your site is both responsive & beautifully styled, and I got some tips for you to make it even better:

    1. On medium-sized devices the phone's image is going out of the boundary, use a media query to fix that.

    2. On pc at maximum screen size, Your website isn't taking the full width of the screen, consider removing max-width from the (body & HTML) elements and setting their width to 100% in the styling.

    3. Consider using GitHub pages to publish your websites, It's easier to use and safer random website publishers.

    I hope i was of help to you, Happy Coding

    0
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello vihaan,

    Congrats on your solution for the order summary challenge 🥳

    Your solution is well-designed and responsive, I couldn't have made it better.

    Hope you don't mind, I got a small tip for you:

    You should always include a <html lan='en'> tag in your HTML, It may not make a change in modern browsers but some old browser versions might face some issues processing your code without it.

    As web developers, we have to make our websites as accessible as possible

    0
  • Leonardo Bomfim• 90

    @leubomfim

    Submitted

    👋 Hello everyone 👋

    This is the solution for the API countries REST challenge, it was very cool to solve this challenge, It was my first time doing a theme switch and I found it very fun, the API had a little difficulty in some parts.

    I'll be happy to hear any feedback, or what could be improved in the code.

    Thank you 👋❤️

    Solution: REST countries API with color theme switcher.

    #accessibility

    2

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello Leonardo,

    Congratulations on completing the countries API challenge 🥳

    Your solution is responsive and beautifully designed, I got a tip for you to make it even better.

    use the select and option elements in your region list for a more semantic code like this:

    <select>
<option value='country value' > Country name </option>
<option value='country value' > Country name </option>
<option value='country value' > Country name </option>
</select>

    Hope i was of help, Happy Coding

    1
  • Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello sbinnala 👋

    I see that you have also completed the rock paper scissors challenge. I noticed that you didn't add the shades to the buttons design, I was also stuck at that part for a long time. 😅😅

    If you want to add it to the design, here's how you do it:

    • nest the rock_paper_scissors images inside a container
    • add below styling to the container:
        box-shadow: inset 0 0.3rem 0 2px rgb(64 64 64 / 25%)
                    , 0 0.5rem 0 0px rgb(162 21 47);
    border: 1.6rem solid #dc3550;

    Marked as helpful

    1
  • Jennifer• 50

    @asdfjennifer

    Submitted

    Hello, I hope you like it! Any advice will be appreciated :)

    I'm not satisfied with the Payment button. Anyone know how to fix this? The text won't be inline and it still won't work after adding max-height to the button.

    Also 'Change' is not inbetween 'Annual plan' and '$59.99/year'

    Order summary component

    #sass/scss

    3

    Ahmad_Mana• 320

    @UserAhmad2001

    Posted

    Hello jennifer I took a quick look at your solution I saw that you have only used some basic types of display like inline or block You shoud use "flex" and "grid" display more often, i use them all the time. doing that makes the design easier and more responsive (looks good on different screen sizes).

    plus there are some html mistakes you should solve ex: 1.at the process payment button, you nested a button inside an anchor link doing that complicates the design process, you should either put a link or a button . 2.at the change text you nested a span inside the anchor link that's unneeded. 3. you put some un-semantic tags header for img, and section as a container.

    best regards ahmad

    0