Skip to content
OverviewSolutions
14
Comments
9
Ahmed Abdelgawad
@ahmedAgawad

All comments

  • Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Hello 👋, Amazing work on completing this challange 👏👏.

    • to make the overlay transparent i suggest that you place the image-equilibrium.jpg as img inside the picture div then add the overlay color using ::before pesudo element on the picture div
    • to fix the accessibility issues you have in the report i suggest you use main tag as the card container
    • make sure you add alternative text to images in the page to improve accessibility

    Have a good day, Happy Coding 😊😊 .

    Marked as helpful
    1
  • Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Hello 👋, Amazing work.

    • there is a small problem in the thanks card svg and itsn't displayed correctly you can fix it by changing the relative path of the img tag as following src="./images/illustration-thank-you.svg"
    • you can make the app responsive just by changing the width property to max-width on the main tag

    Hope this helps.

    Marked as helpful
    0
  • Kindness•10
    @Atsue-KindnessSubmitted over 2 years ago
    1. Making the card responsive was a bit difficult but I completed it
    2. I have a space below the card image, I have inspected and checked my code but I can't seem to figure it out
    3. Please what's the best practice for building a product card

    Product preview card component

    1
    Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Hello 👋, Nice job on completing this challange.

    • To remove the space below the images you can use display: block on the image tag itself and if you want to learn more about why this happening you can read this article Removing White Space Below Image Elements
    • To fix the accessibility issues its better to use main tag instead of the div tag as the card container

    Hope this helps , Happy Coding 😊😊.

    0
  • Gareth•410
    @Gareth-MooreSubmitted over 2 years ago

    I didn't suffer too much on this one. I'm interested in feedback regarding my JS if you'd be so damned kind!

    As usual, any feedback would be extremely appreciated as it's like spinach is to Pop-Eye - it buffs up my forearms... which makes typing a breeze!

    Also I'm putting together a small community of beginner front end devs. Feel free to join me on Discord. DM me for the link!

    Rate my rating card ;) JS HTML and CSS + loads of patience!

    1
    Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Amazing job 👏👏, i have a question how did you manage to get the final code looking so close to the design.

    if there are any tools you use to do this ? , can you please share it with me i will be very happy.

    i also have a small suggestion if you can make the buttons and rate numbers a cursor : pointer; to make it obvious that these are clickable elements.

    have a good day.

    0
  • Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Hello David , Congratulations on this project , amazing work 👏 👏

    i have some suggestions which may improve your project to be more close to the design :

    1. decrease the padding on the bottom of the card
    2. add box-shadow arround the whole card

    i hope these suggestions help you , keep the good work good luck.

    0
  • Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Nice job Babacar 👏👏 , but there is a problem in the the thanks card illustration image to fix it you should use relative path of the image as

    src="images/illustration-thank-you.svg"

    by just removing the forward slash. keep the good work

    Marked as helpful
    0
  • Aaron Currie•100
    @AaronCurrieSubmitted over 2 years ago

    This was my first project creating a fully interactive web app. My main goal was to practice using JS and to get a fully functioning app.

    I would say my JS code is much better than the Accordion challenge I did a few months back but I still know I can improve my JS to minimize the amount of code I am writing.

    Tip calculator app

    1
    Ahmed Abdelgawad•315
    @ahmedAgawadPosted over 2 years ago

    Great job Aaron , i have small suggestion which is removing the arrows from the input fields using this code

    input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
    0
  • Ahmed Abdelgawad•315
    @ahmedAgawadPosted about 3 years ago

    Great work ,

    but i think you should use a localStorage in javascript so the theme that the user enable it will be saved for the next time

    0
  • Ahmed Abdelgawad•315
    @ahmedAgawadPosted about 3 years ago

    Nice work, You just need to increase the width of the card and wrap the music symbol image and the annual plan price inside the same div to make them look like the design

    0