# Karışık Notlar

## ⭐ Faydalı Teknolojiler <a href="#css-notlari" id="css-notlari"></a>

* [📖 Progressive Web App](https://developers.google.com/web/progressive-web-apps)

## CSS Notları <a href="#css-notlari" id="css-notlari"></a>

* `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 <a href="#faydali-linkler" id="faydali-linkler"></a>

*

### Arkaplaba Ortalanmış Resim Ekleme <a href="#arkaplaba-ortalanmis-resim-ekleme" id="arkaplaba-ortalanmis-resim-ekleme"></a>

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

### Ekranın Tam Ortasına Alma <a href="#ekranin-tam-ortasina-alma" id="ekranin-tam-ortasina-alma"></a>

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

### İçeriklerini Merkeze konumlandırma <a href="#iceriklerini-merkeze-konumlandirma" id="iceriklerini-merkeze-konumlandirma"></a>

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

### Animasyon (Transition) <a href="#animasyon-transition" id="animasyon-transition"></a>

Tüm eylemleri için animasyon

```
transition: all 1.1s ease-in-out;
```

## VsCode Eklentileri <a href="#vscode-eklentileri" id="vscode-eklentileri"></a>

### Code runner ek ayarı <a href="#code-runner-ek-ayari" id="code-runner-ek-ayari"></a>

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) <a href="#web-automation-web-otomasyaonu" id="web-automation-web-otomasyaonu"></a>

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

* Chrome için eklentisini [buraya](https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd) tıklayarak indirebilirsin.
* Örnek video için [buraya](https://www.youtube.com/watch?v=4I7xay_NV8A) bakabilirsin.

### Faydalı Bileşenler <a href="#faydali-bilesenler" id="faydali-bilesenler"></a>

* WYSIWYG anında derlenmesine verilen isim
*
*

## Faydalı Araçlar <a href="#faydali-araclar" id="faydali-araclar"></a>

*
*

## İlham Verici Çalışmalar <a href="#ilham-verici-calismalar" id="ilham-verici-calismalar"></a>

*
*
*

## Karma Linkler <a href="#karma-linkler" id="karma-linkler"></a>

* ​[Netlify](https://app.netlify.com/) & [Heroku](https://www.heroku.com/) ücretsiz github entegrasyonlu site sunucuları
*
*
*
*