Skip to content
OverviewSolutions
16
Comments
10

Ali Mahmoud

@AliMahmoud21Egypt, Mansoura, Meet Ghorab390 points

I am Ali Mahmoud. Over the past year, I have immersed myself in the realm of web development. My proficiency spans a comprehensive array of languages and frameworks, including HTML, CSS, JavaScript, Sass, React JS, Bootstrap 5, Tailwind CSS, Git, and GitHub.

I’m currently learning...

JS Data Structure and Algorithm & Problem Solving.

Latest solutions

View more solutions

Latest comments

  • Ali Mahmoud•390
    @AliMahmoud21

    Hi, candicoded, I'll give some tips to make your challenge better.

    • Reduce the padding between the rating number to make it fit the card
    • Make an active background color on the rating numbers so that when I click any of the colors appears. It's so simple just make an active class to the rating nums With the color then add it with js 'classList.add('active')'.
    • When I click submit it shows me the thank Container try to make a js code that avoids sending an empty rating. just let the submit button work only when any of the rating nums chosen.
    Marked as helpful
  • Ali Mahmoud•390
    @AliMahmoud21

    Hi Shrouq,

    • I recommend you use the following code in your document file to center the card:

    • body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem; }

    • Also, you must use "max-width" with the image to make it fit the card content, as well you gotta do some edits on the heading and paragraph.

    Lastly, make sure you use the semantics of Html in your document file. I hope this helps you...

    Marked as helpful
  • Ali Mahmoud•390
    @AliMahmoud21

    Hi Bezies, I suggest you use the next code to center the card instead of using the transform: body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 1.5rem; }

    Marked as helpful
  • Ali Mahmoud•390
    @AliMahmoud21

    Hi Fatema, I'm going to give you some tips, maybe it'll help you and make your design looks better. you can apply "hr" after every news and use the hover effect on the headings it'll be as the design, also you can apply hover on the headings section in your format. also, you can use "max-width" with the news section or you can use the way you want to divide them into two sections. try to reduce the width of the images in the last section by applying "max-width" on the images. one last thing, there's an error in your code because of an "img" tag in the ul section, you must solve it. the design is too good and I like the responsive part. I hope this was helpful and accept from a newbie :)

    Marked as helpful
  • Ali Mahmoud•390
    @AliMahmoud21

    Hi Onome, Apply a background color for the page and white background for the card it'll make it better. Good design, keep up the good work...

  • Ali Mahmoud•390
    @AliMahmoud21

    Hi Aymen. I recommend you Applying "margin-top" for the heading section, also you can add "text-align:center", it'll make the design looks better. I hope this was helpful.

    Marked as helpful
View more comments