Skip to content
OverviewSolutions
70
Comments
43
Alex 🤸đŸģ‍♂ī¸
@sksksk2024

All comments

  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hello, @khaduj03! First, congrats on staying consistent with web development — keep it up, and you'll see great results! Now, after reviewing your project, here are a few adjustments to make it more user-friendly:

    1. Place all decorative images (like the line shapes) behind the content using z-index to prevent them from overlapping and blocking access to the content.
    2. Ensure the mobile menu is visible for all screen widths (I couldn’t see the menu between 768px and 1024px). Use a higher z-index for the close (X) button to bring it to the front.
    3. For the mobile menu, make it full-screen and apply overflow-clip (not hidden, as hidden can cause random issues) to prevent scrolling and improve the layout.
    4. Align the items with align-items: center or items-center if you're using Tailwind CSS to create a more polished and user-friendly experience.

    Lastly, keep experimenting and enjoying the journey. With more people entering the field, strong projects will help you stand out. You don't need to change this website, but applying these tips to future projects will make you a better web dev. Have fun along the way! đŸ”Ĩ

    Marked as helpful
  • Essosolim01â€ĸ20
    @Essosolim01
    What specific areas of your project would you like help with?

    j'aimerais que vous m'aidiez à propos de l'adaptions aux Êcrans de petites tailles

    Blog preview card test

    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Bonjour, @Essosolim01 !!! 👋

    flex dans le body et abandonner les marges dans la carte : cela rÊsoudra le problème. Voici quelques conseils utiles pour vous aider à pratiquer : Conseils en français pour amÊliorer les styles d'un projet web

    1. Utilisation de flexbox dans le body

    Pour un design adaptable et fluide, le système de flexbox est idÊal. Voici comment configurer votre body avec flex pour aligner les ÊlÊments de manière optimale :

    body {
  display: flex;
  flex-direction: column; /* Alignement vertical */
  justify-content: center; /* Centrer les ÊlÊments verticalement */
  align-items: center; /* Centrer les ÊlÊments horizontalement */
  min-height: 100vh; /* S'adapte à la hauteur de l'Êcran */
  margin: 0; /* Évitez l'utilisation de `margin` ici */
}
    1. Éviter l'utilisation de margin pour la mise en page gÊnÊrale

    Au lieu d'utiliser des marges fixes, prÊfÊrez :

    padding pour un espacement interne.
gap dans un container flex ou grid pour un espacement fluide entre les ÊlÊments.

    3. Abandonner les hauteurs fixes sur les cartes

    Permettre aux cartes de s’ajuster automatiquement amÊliore leur adaptation au contenu et à la taille des Êcrans. Exemple pour une carte adaptable :

    .card {
  width: 90%; /* Largeur adaptable */
  max-width: 300px; /* Largeur maximale */
  height: auto; /* Hauteur automatique */
  padding: 20px; /* Espacement interne */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre pour un style plus doux */
  border-radius: 10px; /* Coins arrondis */
}
    1. Adaptation aux Êcrans de petites tailles

    Les media queries permettent d’ajuster les styles en fonction de la largeur de l’Êcran. Exemple :

    @media (max-width: 768px) {
  .card {
    width: 100%; /* Utiliser tout l'espace disponible */
    padding: 15px; /* RÊduction de l'espacement interne */
  }

  body {
    padding: 10px; /* Ajouter de l'espace autour */
  }
}

    1. Autres conseils pratiques

      Typographie : Utilisez des unitÊs relatives comme em ou rem pour une meilleure adaptation. Espacement : PrÊfÊrez gap dans un container flex ou grid pour espacer les ÊlÊments enfants. Images : Assurez-vous que les images soient fluides avec :

        img {
      max-width: 100%;
      height: auto;
    }

    Si vous avez besoin de plus d’aide ou d’exemples concrets, n’hÊsitez pas à demander ! 😊đŸ”Ĩ

    Marked as helpful
  • P
    Justin Greenâ€ĸ2,940
    @jgreen721
    What are you most proud of, and what would you do differently next time?

    Some of the shadow/layering details to enhance a more cartoon-y effect on the UI was good practice/something worth remembering

    The styling got a little mess, between Tailwind, custom CSS and some framer-motion, it'd be worth tidying that up/maybe improving.

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

    Again, the styling got a little away from me as far as clean organized setup. Intro/exit animations on the different could be done better, in that there aren't any exit animations as I found Next to operate differently enough to not really accommodate framer-motions easy setup with plain React.

    The audio btn has a bug to where first click doesn't toggle the audio off but after that its on track. Again, will probably go back and clean that up.

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

    It could just benefit with a good code cleanup between the styling and also the components folder structure. Still haven't quite clicked into a natural rhythm with Next, for whatever reason. lol. Feedback and suggestions definitely all welcomed and appreciated!

    Responive animated solution to Hangman

    2
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    đŸ”Ĩ Great job on creating a responsive and animated solution for Hangman! The animations are modern and engaging, which makes the game feel fresh and exciting. I also love how your website has a playful, game-like aesthetic—it's inviting and fun!

    One thing to note: after finishing a round, the solution is visible for a moment, which makes it easy to cheat if someone is paying attention. It might be worth tweaking this to prevent players from getting an unfair advantage.

    Keep up the fantastic work! 🎮✨

    Marked as helpful
  • Koushik9010â€ĸ100
    @Koushik9010
    What specific areas of your project would you like help with?

    I haven’t done the JS part yet, as I’m still learning HTML and CSS. I will add the JS part once I’ve learned more JavaScript, and will update the code accordingly.

    Interactive rating component using HTML and CSS (no js)

    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hello, @Koushik9010! 👋

    I’d recommend checking out my project repo here: https://github.com/sksksk2024/Rating-component. Feel free to analyze how I implemented the JavaScript functionality—I’ve added some interesting details you might find helpful!

    If you have any questions or need clarification, don’t hesitate to reach out. I’d be happy to help. Good luck with your project!

    Marked as helpful
  • knznsmnâ€ĸ50
    @knznsmn
    What are you most proud of, and what would you do differently next time?

    It's nice to have this kind of platform where I can practice and force to learn new and relevant/ things like a real project.

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

    I had difficulty with the responsiveness of the site, but I think I am starting to get a better understanding of it.

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

    I would love it if the masters will point me where I am wrong and where I can be better.

    Responsive QR Code

    2
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Your master is always here to help, Mr. Penguin! 🐧

    First off, congratulations on completing your first project! That’s a huge achievement, and you’ve done a fantastic job. I really like how you’ve centered the design—it’s clean and visually appealing.

    For a couple of improvements, here’s what I’d suggest:

    In the body element, try adding: padding: 1rem;. This will create some space around your content so it doesn’t stick to the screen edges. For the card itself, replace width: 375px; with max-width: 375px;. Using max-width ensures that the card becomes more flexible and adapts gracefully to smaller screens.

    These tweaks will enhance the responsiveness and overall look of your project.

    Once again, amazing work! Keep up the great effort, and I’m sure you’ll continue to create even better projects. Stay consistent, keep learning, and most importantly—have fun!đŸ”ĨđŸ”ĨđŸ”Ĩ

    Marked as helpful
  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hi @wajidkhan2! 👋👋

    I just wanted to say that your solution for Interactive card details form is absolutely amazing! Your attention to detail and the overall design really inspired me while working on my own project. You’ve done such a great job with the layout and functionality—it’s impressive! đŸ”Ĩ

    As I was looking at your solution, I noticed that the form could benefit from a bit of a tweak. You might consider adding a max-width to the form to prevent it from stretching too much on larger screens. It would help keep it more centered and visually cohesive. Just a small suggestion that I thought might enhance your already fantastic work!📝

    Thanks again for sharing your creativity with the community—it’s incredibly motivating to see such high-quality solutions. :))

    Best regards, @sksksk

    Marked as helpful
  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hello, @zoetlam ! 👋👋 I see that you forgot to put the favicon, unlike your previous projects. I honestly like your hover effect on the box shadow. Keep it up and keep improving! đŸ”ĨđŸ”ĨđŸ”Ĩ

    Marked as helpful
  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hello, @Ambogo2 !!! 👋

    I see that you don't have the big image showing up on your website. One thing that might help: try creating an assets file and include the image from your downloaded zip file from this project. Don't forget, to get it responsive, you can set up the max-width to 100% like this:

    img {
   max-width: 100%;
}

    If you have further difficulties, we can reach out!! 👍

    Wish you luck and have fun coding! đŸ”ĨđŸ”ĨđŸ”Ĩ

  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    You are fast on getting good quality projects done!! Keep it up! đŸ”ĨđŸ”ĨđŸ”Ĩ

  • Yusuf Jamalâ€ĸ240
    @Jamal-Digital
    What are you most proud of, and what would you do differently next time?

    I can code javascript language now which i am proud of

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

    how can i change javascript code for mobile and desktop separately

    Article preview component

    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hellow, @Jamal-Digital !!! :D

    You can use window.innerWidth to check the screen width and adapt your JavaScript code for mobile and desktop experiences separately. Here’s how you might approach it:

    if (window.innerWidth < 768) {
  // Code for mobile view
  console.log("Mobile view");
} else {
  // Code for desktop view
  console.log("Desktop view");
}

    By using a conditional like this, you can tailor specific actions based on screen width. The value 768 is a common breakpoint, but you can adjust it to fit the layout of your site. It’s a simple and effective solution for making your JavaScript responsive!

    If you need the layout to adjust dynamically as the window resizes, you might also consider listening for the resize event:

    window.addEventListener("resize", function() {
  if (window.innerWidth < 768) {
    // Code for mobile view
    console.log("Mobile view");
  } else {
    // Code for desktop view
    console.log("Desktop view");
  }
});

    Keep it up and have fun coding!!!

    Marked as helpful
  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    I also have a suggestion to improve your website, @xStephx! 📈🚀

    If you haven’t explored accessibility yet, it’s really important to make your site accessible for people with disabilities, such as visually impaired(👨đŸŧ‍đŸĻ¯) or hearing-impaired(🧏) individuals. Using alt attributes for images and aria-labels for interactive elements can make your site easier for everyone to navigate and understand. It’s a great way to broaden your audience and make the user experience inclusive!

    To check your site’s accessibility, try the WAVE extension (available for Firefox, Chrome, etc.). It’ll show you where improvements can be made. Feel free to reach out if you have any questions or need guidance! 😎👌đŸ”Ĩ

    Thanks for supporting my work!🤩 And just out of curiosity—how do you get so many likes and appreciation on each challenge? 💀

    Marked as helpful
  • nowshadjaman21â€ĸ80
    @nowshadjaman21
    What are you most proud of, and what would you do differently next time?

    I would add font family next time. i am still struggling to add font family.

    Perfume Card

    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hellow, @nowshadjaman21!!! Actually adding the font family is not that hard! I personally add the family font link in html. Let's say you search for the Rubik font: search it on the browser, click get font and, right after, get embed code. Copy the one that it says to add in your head of your html. And then put it in your html, like this:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/svg+xml" href="./../../01-variables-data/image/depositphotos_319424414-stock-photo-palacio-bellas-artes-palace-fine.webp" />
  <!-- Google Fonts(the code that you have copied) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
  <!--End of google fonts -->
  <title>Break and Continue</title>
</head>

    Hope it helps and keep it up, bud ;))

    Marked as helpful
  • Zupâ€ĸ1,370
    @xup60521
    What are you most proud of, and what would you do differently next time?

    I used gsap to implement two animations. First is number increment, and second is summary blocks entrance animation.

    Both are easy to do with this animation library. When setting up the result value, the only thing we need to do is call gsap.to function.

    gsap.to("#result", {
    innerText: "76",
    duration: 1,
    ease: "power1.inOut",
    snap: { innerText: 1 },
});

    Whenever an user open this page, the animation would automatically play.

    Apart from that, I also add another animation. This one has a twist, and we need to take advantage of gsap’s helper function.

    const summaryBlocks = gsap.utils.toArray(".summary-block");

    By doing so, summaryBlocks.forEach can apply multiple GSAP animation to each component at once.

    summaryBlocks.forEach((summaryBlock, index) =&gt; {
    gsap.fromTo(
        summaryBlock,
        {
            opacity: 0,
            y: 10,
        },
        {
            opacity: 1,
            y: 0,
            ease: "power1.out",
            duration: 0.5,
            delay: 0.1 * index + 0.225,
        }
    );
});

    When an user enter this website, these elements fade in sequentially.

    gsap number increment animation

    #gsap#tailwind-css#vite#typescript
    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Yap, I aggree, your animation is nice, @xup60521 !! Keep it up!! ;)

  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Your code is fire!! Love everything about your project!! 🤩

    But still, you forgot to put the favicon in the head of your html ;)

    Keep it up and take care!!! đŸ”ĨđŸ”ĨđŸ”Ĩ

    Marked as helpful
  • Er-Carl Abbanâ€ĸ220
    @KharlAbban
    What are you most proud of, and what would you do differently next time?

    I am most proud of having completed this challenge. Next time, I will probably do more research and understand how others think about their solutions.

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

    React Reducer, and the hidden complexity of this challenge.

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

    Planning the solution to the challenge and implementing it.

    Amazing Interactive Comments Mini App with ReactJS

    #accessibility#react#pure-css
    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    What is this ;( -> maybe Ik what you were trying to do but still publishing here and not delete it <-

    And It doesn't work. Either way, keep it up! :)

  • Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hellow, @Javieer57 ! 👋👋

    Very solid project you've got here. I like the organisation of everything and making usage of tailwind.config variables. ⭐

    Keep it up and take care!!đŸ”ĨđŸ”ĨđŸ”Ĩ

  • Manish Tiwariâ€ĸ410
    @manishtmtmt
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing features like fetching data from the API and displaying it in the UI, along with functionalities such as theme toggling, filtering, searching, and pagination. These aspects demonstrate my ability to handle complex tasks within the project. For the next iteration, I would explore different tech stacks like Next.js to broaden my skill set and gain insights into alternative approaches to solving similar problems.

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

    One of the main challenges I faced was integrating the search and filter functionalities seamlessly. Ensuring that they worked together without interfering with each other required careful management of state and logic. To overcome this, I meticulously structured my code, ensuring clear separation of concerns and implementing robust error handling. Through iterative testing and debugging, I was able to resolve the issues and achieve the desired functionality.

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

    While I've successfully implemented the core functionalities of the project, I would appreciate guidance on optimizing performance and adhering to best practices, particularly in terms of code structure and organization. Additionally, feedback on design and user experience aspects would be valuable for further refinement of the project.

    Rest Countries API with Theme Switcher

    #axios#react#tailwind-css#typescript#vite
    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Hellow, @manishtmtmt !! 👋👋

    All you've done with the interactions, looking and functionality of the site is great. Also, your code is not that long and It can be readable, even though you didn't separate the content in more separate files. 🌟

    Some mentions to make your project more complete is to add a path for the singular country, so that if you click at one of them, just that country to pop up in the page(as the design from this challange looks). And work more in the user readability: for me(personally) I don't like to see the "Search" word appear above the placeholder "Search for a country..." or "Filter by region" and below the name of the region(and the fonts too in these cases, make them bold and bigger)! 📝

    Hope It help and keep it up( with the tutorials too ;) )!! đŸ”ĨđŸ”ĨđŸ”Ĩ

  • HrishiD89â€ĸ50
    @HrishiD89
    What are you most proud of, and what would you do differently next time?

    The thing i am most proud of is that i completed this project patiently, dividing part by part and not jumping and doing everything at a same time ,it took be around 2 days to complete the project which for me is the great deal because i don't have patience either i would jump to doing other things or drop the project.

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

    I encountered many challenges, like

    • how to change the default radio button colour from blue to lime (which later found out have to hide its appearance and make custum style )
    • How to set the colour of the fields to focus -how to use useContext hook
    • and many more in tailwind CSS, as i only did one tailwind CSS crash course before it
    What specific areas of your project would you like help with?

    I would like help in the design part with tailwind CSS. i am still struggling with responsiveness width, and height

    Mortgage Calculator using React and TailwindCSS

    #react#tailwind-css
    1
    Alex 🤸đŸģ‍♂ī¸â€ĸ1,710
    @sksksk2024

    Firstly, I hope you are good and not giving up on your web development path, @HrishiD89(2 months of not publishing any site here)!! ⭐

    Secondly, I love how your structure is and the site looks solid! I see that you've encounter some difficulties with your tailwind CSS design, and based on my experience, I found that combining it with scss/sass or excluding the styles in a different file(importing it where you need) can be very helpful. I recommend the second aproach more. Ex: Let's say you have a cart.jsx file. You should put this import:

    //cart.jsx
import styles from "./cart.module.css";

    In order to have access to the specified file(I recommend to put them together in a folder - Cart)

    //cart.module.css
.cartContainer {
  @apply flex flex-column;
}

.heading {
  @apply red-500;
}

    Hope it gives you a better perspective! Be patient and take care! đŸ”ĨđŸ”Ĩ