Hello Mah,

First off, I want to applaud your effort and enthusiasm for this project. It's clear that you're dedicated to learning and pushing your coding skills forward, which is truly commendable. I took a close look at your code project, and I'd like to share some feedback with you to help you grow even more as a developer.

Root Directory :

• As we are using Javascript, we should always follow the “camelCase” naming convention or “lowercase” for folders,
  We use “PascalCase” for JS Classes and React Components, we should not mix up naming styles, read more about the naming convention.
  https://stackoverflow.com/questions/921133/javascript-naming-conventions#:~:text=You%20can%20follow%20the%20Google,JavaScript%20Style%20Guides%20And%20Beautifiers.

• For example the files “Srart.html” srart with r? ((PLEASE take the time to fix the typos when you are naming the files))

Srart.html => index.html
start.js => script.js
start.css => style.css

Taking a moment to tidy up the file names can have a big impact. The small details like correcting typos in file names make a world of difference. Just imagine how much smoother it'll be for everyone (including yourself) to navigate your project when the names make sense. Remember, these seemingly minor adjustments add up to a more professional and organized project.

• There are many unnecessary files in the root directory which that should be cleaned up or moved to another folder, for example :
  Create a new folder in the root directory called assets and move the following files and folders into it :

wallpaperflare.com_wallpaper(1).jpg 
images
IconBackground

• You should not include the slides presentation in your coding repository, this is an unrelated folder in your project and it is misleading. for example, use Google Drive to store your various types of data.

• having just one HTML file is recommended. Instead of having multiple .js and .css files with hasty names, strive for consistency and clarity in naming, using appropriate conventions. This practice will facilitate collaboration with other developers in the future.
  For example, html.html, js.js, and css.css, this is all bad practice… Sometimes Uppercase sometimes Lowercase… etc, also not good.

• Why the start.js file is redirecting to another html file? What is the purpose of doing this extra step?

puzzle.js file :

There is a lack of using classes and OOP. Actually the file is a mixture of functional and classes!! I don’t know why.
It's great that you're experimenting with different techniques, but mixing functional and class-based code might make the project harder to understand and maintain. Consider grouping related functionalities into classes and methods, utilizing the power of OOP. This will make your codebase more organized and comprehensible.
For example,
Creating the tiles :

for (let r = 0; r < rows; r++) {
    for (let c = 0; c < columns; c++) {
      //<img>
      let tile = document.createElement("img");

      if ((tile.src = "../IconBackground/blank2.jpg")) {
        tile.style.opacity = "0.5";
      }

      tile.addEventListener("dragstart", dragStart);
      tile.addEventListener("dragover", dragOver);
      tile.addEventListener("dragenter", dragEnter);
      tile.addEventListener("dragleave", dragLeave);
      tile.addEventListener("drop", dragDrop);
      tile.addEventListener("dragend", dragEnd);

      document.getElementById("board").append(tile);
    }
  }

Creating the pieces :

 let pieces = [];
  for (let i = 1; i <= rows * columns; i++) {
    pieces.push(i.toString());
  }
  pieces.reverse();
  for (let i = 0; i < pieces.length; i++) {
    let j = Math.floor(Math.random() * pieces.length);

    let tmp = pieces[i];
    pieces[i] = pieces[j];
    pieces[j] = tmp;
  }

  for (let i = 0; i < pieces.length; i++) {
    let tile = document.createElement("img");
    tile.src = "../images/" + pieces[i] + ".jpg";

    tile.addEventListener("dragstart", dragStart);
    tile.addEventListener("dragover", dragOver);
    tile.addEventListener("dragenter", dragEnter);
    tile.addEventListener("dragleave", dragLeave);
    tile.addEventListener("drop", dragDrop);
    tile.addEventListener("dragend", dragEnd);

    document.getElementById("gall").append(tile);
  }
};

All the rest of the functions can be turned into methods inside the classes
Using the this keyword inside an Object and not Class, why? Hope it wasnt just copy and paste :

function CustomAlert(message, title) {
  console.log("triggered");
  this.alert = function (message, title) {
  …

Why there is a function named “wanna”? what is the meaning of this name?
The following line of code was beyond my understanding, can you please explain? What is this if statement all about? What is this condition/assignment or mix of both?

 if ((tile.src = "../IconBackground/blank2.jpg")) {
        tile.style.opacity = "0.5";
 }

Final Thoughts:

Your enthusiasm and ambition to learn advanced coding are truly inspiring. You're on the right path, and with a little more attention to detail and organization, your projects will shine even brighter. Don't let the rush get in the way of your potential. Take the time to refine your work, and I'm certain you'll see incredible results. Keep up the fantastic work, and remember that growth takes time. Your dedication will undoubtedly lead you to become a standout developer with a remarkable eye for detail. Stay curious and keep coding it's your passion and commitment that will drive you to excel.