Not Found
Not Found
Not Found
Not Found
Failed to decode param 'order-summary-component-gCBkGCVS5%20-%20Issues%20%B7%20joaomaia-code'
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

All Comments

  • @arevalosebastian

    Submitted

    I would like feedback, tips, all is welcome, thanks.

    Solution screenshot

    Article Preview Component. HTML, CSS, JS vanilla

    1

    Abhikβ€’ 4,740

    @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

  • @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.

    Solution screenshot

    Order summary

    2

    Abhikβ€’ 4,740

    @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

  • @SuhodolecA

    Submitted

    Hi everyone! I spent a lot of time working on this project. I would appreciate any of your comments and advice!

    Thanks!

    Solution screenshot

    Tip calculator app challenge hub(html, scss, flexbox, grid, js)

    #sass/scss

    1

    Abhikβ€’ 4,740

    @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,740

    @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

  • P

    @aleksFedotov

    Submitted

    Feedback will be highly appreciated

    Solution screenshot

    Advice generator app with React

    #react#styled-components#framer-motion

    2

    Abhikβ€’ 4,740

    @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.

    Solution screenshot

    QR code component solution using CSS

    2

    Abhikβ€’ 4,740

    @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!

    Solution screenshot

    QR Code Component

    2

    Abhikβ€’ 4,740

    @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

  • jayβ€’ 190

    @Jay-0331

    Submitted

    Hello, this is my third submission

    hope you all can review it and give some feedbacks

    Thank you

    Solution screenshot

    tip-calculator with react css mobile first

    #react

    2

    Abhikβ€’ 4,740

    @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

  • Kamasah-Dicksonβ€’ 5,260

    @Kamasah-Dickson

    Submitted

    Hi guys, It has been a while now making a new challenge. yep am here with a new challenge that I tried my hands on. What do you think I could have Implemented in this solution. Please do not forget to like and comment as always. Thank You : )

    Solution screenshot

    Responsive Chat-app-illustrator made with CSS flexbox and Grid

    #sass/scss

    2

    Abhikβ€’ 4,740

    @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,125

    @Remus432

    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! :)

    Solution screenshot

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

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

    2

    Abhikβ€’ 4,740

    @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β€’ 60

    @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?

    Solution screenshot

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

    1

    Abhikβ€’ 4,740

    @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

  • Joshua Earlyβ€’ 30

    @JearlDev

    Submitted

    Comments and criticisms are welcome :)

    Solution screenshot

    ClockApp Using Vanilla JS and Axios

    #axios

    4

    Abhikβ€’ 4,740

    @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

  • @Dantedavidson

    Submitted

    Fun challenge. Next time I would spend more time with the animations and maybe do some sort of slot machine effect for the computer choice. Let me know your feedback!

    Solution screenshot

    Rock Paper Scissors with React and Typescript

    #react#typescript#styled-components

    1

    Abhikβ€’ 4,740

    @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β€’ 40

    @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.

    Solution screenshot

    QR code component challenge

    2

    Abhikβ€’ 4,740

    @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!

    Solution screenshot

    Launch Countdown Timer - Vanilla JS

    1

    Abhikβ€’ 4,740

    @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
    stephjosephβ€’ 285

    @stephjoseph

    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!

    Solution screenshot

    Testimonials grid section

    #react#tailwind-css

    1

    Abhikβ€’ 4,740

    @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

  • @Onyeka-Aribeana

    Submitted

    Hi everyone. This is my first HTML-CSS-JS project (after watching a lot of tutorials πŸ˜…). Would really appreciate any feedback on the improvement of this project. Thank you in advance 😁.

    Solution screenshot

    Intro component with sign-up form challenge hub

    2

    Abhikβ€’ 4,740

    @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

  • Zeiyar Lynnβ€’ 335

    @Zeiyar-Lynn

    Submitted

    It has been quite a long time since I submit the last one. Here I'm, with new technologies. For React, what animation library do you prefer?

    Solution screenshot

    multipage site with react, react-router-dom and tailwindcss

    #react#react-router#tailwind-css

    2

    Abhikβ€’ 4,740

    @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

  • Massoudβ€’ 170

    @Massoud5

    Submitted

    Solution screenshot

    TIP-Calculator-App

    2

    Abhikβ€’ 4,740

    @abhik-b

    Posted

    πŸ‘‹ Hi Massoud , Your solution is Awesome , it works perfectly & looks nice as well. Well Don πŸ₯³πŸ₯³πŸ₯³

    However I think if you use

    • max-width:860px (you can give any suitable fixed value ) instead of width:60% then your responsiveness will be better & you can have the media query at 768px because at 1024px mobile view is not looking good !
    • in right-column section , you have some p tags with class p1,p2 , there instead of using position : relative to position elements , you can have a parent div with display:flex;justify-content:space-between like shown below: (this is a better way than using position )
    <div class="flex justify-between">
                <p class="">
                  Tip Amount
                  <span class="">/ person</span>
                </p>
                <p
                  id="tip-amount"
                  class=""
                >
                  β‚Ή4.27
                </p>
              </div>
    

    Other than that your solution is amazing & Please keep contributing fantastic solutions like this πŸ‘

    Marked as helpful

    0

  • P
    stephjosephβ€’ 285

    @stephjoseph

    Submitted

    Hey everyone!

    I just completed another challenge. 🀘🏽

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

    Happy coding!

    Solution screenshot

    Loopstudios landing page

    #tailwind-css

    2

    Abhikβ€’ 4,740

    @abhik-b

    Posted

    πŸ‘‹ Hello StephJoseph , Your solution looks perfect to me πŸ₯³πŸ₯³πŸ₯³ Very Well Done & please keep coding fantastic solutions like this πŸ‘

    1

  • P
    Scott Lyβ€’ 70

    @ScottLy426

    Submitted

    Got a little lazy with this one.

    Solution screenshot

    profile-card-component

    1

    Abhikβ€’ 4,740

    @abhik-b

    Posted

    Hi Scott Ly , your solution looks great & responsive, Well Done 🀩🀩🀩 Please keep coding awesome solutions like this πŸ‘

    0

  • Ayminβ€’ 180

    @ayminahmedpk

    Submitted

    Second submission.

    Improved SASS by using lists for themes. Improved calculator code.

    Solution screenshot

    SASS Lists for themes, local storage, custom slider, OOP Calculator

    #sass/scss

    1

    Abhikβ€’ 4,740

    @abhik-b

    Posted

    Hey Aymin , your solution is Awesome πŸ™Œ It is responsive , looks perfect , all functionalities work correctly. I looked at your code & it is very advanced , very well done 🀩🀩🀩 Please keep up with amazing solutions like this πŸ‘

    Marked as helpful

    1

  • Kenneth Brandonβ€’ 260

    @kbrandon19

    Submitted

    I wanted to create a transition for the discount portion but was unsure of how to incorporate it. If you have any suggestions or feedback I will greatly appreciate it.

    Solution screenshot

    Pricing Component using HTML, CSS & JavaScript

    #bem#materialize-css#semantic-ui

    1

    Abhikβ€’ 4,740

    @abhik-b

    Posted

    πŸ‘‹ Hey Kenneth , Your solution looks nice , responsive & interactive , great work done 🀩🀩

    Here are some of my opinions to make your solution look more nice :

    • Please remove width:100% from .pricing , .price-info , .billing so that nothing overflows your card
    • about the transition question you asked , the discount is removed from the DOM as soon as the toggle is toggled. So in javascript you can do something like :
    checkBox.onclick = () => {
        if (discountTag.style.display === "block") {
    documentTag.style.opacity = 0; //please insert the animation you want
          setTimeout(() => {
            documentTag.style.display = `none`;
          }, 300);
           
          } else {
     discountTag.style.display = "block";
          setTimeout(() => {
            documentTag.style.opacity = 1; //please insert the animation you want
          }, 300);
           
          }
    }
    
    

    Hope this helps 🀞 and please keep coding wonderful solutions look this πŸ‘

    Marked as helpful

    1

  • NitheeshKumar Cβ€’ 370

    @NitheeshKumar-C

    Submitted

    I know it should not to be toggle, but just for fun added little javascript πŸ˜…. How is it guys?

    Solution screenshot

    Using Flex-box

    1

    Abhikβ€’ 4,740

    @abhik-b

    Posted

    Fantastic work Nitish , Your solution is responsive & interactive, Well Done 🀩🀩🀩 If you add cursor : pointer to allsub-svg, it will look really nice !! Please keep coding fantastic solutions like this πŸ‘

    Marked as helpful

    1