Skip to content
OverviewSolutions
8
Comments
6
Ki'ara Colbert
@kiaraaa123

All comments

  • Daniel 🛸•44,310
    @danielmrz-devSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • HTML 🧾
    • SASS 🎨
    • TypeScript 💎
    • Vitejs ⚡
    • BEM Notation 🅱️
    • Mobile first workflow approach 📲

    One more opportunity to practice Vite + TypeScript. Tried to make it a bit more accessible, so it's possible to complete the form using only the keyboard. Not sure if my approach was the best, but it's working.

    Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Mortgage Repayment Calculator built w/ Vite, SASS and TypeScript

    3
    Ki'ara Colbert•130
    @kiaraaa123Posted 4 months ago

    This looks (and works) great, Daniel! It's so motivating to look through your solutions and see your progress over a year. Thanks for sharing your journey on here!

    Marked as helpful
    1
  • FRYDPHROG•230
    @FRYDPHROGSubmitted 5 months ago
    What specific areas of your project would you like help with?

    This is my second time ever using a grid, so any advice or feedback would be appreciated :) .

    Testimonial-Grid-Section

    1
    Ki'ara Colbert•130
    @kiaraaa123Posted 4 months ago

    Great job!

    Another option for the mobile styling is:

    display: flex;
flex-direction: column;

    Same result: fewer lines of code. 😊

    0
  • Melissa Martins•150
    @MellTinsSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?
    • Proud to make the design almost identical
    • I would like to be faster at understanding the grid positions
    What challenges did you encounter, and how did you overcome them?
    • It was difficult to make the cards on the left and right stay in the middle.
    What specific areas of your project would you like help with?
    • good programming practices.

    four-card-feature-section-master

    2
    Ki'ara Colbert•130
    @kiaraaa123Posted 5 months ago

    Hey Melissa,

    Great job on this challenge!

    1
  • Gilbert Koomson•280
    @Gilbert-KoomSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Proud I could finish a project in a day

    Product preview

    3
    Ki'ara Colbert•130
    @kiaraaa123Posted 5 months ago

    Hey Gilbert,

    Good job on your project, and congrats on finishing it a day! I'm always excited when that happens too, lol. You did a great job but I just wanted to offer a couple of tips that might be useful in the future:

    • To differentiate the border-radius on each side, you use four values. They represent each corner going clockwise, starting from the top left. For example, for the image in this project, you would use border-radius: 10px 0 0 10px;
    • To remove the auto-styling on the button, you can use border: none;
    • Lastly, you can call button svg to add a little padding between the cart icon and the button text

    Again, you did an amazing job! Looking forward to seeing your next project in my feed.

    Marked as helpful
    1
  • Ki'ara Colbert•130
    @kiaraaa123Posted 5 months ago

    Great job!

    0
  • Ki'ara Colbert•130
    @kiaraaa123Posted 5 months ago

    Great job, Guilherme! The only thing I'd consider is revisiting your padding and margin. Otherwise, your solution is pretty spot-on with the original design.

    0