Skip to content
OverviewSolutions
21
Comments
14
Bakhtiar
@b4khtiar

All comments

  • Austin•340
    @AbsyntheeSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This was a great challenge with lots of little css tricks. It was fun trying to build the phone screen as I've never had to do that before. The hardest part was getting it all to be responsive so it scales up and down at the same rate.

    I added a couple of little easter eggs just for funsies. Can you find them both? 🐶

    What challenges did you encounter, and how did you overcome them?

    I used clamp() for the first time and it's a good way of controlling the min and max restrictions of an element.

    I changed some of the colours slightly to make sure they meet the WCAG contrast requirements.

    I was able to complete the bonus challenge of having the screen load progressively upon opening the window, as well as adding a couple of little easter eggs and a nice floating animation on the phone container.

    What specific areas of your project would you like help with?

    Any feedback would be awesome. Thank you!

    Responsive Dog Walkers Booking/Chat App

    1
    Bakhtiar•380
    @b4khtiarPosted 4 months ago

    Awesome work 👏, the page looks so alive. Your solution on animated background give me some inspiration to work on.

    your dogs are cute, btw 🐶😄

    1
  • Otiro-John•60
    @Otiro-JohnSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Just creating the design

    What challenges did you encounter, and how did you overcome them?

    I had so many challenges but I was not able to solve the main one

    What specific areas of your project would you like help with?

    aligning items the right way

    Four-card

    1
    Bakhtiar•380
    @b4khtiarPosted 5 months ago

    to layout the cards you can use grid on your "four-card-container", set it to 3 columns and 4 rows, then position your div to specific area, for example:

    .four-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.one { 
    grid-area: 2 / 1 / 4 / 2; 
}
.two { 
    grid-area: 1 / 2 / 3 / 3; 
}
.three { 
    grid-area: 3 / 2 / 5 / 3; 
}
.four { 
    grid-area: 2 / 3 / 4 / 4; 
}

    This is one of many way you can use.

    0
  • NovikovIlya•910
    @NovikovIlyaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    ;)

    What challenges did you encounter, and how did you overcome them?

    ;)

    What specific areas of your project would you like help with?

    ;)

    Ecommerce-product-page

    1
    Bakhtiar•380
    @b4khtiarPosted 5 months ago

    the image slider works good

    0
  • Bakhtiar•380
    @b4khtiarPosted 5 months ago
    1. you can use grid-template-areas on each desired screen size to make it responsive.
    2. style the interactive element when hover to make it visible
    0
  • NovikovIlya•910
    @NovikovIlyaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    ;)

    What challenges did you encounter, and how did you overcome them?

    ;)

    What specific areas of your project would you like help with?

    ;)

    contact-form

    1
    Bakhtiar•380
    @b4khtiarPosted 5 months ago

    Your "Query type" radio input is not clearly visible on focus state, probably you could add styling to the element in focus so user navigating with keyboard can visually see that radio option is in focus.

    Marked as helpful
    0
  • Holger Mueller•410
    @HolgermuellerSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to figure out how to get the accordions to toggle and how to get the open/close icons to change on toggle. What I built was kind of different from the examples I found out there, so I had to do quite a bit of problem solving.

    What challenges did you encounter, and how did you overcome them?

    My biggest challenge was getting the icons to toggle as the accordions opened and closed. I tried console.logging a bit in my js file, until I realized I could solve the problem with CSS.

    What specific areas of your project would you like help with?

    Any constructive criticism would be great!

    FAQ Accordion with CSS and Vanilla JS

    1
    Bakhtiar•380
    @b4khtiarPosted 5 months ago

    good

    0
  • Bakhtiar•380
    @b4khtiarPosted 5 months ago

    live site not found

    0
  • John Pugh•340
    @JohnPugh688Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    As always i'm proud of my design and also my ability to us AI tools like ChatGPT to help me with the Javascript.

    What challenges did you encounter, and how did you overcome them?

    I found getting the input field for the custom tip difficult. but with the help of ChatGPT i was able to solve the issue and get the code to work correctly.

    What specific areas of your project would you like help with?

    Im not going to pretend to be good at Javascript. I work full time and have to children so getting free time to learn frontend development is a challenge for me. If this was my full time job i think i would adapt and improve massively. but a few hours a night has got me this far. Javascript is for me a real challenge.

    Tip Calculator App with tailwind css and Javascript

    1
    Bakhtiar•380
    @b4khtiarPosted 5 months ago
    1. The tip amount is "/ person" so you need to divide the totalTip by the number of people.
    2. Add validation and error feedback in the input field so user know if they input invalid number. like example: when i input decimal in thenumber of person, the app still process it.
    3. Good job in your ui implementation
    Marked as helpful
    0
  • TPAIN22•390
    @TPAIN22Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    its my first time working with Jason files and working with data i didn't expect it would be easy like that

    What challenges did you encounter, and how did you overcome them?

    i didn't face challenges it was easy job

    What specific areas of your project would you like help with?

    styling things

    time-tracker

    1
    Bakhtiar•380
    @b4khtiarPosted 5 months ago

    your solution looks good on desktop and function properly. could be better if you apply the font properly and set proper styling for mobile

    0
  • Bakhtiar•380
    @b4khtiarPosted 5 months ago

    design implementation is good, but the error message is stacking everytime user click submit with invalid input. Consider checking if there's already an error message or clearing it before adding the new one on every validation so there will be only one error message.

    0
  • Bakhtiar•380
    @b4khtiarPosted 5 months ago

    There are some details that miss from what i see:

    • border radius is not applied
    • popover on the mobile view are different and cause some layout shift

    overall, it looks close to the design

    0
  • Ola•150
    @ladibanks1Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Using grid area

    What challenges did you encounter, and how did you overcome them?

    Had a little issue using grid Area but i solve it

    What specific areas of your project would you like help with?

    Using the grid layout

    Responsive page using Css Flex And Grid

    1
    Bakhtiar•380
    @b4khtiarPosted 5 months ago

    Your grid area solution works good for the layout. my suggestion: You can set max-width for the grid container section so the layout look proportional in larger screen. make letter-spacing consistent on each cards

    0