Skip to content
OverviewSolutions
47
Comments
37
Alex 🤸🏻‍♂️
@sksksk2024

All comments

  • Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 3 days ago

    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
    0
  • Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 12 days ago

    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! 🔥🔥🔥

    0
  • Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 13 days ago

    You are fast on getting good quality projects done!! Keep it up! 🔥🔥🔥

    1
  • Yusuf Jamal•240
    @Jamal-DigitalSubmitted 17 days ago
    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,020
    @sksksk2024Posted 17 days ago

    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
    1
  • Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 20 days ago

    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
    2
  • nowshadjaman21•80
    @nowshadjaman21Submitted about 2 months ago
    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,020
    @sksksk2024Posted about 2 months ago

    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
    1
  • Zup•1,350
    @xup60521Submitted 2 months ago
    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

    1
    Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 2 months ago

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

    0
  • Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 2 months ago

    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
    0
  • Er-Carl Abban•220
    @KharlAbbanSubmitted 6 months ago
    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

    1
    Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 2 months ago

    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! :)

    0
  • Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 3 months ago

    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!!🔥🔥🔥

    0
  • Manish Tiwari•410
    @manishtmtmtSubmitted 6 months ago
    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

    1
    Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 3 months ago

    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 ;) )!! 🔥🔥🔥

    0
  • HrishiD89•50
    @HrishiD89Submitted 5 months ago
    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

    1
    Alex 🤸🏻‍♂️•1,020
    @sksksk2024Posted 3 months ago

    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! 🔥🔥

    0