🥴Karışık Notlar

Web programlama için karışık notlar

⭐ Faydalı Teknolojiler

• 📖 Progressive Web App

CSS Notları

• width: 1vw Ekranın genişliğinin 100'de 1'ini temsil eder

• height: 1vh Ekranın yüksekliğinin 100'de 1'ini temsil eder

• em, rem Fonta oranla boyut belirtme

Faydalı Linkler

Arkaplaba Ortalanmış Resim Ekleme

.add-image {    background-image: url(url);    background-size: cover;     background-repeat: no-repeat;    background-position: center center;}

Ekranın Tam Ortasına Alma

.centered {    position: fixed;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

İçeriklerini Merkeze konumlandırma

.centered-content {    display: flex;    align-items: center;    justify-content: center;}

Animasyon (Transition)

Tüm eylemleri için animasyon

transition: all 1.1s ease-in-out;

VsCode Eklentileri

Code runner ek ayarı

HTML dosyalarını tarayıcı ile çalıştırmak için alttaki kodu vscode json ayarlarına eklemeniz gerekmekte.

 "code-runner.executorMap": {        "html": "start $fileName" }

Web Automation (Web Otomasyaonu)

Web otomasyonu için selenium ide kullanılmaktadır.

• Chrome için eklentisini buraya tıklayarak indirebilirsin.

• Örnek video için buraya bakabilirsin.

Faydalı Bileşenler

• WYSIWYG anında derlenmesine verilen isim

Faydalı Araçlar

İlham Verici Çalışmalar

Karma Linkler

• ​Netlify & Heroku ücretsiz github entegrasyonlu site sunucuları