Skip to content
OverviewSolutions
20
Comments
46
Nayan Bhatt
@freaky4wrld

All comments

  • Chanawin Kamolpanus•350
    @Chanawin-kmpnSubmitted about 1 year ago

    I was trying to learn about using Rem and Em that which one is suitable with margin, padding or dimension (width or height) and I learned that Em is often used for spacing that uses standard font sizes in Unit of measurement e.g., margin size between heading and paragraph and padding in button depend on font-size in button. For the unit Rem, it is a size measurement that relative on the main font size of the page used with Margin Padding and Dimension, depending on what or when it is used, e.g., padding of division tag contain a content or margin between element and element.

    If you have any suggestions or corrections, please let me know. Thank you.

    Workit landing page using Flexbox

    1
    Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there here's a link to a video that's great in differentiating in rem and em, by Brad Traversy !!!

    I hope this helps in resolving your query.......

    Marked as helpful
    0
  • Gabriel Noss•180
    @GabrielNossSubmitted about 1 year ago

    I have problems when the pointer is placed over the button it has to be over the letters to be seen. On the other hand, it gets a little bit longer at the bottom when you put the pointer over the button. If someone can help me to correct that. Thank you very much for your help.

    3 column preview card. Flex Mobile and grid to desktop

    2
    Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there buddy congratulations on completing the challenge, as far as your queries are concerned here's what you can do..........

    • first of all remove that a tag inside the button, that's the problem that the text "Learn More", shows up when you hover over that, button is complete in itself, it doesn't need <a> tag inside it, you can always use javascript to decide the functionality of the button and it's easily accessible like the <a> tag, follow the code...... <button class="sedan/suv/luxury-btn">Learn More<button>

    • then to resolve your increasing height issue, in your code you have given a border: none property to your button and when you are hovering over it you are providing it with new borders as border: 2px solid white , that's what is causing the whole problem.....here's what you can do

    button{
        // add the border to the button with the same background color of your button
        border: 2px solid [color-same-as-background-color-of-button];
}

button:hover{
          // remove the border property from here and do the same you were doing
}

    I hope this clears all your doubt, and makes it easy for you........glad to help!!!

    Marked as helpful
    1
  • Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there buddy, hope you having a good day........ follow the steps to get the image on your website....

    • move your images folder to public folder, vercel isn't able to understand where to look for the image that you have referenced in your html/css files....... it can only access things that are in the public folder.

    • then you have to relink the images in your html and css files, couple of commits would be good to save the changes.

    • then you have to redeploy your project on vercel and it will surely work.

    Hope this helps , if you have any other confusion do ask... I'm glad to resolve your issue

    Marked as helpful
    0
  • Mailoon01•70
    @Mailoon01Submitted about 1 year ago

    I want to learn JavaScript to continue progressing in more complex projects, but I don't have money to purchase JavaScript courses. Can you recommend me any website, free course, or tips to improve?

    Css,html and JavaScript

    1
    Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there buddy, hope you doing great ... and as of your question you doesn't need any money to learn Javascript......here are some of the resources that I would recommend

    Note The above two site are kind of your very own boot-camp without spending any money and are self-paced.....

    So chin up buddy, and go for it!!! Hope it helps and I'm glad to be of any use.......

    Marked as helpful
    1
  • Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey buddy......hope you doing great, here's what I would suggest you to do

    • give a ids of mobile and desktop to your images........ now apply the below styles
    #mobile{
     display: hide;
}
#desktop{
     display: block;
      some other styles to position the image/height and width etc....
}
    • now you can use media queries to assist you for achieving your image switching on reducing the width.......
    @media screen and (max-width: mobile-width/any width you want in px){
         #mobile{
                         display: block;
                         other styles that at you want
           }
         #desktop{
                       display: none;
          }

    That will do the work.....hope this helped you, glad to help you buddy!! Keep learning and coding!!!

    Marked as helpful
    0
  • Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there buddy.....hope you doing great!! Here's what you can do to achieve the design goals

    • first of all you don't need to have two overlay containers, you can do so by having a div with a class of overlay and put it below body
    <body>
    <div class="overlay"></div>
     ............
     ............
     ............
</body>
    • now give it the following property........
    .overlay{
       display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: rgba(0,0,0,0.7);
}
.overlay.enabled{
        display: initial;
}
    • do remember to toggle the class of enabled on button clicks.............

    I hope this works and help you, glad to be of any use!!!!

    Marked as helpful
    0
  • Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there, I guess there's a need to make your solution more close to the design specifications....

    • you don't have to make your body element flex, instead make your main element a flex, so that your cards go side-by-side
    • then on reaching the mobile-version width, set the flex-direction to column, so that they become as they are now....

    I would recommend you to have a good look on flex and mobile-responsiveness

    Do have a look on this playlist----> Brad Traversy it contains everything you need right now

    Hope it helps...... glad to help :)

    0
  • Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there, here's what you can do to achieve the hover effect on your image......

    • first of all I would recommend you to wrap your image in a div, there's no harm in that.....
    • then create a new div that's going to give you the hover effect, give it similar width and height styling just like the nft-img
    • then you can add a background color to the newly created div, particularly using an rgba value and a background-image view-icon(eye-svg) and having a z-index of negative value
    .img-overlay:{
     background-image: url(eye-icon.svg);
     background-color: rgba-value;
     width: [similar to nft-img];  
     height: [similar to nft-img];
     z-index: -1;
}
    • give your nft-img a z-index of zero #nft-img{ z-index: 0 }
    • on hover over the parent-element of the image and the overlay...... you can increase the z-index of the overlay, i.e.
    .img-overlay:hover{
      z-index: [value greater than #nft-img] ;
}

    I hope this works, I would recommend you to look for z-index CSS property......glad to help you :)

    0
  • Ashok Kumar Dharanikota•210
    @Ashok-Kumar-dharanikotaSubmitted about 1 year ago

    Well, I managed to do 50% of the website to match the design. But when I am dealing with class="blog-post-item" I find my design does not match the result. I realized I needed to go deeper about the grid. Any helpful resources or suggestions would be really helpful. I went through a few YouTube videos but still felt that dot in my mind.

    News Home Page (need improvements & help)

    2
    Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there, here you go with the resources you want, hope it helps in solving your issues..

    • grid and flex-box are different in approach.....
      • in flex you can handle elements on a single axis (i.e. either rows or cols/ horizontal-axis or vertical-axis)
      • in grid you can handle elements on a 2-D basis (i.e. both rows and cols/ horizontal and vertical-axis)

    **Resources: ** grid-cheat-sheet, grid-crash-course

    Hope it adds and fills the void...... glad to help

    Marked as helpful
    1
  • Varchronos•70
    @VarchronosSubmitted about 1 year ago

    what did you find difficult during the project?

    • centre the divs
    • adjust the flexboxes.

    which areas of the code are you unsure of?

    • responsiveness
    • text overflow
    • deployment

    Do you have any questions about best practices?

    • what are some best practices for flexbox, typography, and media queries.

    responsive qr-code website using html/CSS

    1
    Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there, congratulations on completing the challenge......here's what you can do.......

    • to center the card-container class you can give your container some width in percentage and provide it a margin like...
    .card-container{
      width: [some-value-of-your-choice]%;
      margin: [some-value]rem/em/% auto;
}

    this will help you to center the content, you can checkout this article

    • as soon as you give your container class a suitable width, you solved your issues for flex-box adjustments and text-overflow, further if you feel that the text still persist to overflow you can make use of relative rem/em units to solve the issue

    • for deployment you can use vercel/github pages as they are free for your hobbyist deployment YOU CAN EASILY FIND A TUTORIAL ON YOUTUBE

    • FOR YOUR FURTHER QUERIES HERE ARE SOME REFERENCES: -

    Marked as helpful
    1
  • Scott Starks•20
    @thetramp22Submitted about 1 year ago

    I attempted to make sure that the component matched the references for both sizes but I didn't really do anything special to get there. Just used % values for some margins. Should I be doing more than that to make thing responsive, even for simple things like this?

    QR code component with css

    1
    Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there, buddy congratulations on completing the challenge...... as per your question

    • for making a design responsive you always try to look for empty spaces like margin, padding, gaps, and other white-spaces
    • and try to reduce/increase with the apt screen-sizes.....
    • also try to reduce/increase the font-sizes/line-heights if needed....
    • using %/rem/em units is better than hard-coded px...... (to achieve responsiveness px-units prove great for static elements)
    • for making the UI responsive we make use of media-queries

    Hope it helps in adding to your knowledge........ glad that I can be of any use to you!!

    Marked as helpful
    1
  • Jonah Kroll•40
    @BlueTechDevSubmitted about 1 year ago

    What did you find challenging while building the project? Which areas of your code are you unsure of? Do you have any questions about best practices?

    Order Summary (HTML, CSS)

    1
    Nayan Bhatt•980
    @freaky4wrldPosted about 1 year ago

    Hey there..... just a few tips to help:

    • you can add border-radius to the place-order button... and a box-shadow property that will improve it....

    • also in the Cancel Order link you can use a link tag(<a>) besides a <p> tag, to make it accessible.....

    • you can also add a bit space-between the button and the link.......

    Rest is amazing, you did great buddy........hope this helps you!!

    0