Skip to content
OverviewSolutions
6
Comments
10
P
Khalid Anejjar
@khalidanejjar

All comments

  • Carlos Al•200
    @crsaeleSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    One of my greatest accomplishments was successfully authoring the JavaScript code responsible for implementing form validation and DOM manipulation, which enabled the display of a success state upon completion.

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

    The project presented several challenges, including crafting accessible HTML, optimizing CSS for responsiveness across different screen sizes, and overcoming the complexities of JavaScript implementation. I successfully addressed these challenges through careful planning, testing, and refinement.

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

    Any feedback is welcome, thank you so much.

    Newsletter sign-up form with success msg built with CSS and Javascript

    1
    P
    Khalid Anejjar•180
    @khalidanejjarPosted 3 months ago

    Good!!

    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 3 months ago

    Hii!! I am not a pro but here is my feedback. your project effectively uses semantic HTML, ensuring good structure and accessibility. It is mobile responsive too, though adding comments would enhance readability for others. The code is well-structured. Great work overall! Good luck.

    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 4 months ago

    I wanted to say your work is good! The design is clean, the code is well-structured, and it performs good on both desktop and mobile. However, I noticed a minor issue: the website isn't as responsive on tablets as it is on other devices. Keep up the good work!

    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 4 months ago

    Perfect. clean code

    0
  • Snigdha Sukun•550
    @snigdha-sukunSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of using :nth-child() to access & style each class element individually instead of creating id just to style each element:

    .card:nth-child(1) {
    border-top: 0.3em solid var(--cyan);
}

.card:nth-child(2) {
    border-top: 0.3em solid var(--red);
}

.card:nth-child(3) {
    border-top: 0.3em solid var(--orange);
}

.card:nth-child(4) {
    border-top: 0.3em solid var(--blue);
}
    What challenges did you encounter, and how did you overcome them?

    I faced challenge to create layout according to the design for the desktop. I practiced the CSS Grid Fundamentals using the Grid Garden game.

    main {
    display: grid;
}

@media (min-width: 28em) {
    main {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 5% 35% 5% 35% 5%;
    }

    .card {
        width: 22em;
    }

    .card:nth-child(1) {
    grid-column-start: 2;
    grid-row-start: 3;
    align-self: center;
}

 .card:nth-child(2) {
    grid-column-start: 3;
    grid-row-start: 2;
    align-self: end;
}
.card:nth-child(3) {
    grid-column-start: 3;
    grid-row-start: 4;
    align-self: start;
}
.card:nth-child(4) {
    grid-column-start: 4;
    grid-row-start: 3;
    align-self: center;
}
}
    What specific areas of your project would you like help with?

    Responsive CSS techniques

    Four card feature

    2
    P
    Khalid Anejjar•180
    @khalidanejjarPosted 4 months ago

    Hi! I like the way you solve this problem. Thanks for sharing your approach and the source of practicing your CSS Grid. Just a small remarque, I heard that it is better to use classes for accessing and styling elements and an id for js. Good luck in your learning journey.

    Marked as helpful
    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 4 months ago

    Everything is good except the layout. it should be centered in the middle.

    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 4 months ago

    Perfect

    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 4 months ago

    Good!!

    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 4 months ago

    Everything looks good! Probably the container needs a little margin to the top. Besides that, it is good.

    Marked as helpful
    0
  • P
    Khalid Anejjar•180
    @khalidanejjarPosted 5 months ago

    -.card img: padding: 0rem,8rem; values should not be separated by comma > padding: 0 -@media (max-width: 768px) : missing a closing } bracket line 59.

    • h6, p : background-color: white; is not necessary since card is white.
    Marked as helpful
    0