Alex 🤸🏻‍♂️

Latest comments

• 

  khaduj || خدوج•670

  @khaduj03Submitted 3 months ago

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

  Any feedback is appreciated

  

  insure-landing-page-master

  #react#tailwind-css

  1

  70
  

  Alex 🤸🏻‍♂️•1,630

  @sksksk2024Posted 2 months ago

  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

  0
• 

  Essosolim01•20

  @Essosolim01Submitted 2 months ago

  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

  10
  

  Alex 🤸🏻‍♂️•1,630

  @sksksk2024Posted 2 months ago

  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 */
  }
  

  2. É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 */
  }
  

  4. 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 */
    }
  }
  

  5. 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

  1
• 

  P

  Justin Green•2,860

  @jgreen721Submitted 8 months ago

  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

  1

  60
  

  Alex 🤸🏻‍♂️•1,630

  @sksksk2024Posted 4 months ago

  🔥 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

  1
• 

  Koushik9010•100

  @Koushik9010Submitted 4 months ago

  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

  50
  

  Alex 🤸🏻‍♂️•1,630

  @sksksk2024Posted 4 months ago

  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

  0
• 

  knznsmn•50

  @knznsmnSubmitted 4 months ago

  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

  60
  

  Alex 🤸🏻‍♂️•1,630

  @sksksk2024Posted 4 months ago

  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

  0
• 

  wajidkhan2•280

  @wajidkhan2Submitted 4 months ago

  

  Interactive card details form Vue

  1

  20
  

  Alex 🤸🏻‍♂️•1,630

  @sksksk2024Posted 4 months ago

  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

  0