Skip to content
OverviewSolutions
47
Comments
14
Pulkit saxena
@Pulkit-s21

All comments

  • Pulkit saxena•890
    @Pulkit-s21Posted about 2 years ago

    @Mmezirim I saw your site and it has issues. The notifications which aren't new dont have the blue background. When we click on mark all as read it should mark all notifications as read meaning removing the background and the red dot next to them and as a bonus you can make the notification bubble with 3 as its text to 0 to show no messages are left to read. Easy and quick changes to implement to finish the challenge perfectly

    0
  • Pulkit saxena•890
    @Pulkit-s21Posted about 2 years ago

    Hi @Lmcardenas98 congratulations on completing the challenge. I saw your site and code and noticed one thing, the tip percentage buttons are only five 5,10,15,25,50 and the sixth needs to be an input and not a button as you made so that user can enter a custom tip percentage and see the result. You can also set the tip/person and total/person to 0.00 which is NaN right now for better design

    0
  • Mauger•210
    @mauger1998Submitted about 2 years ago

    This is the third project Ive ever built on my own and it is getting a lot easier, one of the only issues I had is I cant see how to eliminate the space between "creation of" and the guys name without making everything else move, I also couldnt get a border that was the same radius as the image around his photo of his face. Any feedback is welcome, I am learning so much from this site :)

    NFT Card Third Project ive ever completed on my own

    1
    Pulkit saxena•890
    @Pulkit-s21Posted about 2 years ago

    mauger1998 I saw your code and at the end you should place the image outside of the p tag and only the text in it. And dont put both parts of it inside span tag. Make the footer flex to place the side by side and use gap to space them apart. By doing this I think you can eliminate the space between the text

    Marked as helpful
    0
  • Pulkit saxena•890
    @Pulkit-s21Posted about 2 years ago

    @MichalBednar There are few bugs in the code.

    1. I see you used fixed height and width for the main which I must tell you is a wrong approach. Don't fix the height and width. Put the image and text in a container and set a max:width to the container.
    2. Place the picture tag in a div of its own and set the div to flex:1 and the text to do the same as well so they take equal space on desktop version.
    3. Your button overflows from the div because you set a fixed height and width to it. Always use width and assign padding and not use height unless its absolutely necessary.
    4. Try reducing the font-size of h1. I think its too big right now but just a suggestion.

    I have also done this challenge so if you like you can view my solution for reference

    Marked as helpful
    0
  • Pulkit saxena•890
    @Pulkit-s21Posted about 2 years ago

    In the desktop version, the font size and card size aren't as big as they can be. User will have to try hard to read whats written in the text area and will move away from the site. Readability is very important for sites and help user get it without any changes or any effort. Try fixing that and font size is good at mobile version

    1
  • Pulkit saxena•890
    @Pulkit-s21Posted over 2 years ago

    @Agbortoko imo the best way to do this challenge is by using display:grid

    1. Place the qr code and text in seprate divs and both the divs in one container and apply grid to it with grid-template-columns: repeat(1,1fr).
    2. For the box shadow apply it to the container and the challenge will be done.
    3. At last just set max-width on the container to around 35 rem or so Ig but that can be done with trial and error method
    4. To center the container use display:flex min-height:100vh justify-content:center align-items:center to the body
    Marked as helpful
    1
  • Pulkit saxena•890
    @Pulkit-s21Posted over 2 years ago

    @veroisla Congrats on completing the challenge and the solution is great. Just one thing I noticed was in the mobile view the hamburger icon doesn't have the cursor pointer on it. Just this one thing is missing and once again the code is great.

    0
  • Renardo Pine•50
    @PinedevsSubmitted over 2 years ago

    I found it really difficult to align the bottom text (created by..) with the avatar image. In the end, I had to hard code it in. How could I center the text to the center of the image?

    Any tips/methods would be really appreciated.

    NFT preview component using HTML and CSS

    5
    Pulkit saxena•890
    @Pulkit-s21Posted over 2 years ago

    @Pinedevs Congrats on completing this challenge. For the last created by section put both the image and the text inside a div and then

    1. display: flex;
    2. align-items: center;

    Align item center sets the content at the center of the cross-axis and by default cross axis is verticle so that shoud get the text to be centered with the image

    1
  • Cole Y.•60
    @KoruxxSubmitted over 2 years ago

    I had a rough time with this one... it took me more than 3 hours to complete. I spent most of that time trying to figure out how to create the interactive overlay for the image. I also don't understand why my image became was zoomed in whenever I converted it to a link... I could not figure it out and I eventually succumbed to the urge to submit so that I could see what others are doing. If anyone has any advice on how they did it, I'd love to hear!

    NFT Preview Component

    2
    Pulkit saxena•890
    @Pulkit-s21Posted over 2 years ago

    @Koruxx I saw your site and code and there are a lot of bugs in it.

    1. The card is stuck at one place and if you go below 1440px width then it slides off the screen. I think it might be because of fixed the width of the body. You really dont need to do that ever.
    2. You used px a lot which isnt good for the responsive behavior. Try using rem em for more responsiveness.
    3. Never fix width with width and you don't need to do height: auto.

    Found errors but mostly they are of responsiveness so I suggest you watch Kevin Powell as he taught it very well in his courses and videos

    Marked as helpful
    1
  • Pulkit saxena•890
    @Pulkit-s21Posted over 2 years ago

    Hi @kriyanshishah congrats on completing the challenge. I saw your site and found few bugs in it.

    1. The breakpoint isn't at right width and the card overflows before changing into flex-direction: column; tho I think grid is much better for these layouts.
    2. When the breakpoint occurs and card changes its layout the button at the end overflows at the bottom of the card and isn't placed nicely.
    3. I saw your code as well and noticed you have used px and width (fixed width) everywhere which isn't good for responsive behavior and must advice you to watch and go through Kevin Powell responsive crash course because he taught these things very nicely and easily in that.
    Marked as helpful
    1
  • Pulkit saxena•890
    @Pulkit-s21Posted over 2 years ago

    You forgot to add the image in your markup thats why the solution shows no image. In the HTML make the container grid or flex and in the first comtainer where you left it empty use the img tag and add the image. If you do use grid on container then use grid-template-columns: repeat(2,1fr);

    Marked as helpful
    0
  • Nicholas•40
    @nickyczySubmitted over 2 years ago

    Only trouble i have was getting the @media screen issue below 375px AND how to import JSON file and file changes according to changes in the JSON file.

    Any help would be highly appreciated. PLEASE I WOULD LOVE TO LEARN to improve.

    Expense chart with Javascript, HTML,CSS, Chartjs

    2
    Pulkit saxena•890
    @Pulkit-s21Posted over 2 years ago

    Hi Nicholas, I saw your solution and the code. You got the thing to work but to be honest the code isn't good. You used fixed height,width instead of making it responsive that's why the problem is there for you.

    1. Try learning more responsiveness for layouts first before doing these challenges. The best I can recommend is Kevin Powell. I was very bad at responsive layouts first but after few months and watching his videos helped me a lot.
    2. I saw you did two challenges in total and they were Junior Level and as you have asked the community you yourself think you need a lot of learning to do. So I would suggest first complete all newbie level challenges in HTML & CSS first then JS and then move to higher levels
    3. I just completed this challenge yesterday but my chart isn't visible when I upload in netlify so I didn't submit the solution but here is my repo for this

    https://github.com/Pulkit-s21/expense-chart.git

    If you want you can look at the code. Not at all good by any means but just for you to see how you can get it to be responsive.

    Marked as helpful
    0