Skip to content
OverviewSolutions
4
Comments
6

Harshit Joshi

@TheFoxianIndia120 points

I am a front-end developer, focussing on refining my skills. Currently learning working with JS frameworks - VUEjs and REACTjs

I’m currently learning...

Javascript frameworks

Latest solutions

Latest comments

  • Harshit Joshi•120
    @TheFoxian

    Hey Christopher, congratulations on completing the challenge.

    Here are my few findings, you have used two images and displaying one image with hiding another at media breakpoint makes sense but it is not a good practice, instead use HTML source tag. Read more about HTML Source tag.

    Other than this you have used display flex directly to the main tag. This is not a good practice, instead use a div inside of main and wrap all the content inside it and apply the respective css to that wrapper. Read more about centring any element using flex

    Although you have used max width 600px but there are few standard for media breakpoints. Please refer this for better understanding -

    1. 320px — 480px: Mobile devices
    2. 481px — 768px: iPads, Tablets
    3. 769px — 1024px: Small screens, laptops
    4. 1025px — 1200px: Desktops, large screens
    5. 1201px and more —  Extra large screens, TV

    Keep up the good work! Enjoy coding :)

    Marked as helpful
  • Harshit Joshi•120
    @TheFoxian

    Hi Deepak!

    Congratulations on completing this challenge. You have used font-awesome-pro cdn in the link tag. Replacing the cdn link with this

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> will help.

    Also for the classes used in the 'i' tag replace fa-light with fa and your icon will appear.

    There is one more feedback related to the image you have used, currently you have used a single image for both desktop and mobile. As per the challenge you need to use 2 different images for 2 different devices using source tag. Read more about Source HTML tag

    Thanks

  • Harshit Joshi•120
    @TheFoxian

    Hey there!

    Congratulations on completing this task. Everything seems fine there is one thing with the card-image it's not showing right now. I've reviewed your code and there you need to change the src, currently the image path is from the directory 'image' and it is missing from your code architecture. Once you replaced the path from image/image.png to image.png everything will work fine.

    Thanks

    Marked as helpful
  • Harshit Joshi•120
    @TheFoxian

    Hey Harley! Congratulations on completing this challenge. I've gone through your code and viewed you site preview. Here are my few findings listed below:

    1. I believe that by this statement "The desktop design breaks when the width is less than 502px" you must be referring to the image getting center aligned vertically. This is causing because of the wrapper card has display flex and align-items is set to be centered this yields the image getting center aligned with respect to the textual content. You can simply avoid this by changing the media breakpoint.
    2. By default for responsive media breakpoints, please refer to the official documentation Ideally max-width: 575px is the best breakpoint for smaller devices and min-width: 576px for min media breakpoint.
    3. For the card image source tag must be used hen we have to show 2 different images for 2 different screen sizes. Please read more about source tag through the official documentation.

    Other than these feedbacks Kudos to you for completing this challenge.

    Thanks, Enjoy coding :)

    Marked as helpful
  • Harshit Joshi•120
    @TheFoxian

    Congratulations on completing this project Here are few of my findings which may help you with the upcoming challenges.

    All the anchors should have a hover effect as of now it's missing which indicates that the button will not perform any action on clicking and on hovering. For the image better use d-none and d-sm-none classes accordingly, this will help you with displaying the required image at a time. Other than that instead of grid you can also use flexbox. Hope you know how to work with it.

    BTW everything seems fine. Great work keep it up!!

    Enjoy coding :)

  • Harshit Joshi•120
    @TheFoxian

    Hey! Good job and congratulations on completing this challenge // Here I've few feedbacks based on my observation: - font family is missing, mobile menu is also missing same goes for the hamburger. Other than that for css improvisation I suggest use css preprocessor such as SASS, or simply use bootstrap with the basic required css customisation. Happy Coding :)