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
OverviewSolutions14Comments348

All comments

  • Abhik• 4,840

    @abhik-b

    Posted

    Hello Ose , Your solution looks great on large screen & nice use of tailwind , well done 💯

    Just some opinions :

    • Give your .invisible-container this position:absolute so that main does not shift when you click on a dropdown link
    • Check this video for responsive navbar in mobile
    • To add animation to features & company , since you are already using .hidden class , give some transform:translateY(20px);opacity:0; to hidden class. What will happen is as soon as hidden class is removed from 1 of the ul , the transform & opacity will become default. Also add some transition to the ul

    Hope this help 🤞& Please keep Coding such nice solutions 🥳

    Marked as helpful

    0
  • mohamed yasser amer• 610

    @mohamedyasser27

    Submitted

    this one was hard because i couldn't do the progress the bar but using css custom variables along the input event allowed me to create a script that tracks the progress

    but a problem i had was the resizing which made the range break so i had to using resize observer to keep it consistent but i don't think it's the right approach but i couldn't come up with a formula in css that doesn't make the progress bar exceed the button on resize

    Interactive-pricing-component

    1

    Abhik• 4,840

    @abhik-b

    Posted

    Hello Mohamed , Your solution looks great & it is very responsive . Great Job done 💯

    Just a opinion : Yes you are right , you do not need resize observer. Instead you can use responsive css media queries. What I did was :

    • create a div .slider-container & made it position:relative.
    • Then created a label with width :90%; so the label always has 90% width of the parent
    • Then created a input & hid it's appearance (you have also done the same. However I did not give any position to input , instead I gave it a bg color just like the original design
    • Then I created a .slider-handle span & .slider-fill span. As the name says 1 is for showing the custom fill & other for custom handle.
    • Then for large screens I used the css media queries to increase the handle size.

    Here is my code

    Hope this helps 🤞 & Please keep coding this nice solutions 🥳

    Marked as helpful

    0
  • Kostya Farber 🧟‍♂️• 220

    @kostyafarber

    Submitted

    This one was a fun one! I decided to dip my feet into the world of React.

    It was definitely overkill for this project but the point of it was to start getting comfortable with React and it's workflow and syntax.

    I tried to have more structure to my SCSS. I added a CSS reset to revert some settings to make development easier.

    I also spiced things up and made a product card... of myself as a graded collectible. Not a bad price either 😏.

    Please feel free to give feedback on my React code, project structure etc.

    Keep on coding!

    Product Preview using React/SCSS. Custom Product! Trying to use BEM!

    #react#sass/scss#bem

    2

    Abhik• 4,840

    @abhik-b

    Posted

    Hey Kostya 👋

    Your solution looks fantastic . I liked the concept of you as a product card 😁 Your react component preview is great & the structure you used to name the classes seems good.

    Just a opinion : adding some padding to .root div will give some spacing to the card in mobile screens.

    Fantastic job , keep up contributing such amazing solutions 🥳

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    Hello Erik 👋

    Your solution looks excellent 🥳 The animations are great , shadows to the images are great & your site is responsive as well. Great job done

    Just a observation : When I click on left button slider animations are great but when I click on right button slider animations are not as great as left one.

    Other than that Great job , please keep contributing such amazing solutions. 😃

    Marked as helpful

    0
  • Abhik• 4,840

    @abhik-b

    Posted

    Hey Harshit 👋

    Your solution looks nice & your tailwind usage seems great ! Though it would have been nice if it was responsive for mobile screens but anyway nice try.

    Just some opinions :

    • remove " from body"
    • for the entire chat messages div , you don't have any classes. If you use flex flex-col gap-3 then for each chatleft class you don't need to give bottom margin & overall the code would be organized.

    Keep doing these projects & Your skills will much better !! Happy Coding 😃

    0
  • Abhik• 4,840

    @abhik-b

    Posted

    Hello Alabi 👋

    Your Solution looks very nice !!! It is very responsive & it's interactivity seems amazing to me. Great Job 👍

    Just some opinions :

    • If the .box has a fixed max-width then on large screens it will look more nice. Example : max-width:550px
    • if the .billing has justify-content : space-evenly instead of justify-content : space-between then the transition from large screen to mobile screen looks slightly better

    Your solution is very close to original design , Nicely Done !! Please Keep Coding such amazing solutions

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    Hello Sebastian , Your solutions is fantastic & it is very responsive also. Well Done 🥳🥳

    Just a opinion is if you give bottom: 0px; right: 0px; to tooltip class for small screens then it will stay responsive . Other than that great job and please keep contributing such amazing solutions 🤩👍

    0
  • Nicolás Nahuel González• 250

    @nicolasgonzalez98

    Submitted

    I need help with the image of the girl and the double bg image. Thank you so much and sorry for my english.

    Order summary

    2

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Nicolas , Your solution looks nice 😃

    • I think if you use img tags in html instead of background-image in CSS for the girl image then it will look even nicer & solve the problem.
    • for double bg image ( I assume the background image you are referring to) you can use background-size:contain inside main to make it look nicer
    • I really think you should use media-query for responsiveness & stay away for viewport units vw for width & height of simple elements like card

    Other than that overall it looks nice so Please keep solving challenges & happy coding 🥳👍

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Anton , I see you you spent your time creating a perfect solution , Very well done 🥳👌 Your solution is very responsive , works & looks very well. Please keep coding such fantastic solutions 🤩👍

    0
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Chiamaka, Your solution is great & responsive enough . Good job 👍 I am just sharing some of my opinions that might make it look nicer.

    • use object-fit: cover; to img to make the image look responsive & nice
    • in card-container instead of width:30% use max-width:400px (use value of your own choice) can make the card look nice & responsive for large screens.

    Other than that your solution is nice , Well Done & please keep coding amazing solutions like this 😃👍

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Aleksandr , Your solution is fantastic & the animations are 🔥🙌 . I also liked the hover effect on dice button. Great job , Well Done & Please keep coding such amazing solutions 🤩👍

    Marked as helpful

    2
  • Yash Goswami• 70

    @Yash-devasp

    Submitted

    I have complete my first challenge on frontendmentor.io and with this I am starting a new journey on this path. I had a lot of fun completing the first assignment.

    As I am a beginner and have just started learning about web a couple of days back so I am sure my code can be improved. Please help me in my journey by pointing out ways in which my code can be improved or if there could be a better way to tackle a problem.

    QR code component solution using CSS

    2

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Yash ,Congratulations on completing your 1st challenge. Your solution is fantastic & it is very responsive 🤩👌

    Some of my opinions I am sharing with you :

    • give margin: 0; to *{ } to remove unwanted margin from all elements
    • remove the height from card & give gap:1em to make the card look more like the design
    • your box-shadow is very nice

    Very Well Done 🤩 & Please keep coding such amazing solutions 🥳👍

    0
  • Jordan• 180

    @GitNutts

    Submitted

    I wouldn't have even known where to start on a simple project like this a year ago but I can complete it now like it's second nature to me. It's a great feeling!

    QR Code Component

    2

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Jordan , So nice to know that you are feeling great completing this challenge. It looks absolutely perfect to me & it is highly responsive as well. Great job well done 🥳

    Please keep contributing such amazing solutions 🤩👍

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Jay , Your solution seems perfect to me & it works perfectly . Only opinion I am sharing with you is for small screens ( (min-width: 426px) and (max-width: 1024px) ) if you set a max-width to the calculator container then it can look nicer. Other than that great job , well done🥳🥳🥳 Please keep coding such amazing solutions 🤩👍

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Kamasah , Your solution is wonderful & responsive . Even I am working on this challenge & now I can look to your solution as a reference well 🤩

    Only opinion I am sharing with you is that for the .circle input checkbox you can make it a circle by giving the below styles to make it look even nicer.

    width: 16px;
 appearance: none; //this is very important otherwise checkbox won't use any other css styles
 height: 16px;
 padding: 4px;
 border: 2px solid hsl(289, 100%, 72%);
border-radius: 9999px;

    Then finally give some gap to .price-1 & .price2 to give some spacing & it will look appropriate. Overall Great job well done🥳👍 & please keep coding such nice solutions 👍

    Marked as helpful

    1
  • P
    Remus D. Buhaianu• 3,145

    @Miculino

    Submitted

    Hey guys!

    Hope you're having a great time working on Frontend Mentor challenges :)

    I'm finally back with another lovely challenge that I had a blast working on, though it took me quite a while to finish it for reasons that you'll discover once you see the website and its Github repo :D

    Frankly, I still wanted to try out a few more ideas, but at the same time, I had pretty much implemented all the features/customizations I wanted for this project.

    Feel free to check it out and let me know what you think works / doesn't work for this project and where I could make further improvements/tweaks! :)

    P.S: Thank you, to each one of you who checked out my previous challenge (QR Code Generator) and supported me. I appreciate it a lot and I hope these kinds of projects will also inspire you to try out your own unique and creative ideas! :D

    See you in the next challenge - happy coding, y'all! :)

    Officelite Coming Soon - Svelte + Routing | TS | SCSS | GSAP

    #gsap#sass/scss#svelte#typescript#accessibility

    2

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Buhaianu , Your solution is Excellent , the animations are just top-notch 🙌 & it is very responsive. Well Done & please keep contributing fantastic solutions like this to inspire us 🥳👍

    Marked as helpful

    2
  • Amir• 90

    @L0rdix

    Submitted

    I think i did a pretty good job for my first project, but im not sure how you guys see it. Would love to hear your feedback and get to know what to improve on. So yeah, what can i do better next time?

    Tip-Calculator using HTML, CSS(Flexbox) and JS

    1

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Amir , Congratulations on completing your 1st project. The solution is amazing & it works correctly Well Done 🤩🤩🤩 Only opinion I will share is remove margin for left & right from .sec_container & please add another media query for min width 500px then give margin for left & right this can make it more responsive. Other than that you did a Great Job, Please keep contributing wonderful solutions like this 🥳👍

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hey Joshua , Your solutions seems perfect to me, Fantastic Job Well Done & please keep contributing such amazing solutions 👍

    Marked as helpful

    0
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Dante , Your solution is amazing , current animations are nice 🙌 , it is responsive as well. Very well done 🥳 & I would love to see slot machine effect for the computer choice so please keep creating such amazing solutions 🤩👍

    0
  • Rishabh Das• 60

    @Rishabh-Codes27

    Submitted

    Do check out my solution and let me know if anything is wrong. Tried my best in doing it as close as given in the design. Also got to learn about the section tag.

    QR code component challenge

    2

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Rishabh , Your solution is amazing & highly responsive , Great job 🤩

    If you want to position the card center on every screen then :

    • remove position:relative from card & attribution
    • give display: flex; flex-direction: column; min-height: 100vh; to body
    • give flex:1 to section & remove the height & padding-top
    • reduce padding-top from attribution (maybe 20px)

    Other than that your solution seems great , Well Done 🥳🥳🥳 & Please keep coding amazing solutions like this 👍

    Marked as helpful

    0
  • P
    HackMort_• 40

    @HackMort

    Submitted

    Built with CSS Grid & Vanilla JS.

    If anybody can help me get the flip animation, please let me know. I know I could have used a jquery plugin for this, but didn't wanted to go that route.

    Any feedback is appreciated!

    Launch Countdown Timer - Vanilla JS

    1

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hey HackMort , Your solutions is very nice & responsive Well Done 🥳🥳 About the flipping animation without jQuery , I took inspiration from this codepen. Also I think that instead of using pseudo elements for background images if you set them on body itself , the background images would be visible.

    @media screen and (max-width: 526px)
body {
    background-size: auto;
    background-position: center bottom, -850px bottom;
}

body {
    background: hsl(235, 16%, 14%);
    background-image: url(./images/bg-stars.svg), url(./images/pattern-hills.svg);
    background-position: center bottom, center bottom;
    background-repeat: repeat, no-repeat;
    background-size: contain;
    }

    Great job with the timer & please keep coding amazing solutions like this 👍

    Marked as helpful

    1
  • P
    stephmunez• 435

    @stephmunez

    Submitted

    Hey everyone!

    I just completed another challenge. 🤘🏽

    Super proud on this one because it is my first solution using React, it's a bit of an over kill but for practice purposes I added a Testimonials component instead of just putting everything to the App component.

    I also realized how frontend libraries like React make life easier from development to production, I can't wait to learn and grasp more about React and its magic!

    One more thing, I already added an <h1> tag and hid it out of view but the report still says there's an error, if someone can tell me why it will be much appreciated.

    Feedback is always welcome. Please let me know of any issues you may find and/or how I can improve my code :)

    Happy coding!

    Testimonials grid section

    #react#tailwind-css

    1

    Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Stephen , Your solution looks perfect to me 🙌🙌 and Yes react definitely makes life easier !!

    Just some of my opinions which can help you :

    • You can create components for each article(testimonial) & rendered all of them inside testimonials component & this way your code would have been more easy to read.
    • For the heading accessibility issue you can read this nice article

    Very well done 🥳🥳🥳 & please keep contributing such amazing solutions 🤩

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Onyeka , Your solution is fantastic , it is highly responsive & looks perfect to me. Your form validation works great & I loved the way you wrote the js code.

    Well Done 🥳🥳 & please keep contributing amazing solutions like this 🤩

    Marked as helpful

    1
  • Abhik• 4,840

    @abhik-b

    Posted

    👋 Hello Zeiyar , Your solution looks perfect to me , it is very responsive & looks fantastic to me, Great Job Well Done 🥳🥳 For animation or transition with react you can use framer motion and I agree with what @denielden says .

    Please keep contributing amazing solutions like this 👍

    2