Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Matt Cope• 340

    @MatthewPCope

    Submitted

    What are you most proud of, and what would you do differently next time?

    There was a lot going on with this one so I took my time with each little thing and really focused on the getting it functioning properly and looking like the design.

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

    The slider was the first challenge, getting it to turn green as it moved, then the checkbox styling with the check icons was a whole other challenge, then getting the strength boxes working correctly was tough too. I just kept at it, did more research and got help from the community as I went along.

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

    I think I'm good on this one, but any feedback is welcome.

    Password Generator Solution

    1

    P
    Vishika• 260

    @Vishika

    Posted

    Nice solution!

    After looking through your code for the strength score, I realise that basing it on the actual generated characters rather than simply the user inputs is how I should have done mine! I also realised I could have used the checkbox image provided like you did rather than generating a polygon clip-path...

    That said, I noticed a couple things with your solution

    1. There is a bug, when you generate a strong password by ticking all the options and have the length at 20, then you lower the length slider to 1 and click generate, the strength bars show 3, and the text shows "too weak"

    2. The #strength-level-text on mobile view (375px) is quite large when "too weak" and perhaps the password is too when the length is maximised ( i used flex-wrap and made the font smaller)

    0
  • P
    ikethedev• 260

    @ikethedev

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud that I wrote this more modular and I believe I did a solid job on naming function descriptive names

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

    A few challenges I faced was writing a function that updated the object in a way that wasn't overly complicated

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

    Still working on pixel perfection!

    tip calculator

    2

    P
    Vishika• 260

    @Vishika

    Posted

    Hey, great work on your solution, I really like your javascript, it was very well organised and easy to read!

    Some tips on your solution:

    • I quite liked how you made the whole output section into a button, I really really at odds with how to get the user to signal input! Although it might be helpful to indicate it can be used as a button with `` and something like:
    .calculated_amount:hover {
    cursor: pointer;
    opacity: 80%; /* or a background / color change */
}
    • I noticed that you had been playing around with the the custom tip inputs width, I had a similar, though different problem, instead of specifying the width at different media queries you can simply have the following:
    .input_btn {
    width: 100%;
    box-sizing: border-box;
}
    • In your media query, update the grid template rows, so you don't get an extra line when you shift to three columns:
    screen and (min-width: 1000px) {
    .tip-buttons {
        grid-template-rows: repeat(2, 1fr);
    }
}
    • Finally your #bill_amount and .party inputs would look better with width: 100%; at certain screen widths :)
    0
  • P
    Vishika• 260

    @Vishika

    Posted

    Excellent job!

    I learned a lot from looking at your code, especially the activity-card__icon, I ended up using abolute positioning and overflow hidden, but yours is a lot more elegant.

    I've no suggestions for improvment :)

    1
  • P
    Vishika• 260

    @Vishika

    Posted

    Good job getting the subscribe button and card "navigation" to work!

    A few style tips:

    • on the desktop version your .left class looks better without the width: 40% and the .left img without the width: 100%
    • for your unordered list you're better off using the icon-list image than the icon-success, like this list-style: url(./assets/images/icon-list.svg);
    0
  • P
    Vishika• 260

    @Vishika

    Posted

    Great job with adding the object-fit: cover and getting the your share box to float above! Adding a psuedo element to it can help give it that speech bubble look

    .boxShare::after {
    content: "";
    height: 1rem;
    width: 1rem;
    background-color: var(--veryDarkGrayishBlue);
    box-shadow: -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%) rotate(-45deg);

    I also noticed that in mobile view there is some margin missing from a couple elements

    The top of Michelles portrait peeps up from the share box in mobile view because the div is a little bit taller than the boxShare. I got around this by stacking both in the same grid-area, which made the share box exactly as tall as the profile div

    Marked as helpful

    0
  • neven.cebic• 510

    @redizork

    Submitted

    What are you most proud of, and what would you do differently next time?

    none

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

    none

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

    none

    Meet Landing Page

    2

    P
    Vishika• 260

    @Vishika

    Posted

    Awesome job, I love scale on hover that you used in the gallery!

    One improvement you could make is to align the hero images in such a way that you partially obscure the left and right sides of them. I did this by increasing the widths on the hero images, positioning them in the grid and then hiding the horizontal overflow. Though with the way you've structured your code, you may have to do it differently or better!

    Marked as helpful

    0
  • wey song• 130

    @teuthix

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud that I got the grids to work and feel like I understand it better. I hope to put this knowledge to use faster next time!

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

    Figuring out how to get the layout for the desktop view. I looked up how to use grid-area and was able to solve the problem.

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

    I'm worried that the way that I got the cards to display in the desktop view is not the best way to do it. Open to any suggestions and help!

    Testimonials Grid

    1

    P
    Vishika• 260

    @Vishika

    Posted

    Fantastic solution! I also used .card:nth-child(n) to target the different cards instead of using class variants of .card i.e .card--black, .card--black-blue etc

    You've specified the grid positions to a very fine level of detail, personally I told certain cards to span, and gave some of them orders to achieve a look. This allowed me to use less CSS and give a couple more interim layouts between the mobile and desktop sizes suggested to make it more responsive

    @media (min-width: calc(720em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial:nth-child(1) {
    grid-column: span 2;
  }

  .testimonial:nth-child(4) {
    grid-column: span 2;
  }

  .testimonial:nth-child(5) {
    grid-row: span 2;
  }

  .testimonial:nth-child(3) {
    order: 1;
  }

  .testimonial:nth-child(4) {
    order: 2;
  }
}

@media (min-width: calc(1080em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .testimonial:nth-child(3) {
    order: 3;
  }
}

@media (min-width: calc(1440em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .testimonial:nth-child(3) {
    order: 1;
  }
}
    0
  • P
    Vishika• 260

    @Vishika

    Posted

    Very impressive use of clamping!

    A couple of tips!

    1. for the card image, you can use margin-left: auto for it's position

    2. you can use grid template areas for the placement of the cards

    .cards {
    display: grid;
    grid-template-areas:
      ". . t t . ."
      "l l t t r r"
      "l l b b r r"
      ". . b b . .";
  }

  .card--1 {
    grid-area: l;
  }

  .card--2 {
    grid-area: t;
  }

  .card--3 {
    grid-area: b;
  }

  .card--4 {
    grid-area: r;
  }

    Marked as helpful

    0
  • OffyOk• 50

    @OffyOk

    Submitted

    What are you most proud of, and what would you do differently next time?

    ahh i just do resposive that swap picture to show between desk and mobile ui

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

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

    responsive product preview page

    1

    P
    Vishika• 260

    @Vishika

    Posted

    Great solution!

    I love all the meta tags you've added! A couple minor things I noticed that you missed the css "cursor: pointer;" for the button and that you have some duplicate css in your media query

    0
  • LuBrito• 60

    @Luizadebrito

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm pround to be able to build this recipe page.

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

    Apparently my bugged and I just couldn't put a margin-bottom in the breakpoint of Mobile to Desktop and I don't know why, so I involved all the container with another div to put the margin-bottom.

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

    If there's anything I could change to improve this project, I'd be glad to receive feedbacks.

    Recipe-page with Flex-box and CSS Grid

    1

    P
    Vishika• 260

    @Vishika

    Posted

    Awesome job! Your approach is certainly cleaner and more responsive than mine.

    Personally I divided the image dimensions by 2. This is a practice that's used to support higher resolution screens. Then I doubled the margin and added these two numbers together to restrict the width of my container.

    I think your margin problem stems from you using

    @media screen and (min-width: 767px) {
    .margin-bottom {
        padding: 4rem 0;
    }
}

.container {
    margin: 0 auto;
}

    Instead try

    @media screen and (min-width: 767px) {
    .margin-bottom {
            display: flex;
            justify-content: center;
    }

    .container {
        margin: 4rem;
    }
}

.container {
    margin: 0;
}
    0
  • Nebil Nejmudin• 230

    @Nebil-Nej

    Submitted

    What are you most proud of, and what would you do differently next time?

    Start with the Mobile Design and Go to Desktop design in the CSS

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

    Box Shadow, Forgot the Order of the Property

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

    None

    Blog Preview Page

    2

    P
    Vishika• 260

    @Vishika

    Posted

    Nice job! I think yours actually looks better with the slightly smaller width I completely missed the box-shadow hover effect on mine, till I saw your transition

    0
  • MarcosGP20• 30

    @MarcosGP20

    Submitted

    What are you most proud of, and what would you do differently next time?

    im proud of make my first frontend challenge, i would do different center the mid div

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

    only put the text below the image

    Qr component challenge html css

    1

    P
    Vishika• 260

    @Vishika

    Posted

    Hey there :)

    Nice job noticing the box-shadow, I completely missed that, whilst doing mine. Getting the spacing right on these projects is a real challenge! I used figma for the first time, and I found a couple dimensions (the total card width and height) useful to use as a baseline

    0