Skip to content
OverviewSolutions
21
Comments
74
Aadvik
@Aadv1k

All comments

  • Aadvik•1,250
    @Aadv1kPosted over 1 year ago

    Good, clean and polished. What else can one expect from such a challenge? Good work pal! I would have said mobile responsiveness but it looks great even on small screens

    1
  • Graeme Byrne•520
    @grmbyrnSubmitted over 2 years ago

    I didn't find a way to make previous and next projects appear on the page in the My Work section, so I would appreciate any ideas on this, as well as anything else that could use some work. Thanks!

    Single page design portfolio

    1
    Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    Hey! I don't have pro but attempted this challenge nonetheless (courtesy of you for the assets) Here is the github link live url

    The way I sovled the issue, was to just align all the images with a flex, justify them on the center and just translate the container by the width of a image on the arrow click

    0
  • Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    Holy hell I just saw the 40 html mistakes, but most of them seem to be the doings of tailwind and webpack, so I don't think I can fix em

    0
  • Kent O'Sullivan•1,870
    @12KentosSubmitted over 2 years ago

    SCSS is definitely a little messy, but was able to get the job done.

    One thing I wasn't sure about is, the box on the desktop view, doesn't shrink/move when the view gets adjusted, I'm not sure why. Any ideas?

    Thanks!

    FAQ-Accordion-Card

    1
    Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    this is because of the way your app is centered and the approach, this is why you should opt for a mobile first approach, on mobile do something like .card { width: 80%; max-width: 700px} and done, simple as that, no need to worry about the sizing, and also, when centering elements horizantally within the body use margin: 0 auto and use position absolute for the vertical centering, sorry if my comment is a bit vague, feel free to ask me anything

    Marked as helpful
    1
  • Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    hey man great design, just one small suggestion, (this is something even I do and am trying to avoid) that is hover, I would say you should add a :active animation to your button to make it clicky both on mobile and deskop. The problem with a hover is that it is sticky on mobile, which makes it irritating, in my newer projects I avoid using hover in most cases, especially where the effect is visible (box-shadow for instance) instead I try and add active animations that trigger when the button is clicked.

    Marked as helpful
    1
  • Moses•130
    @mtenkorangSubmitted over 2 years ago

    The overlay proved tricky. Got it working(a bit) but the svg looks faint. The alignment of the price and days left don't look so accurate.

    NFT Card Preview HTML and CSS

    1
    Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    Your design is great just a little suggestion -- add a media query for smaller screens like so -- @media only screen (min-width: 375px) {} and here you can maybe adjust some fonts and the width of the card.

    0
  • Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    The design looks spot on! just one small thing, I think the grey bar is meant for the highest value

    0
  • Jeffrey Tuason•550
    @Tuason066Submitted over 2 years ago

    Hi,

    I need help with my JavaScript.

    As you can see in my script I have three functions (dailyCards, weeklyCards, and monthlyCards) I'd like to ask if I can make it only in one function because they have only small differences.

    Thank you so much for helping out.

    Responsive Time Tracking Dashboard

    1
    Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    Good job on breaking down your JS into functions, that is a good practice, so, here is a simple fix; remove all the other functions and just have a single one getCard(date) where the date is either daily, monthly or weekly, then simply in your template replace ${item.timeframes.daily.current} with ${item.timeframes.[date]['current']} (do this will all the references) and voila

    Marked as helpful
    2
  • Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    Hey! Even I just completed this challenge, great work, but the mobile spacing is a bit off Also, a quick tip, you should use absolute positioning in the "Made by ____" this will prevent that scroll

    0
  • Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    Hey, the only tip I have is that you should use bem naming conventions in your html, that makes it cleaner and easier to read, for you and other devs. Here is a BEM 101

    0
  • Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    I checked out you source code and its' really well structured and organize, good job. I would recommend you add a media query for the card component to make it usable on smaller mobile screens

    0
  • King•310
    @king-oldmateSubmitted over 2 years ago

    I had to cheese things a bit since I had some difficulties with dynamic styling with Tailwind and React, but it doesn't seem to have impacted the production build.

    How does one ensure that they are building an accessible website whilst using React?

    Time tracking dashboard [React, Tailwind]

    1
    Aadvik•1,250
    @Aadv1kPosted over 2 years ago

    Hey man! I was curious to see your source code, since I myself just started using tailwindcss, but I couldn't find the actual source, instead it was the minified production code; I would suggest you keep your src folder separate and gitignore the destination folder, and simply add a build command to netlify. You can reach me out via twitter or mail and I can help you set it up. You can also take a look at my repo of fem projects

    Marked as helpful
    0