Skip to content
OverviewSolutions
20
Comments
67
Djamel1133
@Djamel1133

All comments

  • Djamel1133•880
    @Djamel1133Submitted about 16 hours ago
    What are you most proud of, and what would you do differently next time?

    not proud, but happy to keep practicing and dealing with different difficulties, both in terms of programming and design.

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

    Dealing with different elements (progress bar, toggle button) to udpate data but there are solid js documentation.

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

    How can I handle window resizing and get the correct position of the progress indicator? Any help you can offer would be greatly appreciated.

    Responsive interactive pricing component with progress bar

    3
    Djamel1133•880
    @Djamel1133Posted about 3 hours ago

    Hi, @KapteynUniverse

    I added the line of code you recommended and, bam, it works! I no longer have any issues with window resizing and I don’t need to handle the window resize event. Very clever, it was just a matter of updating the position of my slider.

    I've been waiting for your comment for a while, and you came at the right moment. Thanks a lot, for me and for the community. You are a valuable help 🙏🙏🙏.

    0
  • Yacoub AlDweik•970
    @YacoubDweikSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I don't like Tailwind or Bootstrap or any other useless CSS framework

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

    I don't like Tailwind or Bootstrap or any other useless CSS framework x2

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

    I don't like Tailwind or Bootstrap or any other useless CSS framework x3

    Notifications page Using Tailwind

    4
    Djamel1133•880
    @Djamel1133Posted about 15 hours ago

    Good luck 😉

    Marked as helpful
    1
  • Djamel1133•880
    @Djamel1133Posted about 16 hours ago

    Hi, Mohammed,

    I'm not going to comment on your code (I am a newbie), but I advise you to start with easier challenges to master fundamental concepts like Flexbox, Grid, responsiveness, units (rem, em), sizes with vw, vh, or percentages (60%, 80%, etc.), semantic HTML... and then gradually move forward. This might not be the feedback you were expecting, but I think by doing that you'll benefit more and advance quickly.

    Salam

    0
  • Yacoub AlDweik•970
    @YacoubDweikSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I don't like Tailwind or Bootstrap or any other useless CSS framework

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

    I don't like Tailwind or Bootstrap or any other useless CSS framework x2

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

    I don't like Tailwind or Bootstrap or any other useless CSS framework x3

    Notifications page Using Tailwind

    4
    Djamel1133•880
    @Djamel1133Posted about 22 hours ago
    This comment was deleted about 15 hours ago
    1
  • Djamel1133•880
    @Djamel1133Posted 1 day ago

    Hi again,

    What I mean is that when downsizing your solution, there isn't enough space for three cards. You can add media queries to address this issue and adapt your solution for various device sizes (desktop, tablet, mobile).

    There are excellent resources available online for this. Please check:

    Keep up the good work, and see you in the next challenge.

    0
  • Djamel1133•880
    @Djamel1133Submitted 7 days ago
    What are you most proud of, and what would you do differently next time?

    Not proud but beginning to code with JavaScript. I handle one event for both buttons (previous and next) using a custom data attribute (data-direction) to store additional information about an element (in this case, the tag). I know I don't need it for this challenge, but it will be helpful if I have more than two authors.

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

    Mobile-first doesn't always work. In this case, I spent a lot of time trying to implement this approach, but ultimately, I ended up creating two styles and organizing my code accordingly using SASS

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

    I’m always open to any advice and comments...thank you all 😋

    Responsive testimonials slider

    2
    Djamel1133•880
    @Djamel1133Posted 3 days ago

    Hi, I am happy that you're doing well.

    For MFA, I learned that lesson by the hard way... Regarding the footer, you will not seen it, just to make you happy...

    Feel free to give any feedback or advices.Thanks again... Keep in touch.

    1
  • Djamel1133•880
    @Djamel1133Submitted 7 days ago
    What are you most proud of, and what would you do differently next time?

    Not proud, but I'm happy to have finished this challenge (not hard) quickly and to have gotten hands-on experience with my first API using js.

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

    I didn't want to use Flexbox (nor reset), but I think (though I'm not sure) it was necessary to center the divider.

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

    I am open to any comments.

    Responsive advice-generator-app API

    2
    Djamel1133•880
    @Djamel1133Posted 3 days ago

    Thanks a lot Bro!!! I will keep it in my mind ... any other suggestions or feedback are welcome. Thank you again.

    2
  • Djamel1133•880
    @Djamel1133Posted 4 days ago

    Hi, great job, you are making enormous progress.

    However, there are always small adjustments to be made. One of the challenges in these tasks is to take responsiveness into account.

    For this, you can use breakpoints with media queries to adjust your design for different configurations. In your case, you can add this (assuming body is your main container):

    @media (max-width: 768px) {
  body {
    flex-direction: column;
    ...
  }
}

    to arrange your cards vertically. You have to determine the perfect size, which in this example is 768px.

    Keep up the good work and happy coding!

    Marked as helpful
    0
  • Djamel1133•880
    @Djamel1133Submitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    Proud and I admit it : I'm falling in love with the elegance of JavaScript.

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

    I have to check versions of chart.js and I have some improvements to make later.

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

    Any comments are welcome, as usual.

    Expenses chart component with chart.js

    2
    Djamel1133•880
    @Djamel1133Posted 4 days ago

    Okay... thank you, mister (and master). I will work on this... anyway, I have some adjustments to make. Thank you again, I really appreciate your encouragement.

    1
  • Djamel1133•880
    @Djamel1133Posted 5 days ago

    Hi, good job, you're doing well!

    Juste one small thing to consider:

    • Fixing the height with .container { max-height: 55vh; } can cause issues. It's better not to fix it because, by default, the container wraps the content (fills content).

    Keep learning and happy coding!

    Marked as helpful
    0
  • Daniyal Abbassi Khervi•70
    @daniyal-abbassiSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    I actually search for different share buttons and see so much stuff there!

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

    I find it very very very difficult to make that share button responsive because I set it to {position: absolute;} so when I changed the screen size, it would stay in that place which I already set it to. That was very hard. I hope in the future I do better!

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

    make that share button more responsive!

    Article Preview Half Responsive :)

    2
    Djamel1133•880
    @Djamel1133Posted 5 days ago

    Hi, good job on tackling this tricky challenge.

    There is always room for improvement, even for expert developers:

    • Using HTML semantic tags like <main> is important. Also, using heading elements (<h1>, <h2>, etc.) in the correct order without skipping one ensures a better content hierarchy.

    • Using relative units (rem, em, %, etc.) instead of absolute ones can guarantee better responsiveness and more flexibility. You can read more about relative units here.

    Keep up the excellent work and happy coding!

    0
  • Djamel1133•880
    @Djamel1133Posted 5 days ago

    Hi,

    Great job! Your spacing, aligning, and responsiveness are almost perfect. Just a few small things:

    • Your breakpoint (max-width: 768px) should be, in my opinion, a little larger. When downsizing, a horizontal scroll bar appears at certain sizes. You should define your breakpoint at that size.

    • I know that 768px is a common breakpoint (Mobile: 320px — 480px, Tablets and small screens: 481px — 768px, Laptops and small desktops: 769px — 1024px, etc.), but instead of targeting specific device screen sizes, it's more effective to create breakpoints based on the needs of your design. This involves testing your design by adjusting the browser width and adding breakpoints where the design looks awkward or breaks. This approach ensures that your design is optimal for all devices, rather than just a few specific ones.

    • Using flexible layouts (in percentage, etc.) and relative units (rem, em, etc.) for font sizes and elements can ensure better adaptability across different screen sizes.

    Note: Don't look at my solution (it is very bad because I did it early before some friends advised me on this topic).

    One more thing: for your HTML tag elements, you jumped directly to <h2>. It's crucial (though not forbidden) to have <h1>, <h2>, and so on in sequence. Check your site with an HTML validator to ensure everything is correct.

    Keep up the excellent work and happy coding!

    Marked as helpful
    0