Merhaba. Siz Products class'ınızın fetchProducts() fonksiyonunda asenkron bir işlem yapıyorsunuz. Bu nedenle siz console.log yaptığınız sırada henüz https://fakestoreapi.com/products adresine yaptığınız isteğe yanıt dönmemiş oluyor. Promise yardımıyla cevabın dönmesini beklemeli, ürünleri daha sonra yazdırmalısınız.

class Product {
    constructor(id, title, price, image, description, category) {
        this.id = id;
        this.title = title;
        this.image = new URL(image, import.meta.url);
        this.price = price;
        this.description = description;
        this.category = category;
    }
}

class Products {
    constructor () {
        this.products = []; // Kurucu fonksiyonlarda asenkron işlemlere izin verilmiyor.
    }
    fetchProducts() { // fetch() fonksiyonunu return etmem gerekiyor.
        return fetch('https://fakestoreapi.com/products').then(res => res.json()).then(json => {
            json.forEach(element => {
                this.products.push(new Product(element.id, element.title, element.price, element.description, element.category))
            });
        });
    }
}

const test = new Products();

new Promise(async function() { // fonksiyonumuz asenkron bir fonksiyon
    await test.fetchProducts(); // önce fetchProducts() fonksiyonunun sonuç dönmesini bekliyoruz.
    console.log(test.products); // sonra ürünleri konsola yazdırabiliyoruz.
});

Merhaba. Soru-cevap bölümünü kullanırken karşılaştığım önemli bir ihtiyaç var.
Biri benim adımı @ebykdrms diye etiketlediğinde bana bildirim gelmeli. Bir cevabımda anlaşılmayan bi'şey olduğunda kullanıcılar bunu bana ana soruya cevap olarak soruyorlar ve bana bildirim gelmediği için bu durumu kaçırıyorum. Böyle olunca kullanıcılar yeni sorularını boş yere yeni bir başlık açarak sormak zorunda kalıyorlar.
Eğer benim cevabıma karşılık yeni bir soru soracaklarsa bunu adımı etiketleyerek yapabilirler. Ben de bildirim aldığımda cevap verebilirim.

Kısacası, bir kullanıcı bir cevap yazarken veya cevap düzenlerken benim kullanıcı adımı etiketlerse bana bildirim gelmesi gerekiyor.

@ilkertuncer cevap doğruysa doğru cevap olarak işaretler misin? Bu soru Çözülmemiş Sorular başlığında listelenmesin.

Fotoğraf küçültme konusunda 4 tane başlık açmışsın. Cevap beklemelisin.
O konuda benim önerim foroğrafı front-end tarafında boyutlandırman ve ajax ile bu değeri PHP'ye göndermen.
9 gün önce açtığın Php ile veritabanına görsel yüklerken farklı 2 boyutta küçültülerek (croplanmadan) farklı iki klasöre ve veritabanına yüklenmesi başlığına fırsat bulursam bir cevap yazarım. Gerçi oraya zaten bir cevap yazmışım. 2 gün geçtiği için cevabımı düzenleyemem ama fırsat bulursam orada bahsettiğim yönteme göre yeni bir cevap gönderirim. Bu konuda tekrar tekrar başlık açmak yerine açtığın başlıktan cevap beklemelisin. Cevap gelene kadar internetten araştırabilirsin. Örneğin:
stackoverflow.com: php resize image on upload
stackoverflow.com: PHP upload and resize image
stackoverflow.com: Scale Image Using PHP and Maintaining Aspect Ratio
Bunlardan biri mutlaka işini görüyordur.

PHPMailer Örneği

Basit bir örnek paylaşıyorum.

PHPMailer Kütüphanesi

github.com/PHPMailer/PHPMailer

index.html

<div id="form">
    <input name="name" type="text" placeholder="Ad Soyad" />
    <input name="email" type="email" placeholder="E-posta" />
    <textarea name="message"></textarea>
    <button data-type="send-mail">Gönder</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="sendmail.js"></script>

sendmail.js

var $form = $("#form");
var $name = $form.find("[name='name']");
var $email = $form.find("[name='email']");
var $message = $form.find("[name='message']");
var $submitButton = $form.find("[data-type='send-mail']");

$submitButton.on("click",function(){
    $submitButton.prop("disabled", true);
    $.ajax({
        url: "sendmail.php",
        data: { name:$name.val(), email:$email.val(), message:$message.val() },
        type: "post",
        dataType: "json",
        success: function(response) {
            alert("MAİL GÖNDERİMİ\n"+response.message);
            if(response.type==="success") {
                console.log("Mail gönderildi.");
            }
            else if(response.type==="error") {
                console.warn("Mail gönderilemedi.");
            }
            else {
                console.error("Mail gönderiminde beklenmedik bir response");
            }
        },
        error: function(err) {
            alert("HATA!");
            console.log(err);
        },
        complete: function() {
            $submitButton.prop("disabled", false);
        }
    });
});

sendmail.php

<?php
header('Content-Type: application/json');

date_default_timezone_set('Europe/Istanbul');
$fromName = "prototurk.com"; // Gönderen adı
$title = 'Web sitesinden mesaj var'; // Mail konusu

$mailFrom = '[email protected]';
$password = 'proto1234';
$mailTo = '[email protected]';
$host = 'smtp.yandex.com';
$port = 465;

$name = isset($_POST["name"]) ? htmlentities($_POST["name"]) : "<i style='color:#777'>Belirtilmedi</i>";
$email = isset($_POST["email"]) ? htmlentities($_POST["email"]) : "<i style='color:#777'>Belirtilmedi</i>";
$message = isset($_POST["message"]) ? htmlentities($_POST["message"]) : "<i style='color:#777'>Belirtilmedi</i>";
$date = date('d.m.Y H.i.s');
$ipAddress = $_SERVER['REMOTE_ADDR'];

$tableRowStyle = "display:table-row";
$tableCellStyle = "display:table-cell; padding:5px; border-bottom:1px solid #eee;";
$body = "<div style='display:table;'>";
$body .= "<div style='$tableRowStyle'><b style='$tableCellStyle'>Ad Soyad</b><span style='$tableCellStyle'>$name</span></div>";
$body .= "<div style='$tableRowStyle'><b style='$tableCellStyle'>E-posta</b><span style='$tableCellStyle'>$email</span></div>";
$body .= "<div style='$tableRowStyle'><b style='$tableCellStyle'>Mesaj</b><span style='$tableCellStyle'>$message</span></div>";
$body .= "<div style='$tableRowStyle'><b style='$tableCellStyle'>Gönderim Tarihi</b><span style='$tableCellStyle'>$date</span></div>";
$body .= "<div style='$tableRowStyle'><b style='$tableCellStyle'>IP Adresi</b><span style='$tableCellStyle'>$ipAddress</span></div>";
$body .= "</div>";

$altBody = "Ad Soyad: $name\n";
$altBody .= "E-posta: $email\n";
$altBody .= "Mesaj: $message\n";
$altBody .= "Gönderim Tarihi: $date\n";
$altBody .= "IP Adresi: $ipAddress\n";

include("PHPMailer.php");
include("SMTP.php");
include("Exception.php");

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

$mail = new PHPMailer(true);

try {
  $mail->SMTPDebug = 0;
  $mail->isSMTP();
  $mail->CharSet = 'UTF-8';
  //$mail->setLanguage('tr',"language/");
  $mail->Host       = $host;
  $mail->SMTPAuth   = true;
  $mail->Username   = $mailFrom;
  $mail->Password   = $password;
  $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;
  $mail->Port       = $port;

  $mail->From = $mailFrom;
  $mail->FromName = $fromName;
  $mail->addAddress($mailTo);

  $mail->isHTML(true);
  $mail->Subject = $title;
  $mail->Body    = $body;
  $mail->AltBody = $altBody;

  $mail->send();
  echo json_encode([
    "type" => "success",
    "message" => "Mesajınız gönderildi. Teşekkür ederiz."
  ]);
} 
catch (Exception $e) {
  echo json_encode([
    "type" => "error",
    "message" => "Bir sorun oluştu ve mesajınız gönderilemedi."
  ]);
}
exit;

Gelen tüm istekleri .htaccess dosyası yardımıyla index.php dosyanıza yönlendirin.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]

Burada, siteye gelen tüm istekleri index.php dosyasına yönlendirdik ve url'nin geri kalanını da get parametresi olarak url key'ine atadık. Şimdi index.php dosyasında gelen url'yi alabiliriz. Gelen url değerinin ne olduğunu kendinize göre sorgulayabilir ve hangi sayfanın istendiğini kendi algoritmanıza göre anlayıp sayfayı include edebilirsiniz.
Örnek olarak aşağıdaki örnekte gelen url isteğini alıp "/" karakterlerinden parçalıyorum. Eğer hiç değer gelmemişse varsayılan değer olarak "anasayfa" diyorum. Aksi halde 4 adet değer dönmesini zorunlu tutuyorum: 3'ü tarih 1'i makale başlığı. Sonra da ilgili sayfayı include ediyorum.

// index.php dosyanız

define('ROOT_URL', (!empty($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'].'/');

$urlLink = isset($_GET["url"]) ? mb_strtolower($_GET["url"], 'UTF-8') : 'anasayfa';
$urlLink = trim($urlLink, "/\t\r\0\x08");

if($urlLink == 'anasayfa') {
    include("anasayfa.php");
    exit();
}

$urlLink = explode("/", $urlLink);
$urlLinkCount = count($urlLink);
if($urlLinkCount !== 4) {
    include("404.php");
    exit();
}

echo 'Şu makaleye ulaşmaya çalışıyorsunuz: '.$urlLink[3].'<br>';
echo 'Tarih: '.$urlLink[2].'.'.$urlLink[1].'.'.$urlLink[0].'<br>';
echo 'Bu makaleyi bulup size getireceğim...';
exit();

Bu şekilde if-else yapılarıyla sayfa yönlendirmelerinizi yapabilirsiniz. Elbette kodun çokça geliştirilmesi lazım ama her şeyi burada anlatmam mümkün değil. "seo dostu url php" gibi bir arama yapıp daha detaylı makaleler/videolar bulabilirsiniz.

Örneğin şöyle bir tablonuz var:

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
  <table id="myTable" class="table">
    <thead>
      <tr>  <th> Firstname </th><th> Lastname </th><th> Email            </th></tr>
    </thead>
    <tbody>
      <tr>  <td> John      </td><td> Doe      </td><td> [email protected] </td></tr>
      <tr>  <td> Mary      </td><td> Moe      </td><td> [email protected] </td></tr>
      <tr>  <td> July      </td><td> Dooley   </td><td> [email protected] </td></tr>
    </tbody>
  </table>
</div>

Bootstrap'ta table class'ı varsayılan olarak width: 100% stiline sahip. CSS ile bu işlemi overload edin.

#myTable { width:auto !important; }