Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
20
Abhilashpandey
@freakyjones

All comments

  • Vodina Efem•120
    @Simplyvoda
    Submitted almost 3 years ago

    Advice generator app

    #sass/scss
    2
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Vodina,

    ** congrats on fetching data through API 🎉🎉🎉**

    I just saw your code and here is one suggestion for you. Always handle errors on your API calls

        fetch('https://api.adviceslip.com/advice').then((data) => {
            // console.log(data);
            return data.json();
        }).then((adviceData) => {
            // console.log(adviceData.slip.id);
            document.getElementById('advice-id').innerHTML = adviceData.slip.id;
            // console.log(adviceData.slip.advice);
            document.getElementById('advice-box').innerHTML = adviceData.slip.advice;
    
        }).catch((err)=>{ 
            console.log("do whatever you want with this error", err)
        })
    

    Hope this helps, Thanks Happy coding :)

    Marked as helpful
  • Rimsha•240
    @rimshub
    Submitted almost 3 years ago

    REST Countries API with color theme switcher - React, Bootstrap v5

    #bootstrap#react#accessibility
    1
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Rimsha congrats on completing the challenge 🎉🎉

    your website looks just like the design. while reviewing your website, one mistake caught my eye, the filter by region dropdown list item cursor is not a pointer.

    Happy coding :)

  • P
    Fran Sanabria•90
    @Fran-Sanabria
    Submitted almost 3 years ago

    QR component solution

    2
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Fran,

    congratulation on completing the challenge

    I just saw your code and like to give my one suggestion with your permission,

    1. Rather than using media queries throughout your CSS file you can put all your code related to that responsiveness in one place, It will be much cleaner and you have your particular device code in place.
    @media screen and (min-width:950px) {
        img{
            height: 268px;
            width: 268px;
        },
        h1{
            font-size: 21px;
        }
    }
    

    I hope it helps, Thanks. Happy coding :)

  • Michael East•40
    @MrEasty94
    Submitted almost 3 years ago

    Perfume Product Preview Card

    2
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Michael,

    congratulation on completing the challenge

    I just saw your code and like to give you one suggestion

    1. instead of using an anchor tag on add cart, a button tag will be a better option for accessibility.

    I hope it helps, Thanks Happy coding :)

  • Paula Carlech•110
    @Paula-Carlech
    Submitted almost 3 years ago

    Expenses Chart Solution. HTML, CSS and JavaScript

    3
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Paula,

    congratulation on completing the challenge

    I just saw your code and like to give some suggestions with your permission,

    1. you can add another key to every object in the data.json and then map it for every bar so that you can change the color of the bars.

    2. Start using semantic HTML in your code. Here is a blog for you to get started with semantic HTML. https://www.simplilearn.com/tutorials/html-tutorial/html-semantics

    If you want to know how to do this with only Js you can check out my solution.

    I hope it helps, Thanks happy coding :)

    Marked as helpful
  • C Lewis•110
    @casserole27
    Submitted almost 3 years ago

    Social Proof Section using vanilla CSS and Flexbox.

    3
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hello Clewis,

    congratulation on completing the challenge. I just saw your code, Here is my one suggestion that may help you in the future.

    Use of universal operator to get rid of the default browser Style instead of using margin:0, padding:0 for every device

    *{
      margin:0;
      padding:0;
     box-sizing:border-box
    }
    

    I hope it helps, Thanks Happy coding :)

    Marked as helpful
  • Chyunjet•620
    @Jetyun
    Submitted almost 3 years ago

    greyed out a website with div, CSS Custom Properties

    #accessibility
    1
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Jetyun, congratulation on completing the challenge

    I just saw your code, and here are my suggestion,

    • Using responsive units (rem, em,vh,vw) in your code will help you to make a responsive website.
    • Using min and max will also help you to make a responsive website.

    Here is one of my favorite videos regarding website responsiveness (https://www.youtube.com/watch?v=srvUrASNj0s).

    I hope it helps. Happy coding :)

    Marked as helpful
  • Luis Pellizzon•50
    @lhpellizzon
    Submitted almost 3 years ago

    Responsive Card Component using FlexBox

    2
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Awesome, More power to you Luis Pellizzon.

    Happy coding :)

  • Abdul rehman•650
    @abymani
    Submitted almost 3 years ago

    Intro section with dropdown navigation

    3
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Abdul,

    congrats on completing the challenge

    I just saw your code, I would like to give some suggestions with your permission

    1. start using data attributes in your code, It will be much more efficient to change open and hide the nav and reduce the use of excessive javascript.
    2. try using a z-index while stacking multiple components in one place . Here is one of my favorite videos regarding z-index (https://www.youtube.com/watch?v=uS8l4YRXbaw).

    hope it helps, Thanks Happy coding :)

  • fsuropaty•160
    @fsuropaty
    Submitted almost 3 years ago

    Product Preview Card Component Challenge using Tailwind CSS

    #tailwind-css
    1
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi, fsuropaty,

    congratulation on completing the challenge.

    There is two way you can handle image responsiveness

    1. use it as a background image as per your code it will be like
    #image-section{
      background-image:URL(image path);
      background-position:center;
      background-size:cover;
      background-repeat:no-repeat;
    }
    

    My solution also uses this method.

    1. The second method will be when we make img take a width of 100% so that it can inherit the parent container responsive property. The code will be something like
    #imagesection{
      width: 10rem;
    }
    #imagesection img{
      width:100%
    }
    

    I hope this helps. Happy coding:)

    Marked as helpful
  • Kapil•70
    @Kapil101527
    Submitted almost 3 years ago

    Responsive intro section with dropdown using react js.

    #react#styled-components
    1
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi, Kapil,

    congrats on completing the challenge.

    I just saw your solution, Here is my one suggestion

    Wrap your mobile-bg and parent-bg images inside the individual parent div and give them 100% width of the parent. That can make your image responsive. Check my solution for reference.

    Hope this helps. Thanks, and happy coding :).

    Marked as helpful
  • Owsla•20
    @iOwsla
    Submitted almost 3 years ago

    Product-preview-card-component

    #sass/scss
    1
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Owsla,

    congrats on completing the challenge.

    I just review your solution and it almost looks like the design, Here is some tips that can improve your solution

    1. Change the width of box content and box image div to 100%. It will make two div equal width.
    2. instead of using a margin for giving space between parent div and inside elements, padding will be an awesome choice.

    Hope it helps, Thanks, Happy coding :)

    Marked as helpful
  • Ejemeare•30
    @Ejemeare
    Submitted almost 3 years ago

    Product display

    5
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi stepheigbe

    congrats on completing the challenge .

    1. If your current src for the Image is \media\product.jpg change it to ./media/product.jpg hopefully it will work.
    2. For the second Image change the src to ./media/iconcart.svg

    Thanks, Happy coding :)

    Marked as helpful
  • Margarida Semedo•10
    @margaridalsemedo
    Submitted almost 3 years ago

    Product preview card component

    2
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Margarida,

    congratulation on completing this challenge. I just saw your code and would like to give some suggestions with your permission

    1. your border radius is not showing up in desktop view probably because your parent container card is much bigger than your child div card image. Try to give your parent a fixed height and then make your card-image container height 100% of the parent's height. in addition you can give your background image `{background-position:center, background-size:cover}.

    2. More space between the card text container and its content will greatly improve your UI.

    personally, i like to add {margin:0,padding:0} with *{box-sizing:border-box} for getting rid of default browser styles.

    hope it helps, Thanks, happy coding :)

  • kounik•300
    @Valhalla-2
    Submitted almost 3 years ago

    Responsive QR code site with HTML AND Css (Updated)

    3
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi kounik,

    congratulation on completing this challenge.I just saw your code and would like to suggest two videos for learning more about website responsiveness and box-model, 1.https://www.youtube.com/watch?v=srvUrASNj0s //for website responsiveness 2.https://www.youtube.com/watch?v=-8ORfgUa8ow //for CSS box modal

    the 2nd video is pretty long if you don't want to watch the whole video, you can watch only the box-modal section.

    hopefully this help, Thanks, and happy coding :)

    Marked as helpful
  • Ali Mousavi•60
    @Ali-Primer
    Submitted almost 3 years ago

    Huddle landing page with alternating feature blocks

    2
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hello Ali, congratulation on finishing your challenge.

    I just saw your code and I would like to give some suggestions with your permission,

    1. keep your images in one folder. it will help you manage your project in long run.
    2. use a universal selector (*) to get rid of default browser styles like *{margin:0,padding:0,box-sizing:border-box}.
  • Markus•130
    @Maggus407
    Submitted almost 3 years ago

    Responsive Perfume Card

    1
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hello Markus, congrats on finishing the challenge.

    I saw your code and it's pretty awesome, I tried this challenge a while ago and was having a problem with the flexbox issue. Regarding your image responsiveness, I think there is another approach: making a parent image container and then putting the image inside of that div with a width of 100%. let me know your thoughts. Thanks

    Happy coding :)

  • Harsh Kumar•3,330
    @thisisharsh7
    Submitted almost 3 years ago

    QR-code using CSS Cards

    2
    Abhilashpandey•270
    @freakyjones
    Posted almost 3 years ago

    Hi Harsh, Congratulation on completing the task . Also here is one of my favorite videos regarding the basics of HTML, and CSS. Hopefully, it will help you master HTML and CSS a lot faster. https://www.youtube.com/watch?v=-8ORfgUa8ow.

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

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

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