Skip to content
OverviewSolutions
64
Comments
11
Sam
@JustANipple

All comments

  • Sam•1,140
    @JustANipplePosted about 2 months ago

    Beautiful solution! Keep up the good work

    Marked as helpful
    0
  • PreANI•160
    @preani19Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    ##time setting time was kina challenging

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

    the responeve design kinda was hard with this design but i did my best with it

    age-calculator-app-main

    1
    Sam•1,140
    @JustANipplePosted 2 months ago

    Good job on completing this challenge! Keep on improving

    1
  • Marvin•80
    @elMarMarSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I believe my code organization was much more organized than previous projects. As I was reviewing and refining my code, I noticed that I could easily find what parts of the website I wanted to augment.

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

    My largest challenge while working on this project was truly understanding the CSS tools that I've encountered so far. I know of flexbox, grid, etc., but I still find myself struggling to truly understand them and implement them as I work through my code.

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

    I am curious about whether or not my code is properly structured. I'm trying to avoid redundancies while maintaining readability. I'm not certain if I achieved that goal.

    Beginner Social Links Profile

    2
    Sam•1,140
    @JustANipplePosted 3 months ago

    Hi @elMarMar, good job on completing this challenge!

    I've seen that you're using margins to space items vertically. To make styling more consistent, I suggest you use grids and gaps to space items evenly

    Also don't forget to set the background color when you hover your links

    0
  • P
    krru09•150
    @krru09Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I completed this project pretty fast! I think I'm getting the hang of css grid. I've come to appreciate grid-template-areas and grid-area properties, they make CSS grid way easier.

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

    The fig file did not reveal a lot about the design requirements, I had to click around a lot to try and find certain design properties. For example, I had a lot of trouble trying to find the box shadow properties in the fig file. Also, I had some trouble with the quotation image and how to make it responsive with the different screen sizes.

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

    I would like further help on how to make position: absolute and position: relative images responsive based on the screen size. I utilized multiple media queries and breaks as to where it should be based on the design, so it doesn't overflow out of the container it's attached to; but I'm sure there's probably an easier way. Please feel free to let me know!

    Responsive layout using CSS grid

    1
    Sam•1,140
    @JustANipplePosted 3 months ago

    Hi @krru09, you've made a nice work, good job!

    For the image part, you could set a left and a right at 0px so you can set a margin auto to center it. Then just use transform: translateX to move it. This should keep it in the div through all the breakpoints.

    But there's another option. Instead of using the img tag, you could just use a background image for the div and position it at your needs, so it never overflows

    Check my solution if you want to see it live

    Marked as helpful
    0
  • Sam•1,140
    @JustANipplePosted almost 2 years ago

    Hi PTRWILK, Good job for completing this challenge!

    To make ellipsis white, you can just use the filter rule to make the image brigther.

    filter: brigthness(value); - work with values until you've found what you need

    That will cause the element to look "white"

    I hope this helps

    Marked as helpful
    1
  • Sam•1,140
    @JustANipplePosted almost 2 years ago

    Complimenti per la challenge! L'idea aggiuntiva secondo me è molto bella e il blocco calza bene con il resto del design

    1
  • Sam•1,140
    @JustANipplePosted almost 2 years ago

    The backface animation is something i will steal from you. I didn't know that was possible until now.

    For a smoother experience, you could give your buttons a transition, but it might be personal taste

    Nice work!

    2
  • Sam•1,140
    @JustANipplePosted about 2 years ago

    Hi Akisheva, you've done a very good job for this challenge!

    To solve the accessibility reports, just change your qr-component element from "div" to "main" and trying always having everything in an header, nav, main or footer. This makes it simpler for screen reader users to go through your website.

    It might be something you don't want in this challenge, but it will become useful in the future

    Also, to center your div you can use a "display: grid" and "place-content: center" on the body element

    I hope this helps! Keep on going!

    0
  • Sam•1,140
    @JustANipplePosted over 2 years ago

    Hi Tanvir. This is awesome! Spacing between the text blocks are perfect. Where did you learn that spacing technique?

    0
  • Sam•1,140
    @JustANipplePosted over 2 years ago

    Hi Chris! Your content is overflowing because you're setting a fixed width, so the content is not breaking until it gets to the border of that width, that is overflowing the mobile view. You could set a max-width and then the block will resize to keep the content visible. Delete the .card-right {width: 50%} and the block will be responsive Remove the "/" before the img link and it will show up live

    0
  • Sam•1,140
    @JustANipplePosted over 2 years ago

    Hi Bocikond, nice work! For your time, you have everything in place, you just need to add "justify-content: space-between" in your .price-time class. that will cause the two items to have as much space as possible between them, making time stick to the right

    Marked as helpful
    1