-1. Kevin Powell'ın [HTML Paragraf ve Başlıklar Videosunu İzleyin](https://www.youtube.com/watch?v=yqcd-XkxZNM&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=3)
-2. Kevin Powell'ın [HTML Kalın ve İtalik Metin Videosunu İzleyin](https://www.youtube.com/watch?v=gW6cBZLUk6M&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=4)
-3. HTML'de metinle çalışma alıştırması yapmak için, farklı başlıklar kullanan, paragraflar kullanan ve paragraflardaki bazı metinleri kalın ve italik hale getiren düz bir blog makalesi sayfası oluşturun. Sitelerinizi oluştururken gerçek metin yerine sahte metin oluşturmak için [Lorem Ipsum](https://loremipsum.io/) kullanabilirsiniz.
+1. Kevin Powell'ın [HTML Paragraph and Headings adlı ingilizce videosunu izleyin](https://www.youtube.com/watch?v=yqcd-XkxZNM&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=3)
+1. Kevin Powell'ın [HTML Bold and Italic Text adlı ingilizce videosunu izleyin](https://www.youtube.com/watch?v=gW6cBZLUk6M&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&index=4)
+1. HTML'de metinle çalışma alıştırması yapmak için, farklı başlıklar kullanan, paragraflar kullanan ve paragraflardaki bazı metinleri kalın ve italik hale getiren düz bir blog makalesi sayfası oluşturun. Sitelerinizi oluştururken gerçek metin yerine sahte metin oluşturmak için [Lorem Ipsum](https://loremipsum.io/) kullanabilirsiniz.
-### Bilgi Ölçme
+### Bilgi ölçme
-Bu bölüm, bu dersi kendi başınıza anlayıp anlamadığınızı kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta zorlanıyorsanız, soruya tıklayın ve yönlendirdiği materyali inceleyin.
+Bu bölüm, bu dersi kendi kendinize anlayıp anlamadığınızı kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta zorlanıyorsanız, soruya tıklayın ve bağlantılı olduğu materyali gözden geçirin.
-* [HTML'de bir paragraf nasıl oluşturulur?](#create-paragraph-element)
-* [HTML'de nasıl başlık oluşturulur?](#headings)
-* [Kaç farklı başlık seviyesi vardır ve aralarındaki fark nedir?](#different-heading-levels)
-* [Metni kalın ve önemli yapmak için hangi öğeyi kullanmalısınız?](#strong-element)
-* [Metne vurgu katmak amacıyla italik hale getirmek için hangi öğeyi kullanmalısınız?](#em-element)
-* [Bir elemanın içindeki herhangi bir iç içe elemanla ne gibi bir ilişkisi vardır?](#nested-relationship)
-* [İki öğe aynı iç içe geçme seviyesindeyse aralarında nasıl bir ilişki vardır?](#elements-same-level)
-* [HTML yorumları nasıl oluşturulur?](#html-comments)
+- [HTML'de bir paragraf nasıl oluşturulur?](#create-paragraph-element)
+- [HTML'de nasıl başlık oluşturulur?](#başlıklar)
+- [Kaç farklı başlık seviyesi vardır ve aralarındaki fark nedir?](#different-heading-levels)
+- [Metni kalın ve önemli yapmak için hangi öğeyi kullanmalısınız?](#strong-öğesi)
+- [Metne vurgu katmak amacıyla italik hale getirmek için hangi öğeyi kullanmalısınız?](#em-öğesi)
+- [Bir elemanın içindeki herhangi bir iç içe elemanla ne gibi bir ilişkisi vardır?](#nested-relationship)
+- [İki öğe aynı iç içe geçme seviyesindeyse aralarında nasıl bir ilişki vardır?](#elements-same-level)
+- [HTML yorumları nasıl oluşturulur?](#html-yorumları)
-### Ek Kaynaklar
+### Ek kaynaklar
-Bu bölüm, ilgili içeriğe yararlı bağlantılar içerir. Zorunlu değildir, bu nedenle tamamlayıcı olarak düşünün.
+Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, ek olarak düşünülmelidir.
-* [<strong> <b> <em> ve <i> etiketleri arasındaki anlamsal fark nedir ve bu öğeler ne zaman kullanılır?](https://medium.com/@zac_heisey/when-to-use-strong-b-em-and-i-tags-in-your-markup-fa4d0af8affb)
-* [Etkileşimli bir HTML metin biçimlendirme makalesi](https://www.w3schools.com/html/html_formatting.asp)
\ No newline at end of file
+- [<strong> <b> <em> ve <i> etiketleri arasındaki anlamsal fark nedir ve bu öğeler ne zaman kullanılır? gibi soruları öğrenmek için bu ingilizce makaleye bakabilirsiniz.](https://medium.com/@zac_heisey/when-to-use-strong-b-em-and-i-tags-in-your-markup-fa4d0af8affb)
+- [HTML formatting adlı etkileşimli bir ingilizce makale](https://www.w3schools.com/html/html_formatting.asp)
\ No newline at end of file
diff --git a/content/odin/foundations/installations/computer_basics.md b/content/odin/foundations/installations/computer_basics.md
index 5c9d04bb..016252c8 100644
--- a/content/odin/foundations/installations/computer_basics.md
+++ b/content/odin/foundations/installations/computer_basics.md
@@ -32,16 +32,16 @@ Bu bölüm, bu derste öğreneceğiniz konuların genel bir özetini içerir.
### Bilgi ölçme
-Bu bölüm, bu dersi anlayıp anlamadığınızı kendi başınıza kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta sorun yaşıyorsanız, soruya tıklayın ve bağlantının verdiği materyali inceleyin.
+Bu bölüm, bu dersi anlayıp anlamadığınızı kendi başınıza kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta sorun yaşıyorsanız, soruya tıklayın ve bağlantının verdiği materyali inceleyin. Bu bölümde bulunan materyallerin hepsi ingilizcedir.
-- [Windows bir işletim sistemi midir uygulama mıdır? bunu öğrenmek için bu ingilizce makaleye göz atın.](https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/)
-- [Açık kaynak ve kapalı kaynak yazılım arasındaki fark nedir? bunu öğrenmek için bu ingilizce makaleye göz atın.](https://edu.gcfglobal.org/en/basic-computer-skills/open-source-vs-closed-source-software/1/)
-- [Ekran görüntülerinin kullanılma şekilleri nedir? bunu öğrenmek için bu ingilizce makaleye göz atın.](https://edu.gcfglobal.org/en/techsavvy/taking-screenshots/1/)
-- [Zayıf ve güçlü parolalar nedir? bunu öğrenmek için bu ingilizce makaleye göz atın.](https://edu.gcfglobal.org/en/techsavvy/password-tips/1/)
+- [Windows bir işletim sistemi midir uygulama mıdır?](https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/)
+- [Açık kaynak ve kapalı kaynak yazılım arasındaki fark nedir?](https://edu.gcfglobal.org/en/basic-computer-skills/open-source-vs-closed-source-software/1/)
+- [Ekran görüntülerinin kullanılma şekilleri nedir?](https://edu.gcfglobal.org/en/techsavvy/taking-screenshots/1/)
+- [Zayıf ve güçlü parolalar nedir?](https://edu.gcfglobal.org/en/techsavvy/password-tips/1/)
### Ek kaynaklar
Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, ek olarak düşünülmelidir.
-- Bilgisayarınızı verimli bir şekilde kullanmak için erişilebilirlik özelliklerinden nasıl yararlanabileceğinizi öğrenmek için GCF'nin bu sayfasına ["What are accessibility features"](https://edu.gcfglobal.org/en/computerbasics/using-accessibility-features/1/) göz atın.
-- Bu konuyu öğrenmek için daha fazla zaman harcamak istiyorsanız, [FreeCodeCamp's excellent course on computer basics](https://youtu.be/y2kg3MOk1sY) göz atın.
\ No newline at end of file
+- Bilgisayarınızı verimli bir şekilde kullanmak için erişilebilirlik özelliklerinden nasıl yararlanabileceğinizi öğrenmek için GCF'nin bu sayfasına ["What are accessibility features"](https://edu.gcfglobal.org/en/computerbasics/using-accessibility-features/1/) adlı ingilizce makaleye göz atın.
+- Bu konuyu öğrenmek için daha fazla zaman harcamak istiyorsanız, [FreeCodeCamp's excellent course on computer basics](https://youtu.be/y2kg3MOk1sY) adlı ingilizce videoya göz atın.
\ No newline at end of file
diff --git a/content/odin/foundations/javascript_basics/clean_code.md b/content/odin/foundations/javascript_basics/clean_code.md
index 0f30ee3d..8e1031fe 100644
--- a/content/odin/foundations/javascript_basics/clean_code.md
+++ b/content/odin/foundations/javascript_basics/clean_code.md
@@ -293,8 +293,8 @@ Temiz kod yazmayı öğrenmek sürekli bir gelişim sürecidir. Bu süreç, Odin
Bu bölüm, bu dersi kendi kendinize anlayıp anlamadığınızı kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta zorlanıyorsanız, soruya tıklayın ve bağlantılı olduğu materyali gözden geçirin.
- [Temiz kod yazmak neden önemli?](#giriş)
-- [Önceden bahsedilen 5 temiz kod yazma prensipleri nelerdir? bunu öğrenmek için bu ingilizce makaleye göz atın.](https://onextrapixel.com/10-principles-for-keeping-your-programming-code-clean/)
-- [İyi ve kötü yorumların arasındaki farklar nelerdir? bunu öğrenmek için bu ingilizce makaleye göz atın.](https://onextrapixel.com/10-principles-for-keeping-your-programming-code-clean/)
+- [Önceden bahsedilen 5 temiz kod yazma prensipleri nelerdir? ilgili ingilizce makale için tıklayın.](https://onextrapixel.com/10-principles-for-keeping-your-programming-code-clean/)
+- [İyi ve kötü yorumların arasındaki farklar nelerdir? ilgili ingilizce makale için tıklayın.](https://onextrapixel.com/10-principles-for-keeping-your-programming-code-clean/)
### Ek kaynaklar
diff --git a/content/odin/foundations/javascript_basics/fundamentals-1.md b/content/odin/foundations/javascript_basics/fundamentals-1.md
index 423a60c9..18c905c3 100644
--- a/content/odin/foundations/javascript_basics/fundamentals-1.md
+++ b/content/odin/foundations/javascript_basics/fundamentals-1.md
@@ -5,7 +5,8 @@ title: 'Javascript Temelleri - 1'
### Giriş
JavaScript'e dalalım!
-### Ders Özeti
+### Ders özeti
+
Bu bölümde öğreneceğiniz konuların genel bir özeti bulunmaktadır.
* Bir değişken nasıl tanımlanır?
@@ -22,13 +23,13 @@ Bu bölümde öğreneceğiniz konuların genel bir özeti bulunmaktadır.
* Atama operatörleri nelerdir?
* Tekil artı (unary plus) operatörü nedir?
-### JavaScript Kodu Nasıl Çalıştırılır?
+### JavaScript kodu nasıl çalıştırılır?
Temel bilgiler kursunda yazacağımız JavaScript kodunun çoğunlukla tarayıcı üzerinde çalıştıracağız. JavaScript'in tarayıcı dışındaki bir ortamda nasıl çalıştırılacağını, ilerleyen zamanda temel bilgiler ve NodeJS kurslarında öğreneceksiniz. O zamana kadar tam tersi belirtilmedikçe JavaScript'i tarayıcınızda çalıştırmalısınız, aksi takdirde beklenmedik hatalarla karşılaşabilirsiniz.
En kolay yol, içinde JavaScript kodu bulunan bir HTML dosyası yaratmaktır. Bilgisayarınızın herhangi bir yerindeki bir dosyaya, temel HTML taslağını yazın:
-~~~html
+```html
@@ -42,7 +43,7 @@ En kolay yol, içinde JavaScript kodu bulunan bir HTML dosyası yaratmaktır. Bi
-~~~
+```
Bu dosyayı kaydedin ve bir web tarayıcısında açın (bunun için Visual Studio Code'daki ["Live Server"](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) eklentisini kullanabilirsiniz!) ve daha sonra
@@ -92,35 +92,35 @@ Aşağıdaki alıştırmaları deneyin (ve `console.log()` kullanmayı unutmayı
* Konsolda şunu deneyin: `9 * a`
* ve bunu: `let b = 7 * a` ( `undefined` \* değerini döndürür) ve sonra `console.log(b)` yazın.
5. Şimdiye kadar bir şeyler kapmış olmalısınız. Şunu deneyin.
- * Sabit bir değişken olan `max`ı `57` değeriyle belirtin.
- * Başka bir değişken olan `actual`ı `max - 13` olarak ayarlayın.
- * Başka bir değişken olan `percentage`i `actual / max` olarak ayarlayın.
- * Eğer konsola `percentage` yazarsanız ve enter tuşuna basarsanız `0.7719` gibi bir değer göreceksiniz.
+ * Sabit bir değişken olan `MAX`ı `57` değeriyle belirtin.
+ * Başka bir değişken olan `actual`ı `MAX - 13` olarak ayarlayın.
+ * Başka bir değişken olan `percentage`i `actual / MAX` olarak ayarlayın.
+ * Eğer konsola `percentage` yazarsanız ve Enter tuşuna basarsanız `0.7719` gibi bir değer göreceksiniz.
6. Script etiketinizdeki şeyleri biraz daha kurcalayın. Bir süre sonra, o sayıları ve değişkenleri web sayfasında nasıl göstereceğimizi öğreneceğiz ama mantık hep aynı kalacak, o yüzden ilerlemeden önce iyi anladığınıza emin olun.
_* JavaScript kodunu konsolda çalıştırarak muhtemelen fark etmişsinizdir, konsol çalıştırdığı kodun çıktısını verir (buna döndürme denir). İlerleyen derslerde bunları göreceksiniz ancak şimdilik hatırlatmakta fayda var. Atama yapılmış bir tanımlama (örn. let b = 7 * a), undefined değerini döndürür yani aynı satırda bir değişken tanımlayıp sonra ona değer atayıp o değeri okumak mümkün değildir._
-### Ek Kaynaklar
+### Bilgi kontrolü
-Bu bölüm, diğer içeriklere yardımcı olan faydalı bağlantılar içerir. Zorunlu değildir, ek kaynak olarak düşünün
+Bu bölüm, bu dersi kendi kendinize anlayıp anlamadığınızı kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta zorlanıyorsanız, soruya tıklayın ve bağlantılı olduğu materyali gözden geçirin.
-* `var` ve `let` arasındaki kesin farklar [javascript.info](https://javascript.info/var) adresinde açıklanmaktadır.
+- [Bir değişken tanımlamanın üç yolunu sayın.](#variable-declaration)
+- [Üç farklı yolu olan değişken tanımlamanın hangisinden, neden kaçınmalısınız?](#avoid-var)
+- [Değişkenleri adlandırırken hangi kurallara dikkat etmelisiniz? ilgili ingilizce makale için tıklayın.](https://javascript.info/variables#variable-naming)
+- [Sayıları ve dizeleri bir araya getirdiğinizde ne olur? ilgili ingilizce makale için tıklayın.](https://javascript.info/operators#string-concatenation-with-binary)
+- [Modulo (%), veya Kalan, operatörü nasıl çalışır? ilgili ingilizce makale için tıklayın.](https://javascript.info/operators#remainder)
+- [`==` ve `===` arasındaki farkı açıklayın, ilgili ingilizce makale için tıklayın.](https://www.w3schools.com/js/js_numbers.asp)
+- [Ne zaman `NaN` sonucu alırsınız? ilgili ingilizce makale için tıklayın.](https://www.w3schools.com/js/js_numbers.asp)
+- [Bir sayıyı nasıl artırır veya azaltırsınız? ilgili ingilizce makale için tıklayın.](https://javascript.info/operators#increment-decrement)
+- [Ön ekli ve son ekli artırım/azaltım operatörleri arasındaki fark nedir? ilgili ingilizce makale için tıklayın.](https://javascript.info/operators#increment-decrement)
+- [Operatör önceliği nedir ve JS'de nasıl ele alınır? ilgili ingilizce makale için tıklayın.](https://javascript.info/operators#operator-precedence)
+- [Geliştirici araçlarına ve konsola nasıl erişilir?](#access-devTools-console)
+- [Bilgileri konsola nasıl yazdırırız?](#console-log)
+- [Tekil artı (unary plus) operatörü, dize olarak belirtilmiş bir sayıya ne yapar? örn. "10" ilgili ingilizce makale için tıklayın.](https://javascript.info/operators#numeric-conversion-unary)
-### Bilgi Kontrolü
+### Ek kaynaklar
-Bu bölüm, bu dersi anlayıp anlamadığınızı kendi başınıza kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta sorun yaşıyorsanız, soruya tıklayın ve bağlantının verdiği materyali inceleyin.
+Bu bölüm, diğer içeriklere yardımcı olan faydalı bağlantılar içerir. Zorunlu değildir, ek kaynak olarak düşünün.
-* [Bir değişken tanımlamanın üç yolunu sayın.](#variable-declaration)
-* [Üç farklı yolu olan değişken tanımlamanın hangisinden, neden kaçınmalısınız?](#avoid-var)
-* [Değişkenleri adlandırırken hangi kurallara dikkat etmelisiniz?](https://javascript.info/variables#variable-naming)
-* [Sayıları ve dizeleri bir araya getirdiğinizde ne olur?](https://javascript.info/operators#string-concatenation-with-binary)
-* [Modulo (%), veya Kalan, operatörü nasıl çalışır?](https://javascript.info/operators#remainder)
-* [`==` ve `===` arasındaki farkı açıklayın.](https://www.w3schools.com/js/js_numbers.asp)
-* [Ne zaman `NaN` sonucu alırsınız?](https://www.w3schools.com/js/js_numbers.asp)
-* [Bir sayıyı nasıl artırır veya azaltırsınız?](https://javascript.info/operators#increment-decrement)
-* [Ön ekli ve son ekli artırım/azaltım operatörleri arasındaki fark nedir?](https://javascript.info/operators#increment-decrement)
-* [Operatör önceliği nedir ve JS'de nasıl ele alınır?](https://javascript.info/operators#operator-precedence)
-* [Geliştirici araçlarına ve konsola nasıl erişilir?](#access-devTools-console)
-* [Bilgileri konsola nasıl yazdırırız?](#console-log)
-* [Tekil artı (unary plus) operatörü, dize olarak belirtilmiş bir sayıya ne yapar? örn. "10"](https://javascript.info/operators#numeric-conversion-unary)
\ No newline at end of file
+- `var` ve `let` arasındaki farklar [javascript.info'nun eski "var" başlıklı bu ingilizce makalesinde](https://javascript.info/var) açıklanmıştır.
\ No newline at end of file
diff --git a/content/odin/foundations/javascript_basics/fundamentals-2.md b/content/odin/foundations/javascript_basics/fundamentals-2.md
index 9b59e930..55b6c2f6 100644
--- a/content/odin/foundations/javascript_basics/fundamentals-2.md
+++ b/content/odin/foundations/javascript_basics/fundamentals-2.md
@@ -6,39 +6,38 @@ title: 'Javascript Temelleri - 2'
JavaScript'te karşılacağınız son derece yaygın birkaç veri tipi vardır ve temel bilgiler derslerinde, bunların temelini iyi atacağız. Daha derine inmeden önce, [bu İngilice makaleyi](http://javascript.info/types), okuyarak en yaygın olanlara bir bakabilirsiniz.
-
-### Ders Özeti
+### Ders özeti
Bu bölüm, bu derste öğreneceğiniz konuların genel bir özetini içerir.
-- JavaScript'teki sekiz veri türünü sayın.
-- Tek tırnak, çift tırnak ve ters tırnak arasındaki farkı anlayın.
-- Bir değişkeni / ifadeyi bir dizeye yerleştirin.
-- Bir metodun ne olduğunu anlayın.
-- Üç mantıksal operatörü sayın.
-- Karşılaştırma operatörlerinin ne olduğunu anlayın.
-- Koşullu durumların ne olduğunu anlayın.
-- İç içe yerleştirmenin ne olduğunu anlayın.
-- Doğrumsu ve yanlışımsı değerlerin ne olduğunu anlayın.
+- JavaScript'teki sekiz veri türünü saymak.
+- Tek tırnak, çift tırnak ve ters tırnak arasındaki farkı anlamak.
+- Bir değişkeni / ifadeyi bir dizeye yerleştirmek.
+- Bir metodun ne olduğunu anlamak.
+- Üç mantıksal operatörü sayabilmek.
+- Karşılaştırma operatörlerinin ne olduğunu anlamak.
+- Koşullu durumların ne olduğunu anlamak.
+- İç içe yerleştirmenin ne olduğunu anlamak.
+- Doğrumsu ve yanlışımsı değerlerin ne olduğunu anlamak.
### Dizeler
Yaptığınız işe bağlı olarak, sayılar yerine metin parçalarıyla daha çok çalışmanız gerekebilir. Basitçe, __dize__ bir metin parçasıdır ve dilin temel yapı taşlarından biridir.
-1. [Bir diğer İngilizce MDN dersini](https://developer.mozilla.org/tr/docs/Learn/JavaScript/First_steps/Strings) okuyup kodlayarak takip edin.
-2. Daha fazlasını öğrenmek için [bu derse](https://www.w3schools.com/js/js_string_methods.asp) bakın. Sayfanın altındaki [Dize Referansı'na](https://www.w3schools.com/jsref/jsref_obj_string.asp) göz atmayı ve sondaki egzersizleri yapmayı unutmayın!
-3. Kelime haznenize bir __yöntem__ dahil edin. [Önceki W3Schools egzersizinde](https://www.w3schools.com/js/js_string_methods.asp), `replace` ve `slice` gibi dizeler üzerinde kullanılabilecek birkaç yöntem öğrendiniz. Dizeler üzerinde kullanılabilecek tüm yöntemlerin kapsamlı bir listesi [burada](https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/String) bulunabilir.
+1. [Bir diğer İngilizce MDN makalesini](https://developer.mozilla.org/tr/docs/Learn/JavaScript/First_steps/Strings) okuyup kodlayarak takip edin.
+2. Daha fazlasını öğrenmek için [bu ingilizce derse](https://www.w3schools.com/js/js_string_methods.asp) bakın. Sayfanın altındaki [Dize Referansı'na](https://www.w3schools.com/jsref/jsref_obj_string.asp) göz atmayı ve sondaki egzersizleri yapmayı unutmayın!
+3. Kelime haznenize bir __yöntem__ dahil edin. [Önceki W3Schools egzersizinde](https://www.w3schools.com/js/js_string_methods.asp), `replace` ve `slice` gibi dizeler üzerinde kullanılabilecek birkaç yöntem öğrendiniz. Dizeler üzerinde kullanılabilecek tüm yöntemlerin kapsamlı bir ingilizce listesi [burada](https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/String) bulunabilir.
-### Koşullu İfadeler
+### Koşullu ifadeler
Şimdi eğlenceli kısma geldik. Şu ana kadar programlama konusunda, basit matematik becerileriyle yapabileceğimizden farklı bir şey yapmadık. Elbette bilgisayara matematiği hızlıca yapmayı öğrettik ancak programlama, esasında bilgisayara karmaşık işler yaptırmaktır. Koşullu ifadeler de bunun için var.
-1. Koşullu ifadeleri öğrenmenin ilk adımı, [karşılaştırmaları](http://javascript.info/comparison) iyi bildiğinizden emin olmaktır.
-2. [Bu İngilizce ders](https://www.w3schools.com/js/js_if_else.asp), JavaScript'teki koşullu ifadeler için güzel bir başlangıçtır.
-3. [Bu öğretici](http://javascript.info/logical-operators), mantıksal operatörler hakkında size bilgi verecektir. Bu makalenin görevleriyle ilgili bir uyarı: (parantez içinde bir sayı veya dize ile) `alert()` ifadesine sahip sorular bulunmaktadır. Bunun ne olduğunu ilerleyen zamanlarda inceleyeceğiz. Bazı şeylere anlam veremeyebilirsiniz ancak bunlar doğru örneklerdir ve sizin için anlam kazanacak. Endişelenmeyin!
+1. Koşullu ifadeleri öğrenmenin ilk adımı, [karşılaştırmaları(bu ingilizce makaleden göz atabilirsiniz)](http://javascript.info/comparison) iyi bildiğinizden emin olmaktır.
+2. [Bu İngilizce makale](https://www.w3schools.com/js/js_if_else.asp), JavaScript'teki koşullu ifadeler için güzel bir başlangıçtır.
+3. [Bu ingilizce makale](http://javascript.info/logical-operators), mantıksal operatörler hakkında size bilgi verecektir. Bu makalenin görevleriyle ilgili bir uyarı: (parantez içinde bir sayı veya dize ile) `alert()` ifadesine sahip sorular bulunmaktadır. Bunun ne olduğunu ilerleyen zamanlarda inceleyeceğiz. Bazı şeylere anlam veremeyebilirsiniz ancak bunlar doğru örneklerdir ve sizin için anlam kazanacak. Endişelenmeyin!
4. [Bu İngilizce makale](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals), ynı konuyu ele alır (konu tekrarı niyetine okuyabilirsiniz!), daha da önemlisi sayfanın altında tekrar için ödevler verir.
5. [Bu İngilizce makale](http://javascript.info/ifelse), aynı temel kavramı kapsar (bir gözden geçirme olarak okuyun!) Ve - daha önemlisi - sayfa altındaki 'görevleri' sunar!
-6. [Bu öğretici](https://www.digitalocean.com/community/tutorials/how-to-use-the-switch-statement-in-javascript), birden fazla koşulunuz olduğunda işinize yarayacak `switch` ifadesini öğretmektedir.
+6. [Bu ingilizce makale](https://www.digitalocean.com/community/tutorials/how-to-use-the-switch-statement-in-javascript), birden fazla koşulunuz olduğunda işinize yarayacak `switch` ifadesini öğretmektedir.
### Ödev
@@ -51,6 +50,12 @@ Burada sunulan dersleri sırayla yapın. Üst kısımda "run" düğmesine basara
Başlamak için ücretsiz bir replit hesabı oluşturun ve erişim için "Fork" veya "Remix"e tıklayın.
Not: Aşinalık kazanmak için sol sütundaki dosyalara göz atmaktan çekinmeyin.
+
-Şimdi bazı fonksiyonlar yazalım! Bunları bir HTML dosyasının `script` etiketi içine yazın. Nasıl oluşturulacağını unuttuysanız, [Fundamentals Part 1](https://www.theodinproject.com/lessons/foundations-fundamentals-part-1#how-to-run-javascript-code) bölümündeki açıklamaları gözden geçirin.
+Şimdi bazı fonksiyonlar yazalım! Bunları bir HTML dosyasının `script` etiketi içine yazın. Nasıl oluşturulacağını unuttuysanız, [Javascript temelleri 1](https://kamp.us/odin/mufredat/temel-bilgiler/javascript-temelleri/javascript-temelleri-1) bölümündeki açıklamaları gözden geçirin.
Şimdilik, her bir fonksiyonu yazın ve çıktısını `console.log` ile test edin.
@@ -55,9 +55,9 @@ Bu bölüm, bu derste öğreneceğiniz konulara genel bir bakış içermektedir.
-### Bilgi Ölçme
+### Bilgi ölçme
-Bu bölüm, bu dersi kendi başınıza anlayıp anlamadığınızı kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta zorlanıyorsanız, soruya tıklayın ve bağlantı verdiği materyali gözden geçirin.
+Bu bölüm, bu dersi kendi kendinize anlayıp anlamadığınızı kontrol etmeniz için sorular içermektedir. Bir soruyu yanıtlamakta zorlanıyorsanız, soruya tıklayın ve bağlantılı olduğu materyali gözden geçirin. Bu bölümde bulunan materyallerin hepsi ingilizcedir.
- [Fonksiyonlar ne işe yarar?](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions)
- [Bir fonksiyonu nasıl çağırırız?](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions#invoking_functions)
@@ -66,9 +66,9 @@ Bu bölüm, bu dersi kendi başınıza anlayıp anlamadığınızı kontrol etme
- [Geri dönüş değeri nedir?](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values)
- [Arrow fonksiyonu nedir?](https://javascript.info/arrow-functions-basics)
-### Ek Kaynaklar
+### Ek kaynaklar
Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, ek olarak düşünülmelidir.
-- [What's the difference between using "let" and "var"? - stackoverflow](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var#:~:text=The%20main%20difference%20is%20scoping,(hence%20the%20block%20scope))
-- [How JavaScript Code is executed?](https://youtu.be/iLWTnMzWtj4)
+- [Stackoverflow'daki "let" ve "var" kullanımı arasındaki fark nedir? konulu ingilizce makaleye göz atın.](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var#:~:text=The%20main%20difference%20is%20scoping,(hence%20the%20block%20scope))
+- [How JavaScript Code is executed? adlı ingilizce video javascript'in nasıl çalıştığını konu alıyor.](https://youtu.be/iLWTnMzWtj4)
\ No newline at end of file
diff --git a/content/odin/intermediate_html_css/grid/creating_a_grid.md b/content/odin/intermediate_html_css/grid/creating_a_grid.md
index 6040a586..c4353009 100644
--- a/content/odin/intermediate_html_css/grid/creating_a_grid.md
+++ b/content/odin/intermediate_html_css/grid/creating_a_grid.md
@@ -1,81 +1,85 @@
-### Introduction
+---
+title: 'Grid Oluşturma'
+---
-Now that you know what CSS Grid Layout is, you’ll learn how to create your own grid. This lesson will cover making a grid container, adding columns and rows, the explicit and implicit concept behind Grid and how to space out grid gaps.
+### Giriş
-### Learning outcomes
+CSS Grid düzeninin ne olduğunu bildiğinize göre kendi Grid'inizi nasıl yaratacağınızı öğreneceksiniz. Bu ders, grid konteyneri oluşturmayı, sütun ve satır eklemeyi, Grid'in altındaki belirli ve belirsiz konsepti ve grid boşluklarını nasıl ayarlayabileceğinizi ele alacak.
-By the end of this lesson, you should be able to:
+### Öğrenim çıktıları
-- Make a grid container
-- Define grid tracks
-- Explain the difference between an implicit and explicit grid
-- Set gaps between grid cells
+Bu dersin sonunda şunları yapabiliyor olmalısınız:
-### Setting up a grid
+- Grid konteyneri oluşturmak,
+- Grid izlerini tanımlamak,
+- Belirli ve imalı grid arasındaki farkı açıklamak,
+- Grid hücreleri arasında boşlukları ayarlamak
-This lesson will show you how easy it is to make a grid layout without much work. In upcoming lessons, you will find out more about positioning and how to make complex grids, but for now we’ll start with something simple.
+### Grid düzeni kurmak
-#### Grid container
+Bu ders, size fazla uğraşmadan grid düzeni oluşturmanın ne kadar kolay olduğunu gösterecek. İlerleyen derslerde konumlandırma ve karmaşık grid düzenleri oluşturmak hakkında daha fazlasını öğreneceksiniz ama şimdilik basit bir şey ile başlayacağız.
-We can think about CSS Grid in terms of a container and items. Simply put, when you make an element a grid container, it will “contain” the whole grid. In CSS, an element is turned into a grid container with the property `display: grid` or `display: inline-grid`.
+#### Grid konteyneri
-
-
Item 1
-
Item 2
-
I am not a grid item!
+
Öğe 1
+
Öğe 2
+
Ben bir grid öğesi değilim!
-
Item 3
-
Item 4
+
Öğe 3
+
Öğe 4
```
-But just as you learned in the flexbox lessons, grid items can *also* be grid containers. So you could make grids inside of grids if you wanted.
+Ama flexbox derslerinden öğrendiğiniz gibi grid öğeleri *aynı zamanda* grid konteyneri olabilir. Yani eğer isterseniz bir grid'in içerisinde başka bir grid yapabilirsiniz.
-#### Lines and tracks in grids, oh my!
+#### Grid'lerdeki çizgiler ve izler
-Since you’re coding along with our example (right?) you will notice it doesn’t look very grid-ish yet. A lot of resources on CSS Grid like to show you boxes and outlined grid tables right from the start. But if your grid container and grid items don’t have any borders you won't actually see these lines on the page. So don’t worry, they’re still there!
+Örneğimiz ile beraber kodladığın için (kodluyorsun değil mi?) farkedeceksin ki tam olarak grid yapısına benzemiyor. CSS Grid hakkındaki bir çok kaynak size en başından kutuları ve çizgilerle belirtilen grid tablolarını gösteriyor. Ama sizin grid konteynerınızın ve grid öğelerinizin herhangi bir kenar çizgisi bulunmuyorsa bunları ekranınızda göremeyeceksiniz. Merak etmeyin, onlar orada bulunuyor!
-If you inspect these elements on a webpage using developer tools, you will notice grid badges on the grid elements in the code. The Layout options of the dev tools allows you to select an overlay that can show these invisible lines, tracks and areas of the grid. You will read about using a browser’s developer tools in the assignment below and learn more about lines, tracks, and areas in the next lesson.
+Eğer bu öğeleri geliştirici araçları ile denetlerseniz, kod tarafında bu öğelerde grid rozeti olduğunu göreceksiniz. Geliştirici araçlarının düzen ayarları size bu görünmez çizgileri, izleri ve gridin alanlarını gösterebileceği bir katman seçmesinize olanak sağlıyor. Aşağıdaki ödevde tarayıcının geliştirici araçlarıni kullanmakla ilgili okuma yapacaksınız ve bir sonraki derste çizgiler, izler ve alanlar hakkında daha fazla şey öğreneceksiniz.
-#### Columns and rows
+#### Sütunlar ve satırlar
-Now that we have our grid container with several grid items all set up, it’s time to specify our columns and rows. This will define the grid track (the space between lines on a grid). So we could set a column track to give us space between our columns and a row track to give us space between our rows. We will get into the specifics on tracks and lines in the next lesson, but for now let’s just make some columns and rows.
+Şimdi birkaç grid öğesi bulunan bir grid konteynerimiz olduğuna göre, sütunlarımızı ve satırlarımız belirlememizin zamanı geldi. Bu grid izlerini (griddeki çizgilerin arasındaki boşluk) tanımlayacak. Böylece sütunlarımız arasında boşluk bırakmak için bir sütun izi ve satırlarımız arasında boşluk bırakmak için bir satır izi ayarlayabiliriz. İzler ve satırlarla ilgili ayrıntılara bir sonraki derste gireceğiz, ancak şimdilik sadece birkaç sütun ve satır yapalım.
-The properties `grid-template-columns` and `grid-template-rows` make defining column and row tracks easy. For this lesson, we’ll stick to defining our columns and rows using pixels. In the upcoming lessons, you’ll learn more about defining with percentages and fractional units too.
+`grid-template-columns` ve `grid-template-rows` özellikleri sütun ve satır izlerini tanımlamamızı kolaylaştırır. Bu ders için sütun ve satırlarımızı pikselleri kullanarak tanımlayacağız. Gelecek derslerde, yüzdelik ve kesirli değerler ile tanımlamayı da öğreneceksiniz.
-Going back to our grid container from above, let’s define two columns and two rows to place our four grid items:
+Yukarıdaki grid konteynerımıza dönecek olursak, dört grid öğemizi yerleştirmek için iki sütun ve iki satır tanımlayalım:
-
- See the Pen
- Columns and Rows 1 | CSS Grid by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan
+ Columns and Rows 1 | CSS Grid adlı ingilizce örneğe bakınız.
-If we want to add more columns or rows to our grid, we can simply define these values to make another track. Let's say we wanted to add a third column to our example:
+Eğer gridimize daha fazla sütun ve satır eklemek istersek, basitçe bu değerleri tanımlayarak başka bir iz oluşturabiliriz. Diyelim ki örneğimize üçüncü bir sütun eklemek istedik:
-
- See the Pen
- Columns and Rows 2 | CSS Grid by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan
+ Columns and Rows 2 | CSS Grid adlı ingilizce örneğe bakınız.
-CSS Grid also includes a shorthand property for defining rows and columns. In our previous example we can replace the properties for `grid-template-rows` and `grid-template-columns` with the shorthand `grid-template` property. Here we can define our rows and columns all at once. For this property, rows are defined before the slash and columns are defined after the slash. Let’s keep the same column and row values, but use the shorthand property instead:
+CSS Grid satırları ve sütunları tanımlamak için kısa özellikler bulunduruyor. Önceki örneğimizde `grid-template-rows` ve `grid-template-columns` özelliklerini kısaca `grid-template` özelliği olarak değiştirebiliriz. Burada satırlarımızı ve sütunlarımızı aynı anda tanımlayabiliriz. Bu özellik için satırlar taksim(slash)(/) işaretinden önce ve sütunlar taksim işaretinden sonra tanımlanır. Hadi aynı sütun ve satır değerlerini kısayol özelliğini kullanarak tanımlayalım:
```css
/* styles.css */
@@ -86,33 +90,33 @@ CSS Grid also includes a shorthand property for defining rows and columns. In ou
}
```
-Columns and rows don’t have to share all the same values either. Let’s change the property values of our columns so that the first column is five times as wide as the others:
+Sütunların ve satırların aynı değere sahip olmasına gerek yoktur. Hadi sütunlarımızın değerlerini ilk sütunumuz diğerlerinin beş katı olacak şekilde değiştirelim:
-
- See the Pen
- Columns and Rows 3 | CSS Grid by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan
+ Columns and Rows 3 | CSS Grid adlı ingilizce örneğe bakınız.
-### Explicit vs implicit grid
+### Belirli grid vs belirsiz grid
-Let's go back to our original example of a simple 2x2 layout for four grid items. What happens if we add a fifth item to our container without changing our `grid-template-columns` or `grid-template-rows` properties?
+Hadi 4 grid öğesi olan 2x2 düzenli orjinal örneğimize geri dönelim. `grid-template-columns` ya da `grid-template-rows` özelliklerini değiştirmeden beşinci bir öğe eklersek ne olacaktır?
-
- See the Pen
- Implicit Grid | CSS Grid by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan
+ Implicit Grid | CSS Grid adlı ingilizce örneğe bakınız.
-You’ll notice our fifth item was placed on the grid and it’s been slotted into a third row we did not define. This is because of the implicit grid concept and it’s how CSS Grid is able to automatically place grid items when we haven’t explicitly defined the layout for them.
+Farkedeceksiniz ki beşinci öğemiz grid içerisine yerleştirildi ve tanımlamadığımız üçüncü satırda yer alıyor. Bunun sebebi belirsiz grid konsepti ve bu CSS Grid'in belirli şekilde tanımlanmadığı zaman grid öğelerini yerleştirme yönetimidir.
-When we use the `grid-template-columns` and `grid-template-rows` properties, we are explicitly defining grid tracks to lay out our grid items. But when the grid needs more tracks for extra content, it will implicitly define new grid tracks. Additionally, the size values established from our `grid-template-columns` or `grid-template-rows` properties are not carried over into these implicit grid tracks. But we can define values for the implicit grid tracks.
+`grid-temlate-colums` ve `grid-temlate-rows` özelliklerini kullandığımız zaman, grid öğelerimizi yerleştirmek için belirleyici şekilde grid çizgilerini tanımlamış oluruz. Lakin grid'in ek içerikler için daha fazla çizgiye ihtiyacı olduğu zaman belirsiz şekilde yeni grid çizgileri tanımlayacaktır. Ek olarak `grid-temlate-colums` ve `grid-temlate-rows` özelliklerinde tanımladığımız boyut değerleri bu belirsiz grid çizgileri etki etmeyecektir. Ama belirsiz grid çizgileri için değerler tanımlayabiliriz.
-We can set the implicit grid track sizes using the `grid-auto-rows` and `grid-auto-columns` properties. In this way we can ensure any new tracks the implicit grid makes for extra content are set at values that we defined.
+Belirsiz grid çizgilerinin boyutlarını `grid-auto-rows` ve `grid-auto-column` özellikleriyle ayarlayabiliriz. Bu sayede belirsiz gride eklenen öğelerin tanımladığımız boyutlara uymalarını sağlayabiliriz.
-Let’s say we want any new rows to stay the same value as our explicit row track sizes:
+Diyelim ki her yeni satırın belirlediğimiz satır çizgilerinin boyutlarına eşit olmasını istiyoruz:
```css
/* styles.css */
@@ -125,66 +129,66 @@ Let’s say we want any new rows to stay the same value as our explicit row trac
}
```
-By default, CSS Grid will add additional content with implicit rows. This means the extra elements would keep being added further down the grid in a vertical fashion. It would be much less common to want extra content added horizontally along the grid, *but* that can be set using the `grid-auto-flow: column` property and those implicit track sizes can be defined with the `grid-auto-columns` property.
+Varsayılan olarak CSS Grid ek olarak eklenen her içeriği belirsiz satır olarak olarak ekler. Bu, ekstra öğelerin gridin aşağısına yatay olarak ekleneceği anlamına gelir. Ekstra içeriğin yatay olarak eklenmesi nadiren istenilen bir şeydir *ama* bu `grid-auto-flows: column` özelliğiyle ve bu belirsiz çizgilerin boyutları `grid-auto-columns` özelliğiyle ayarlanabilir.
-### Gap
+### Aralık
-The gap between grid rows and columns is known as the gutter or alley. Gap sizes can be adjusted separately for rows and columns using the `column-gap` and `row-gap` properties. Furthermore, we can use a shorthand property called `gap` to set both `row-gap` and `column-gap`.
+Grid satırları ve sütunları arasındaki aralık oluk ya da geçit olarak bilinir. Aralık boyutları satırlar ve sütunlar için `column-gap` ve `row-gap` özellikleriyle ayrık olarak ayarlanabilir. Ek olarak `gap` adındaki kısayol özelliğini kullanarak `row-gap` ve `column-gap` tanımlanabilir.
-Before adding our grid gap properties let’s make things a little easier to see without relying on developer tools. We’ll go ahead and add a simple border around our grid items so we can get a better sense of their placement around each other:
+Grid aralığı özelliklerimizi eklemeden önce, geliştirici araçlarına güvenmeden işleri biraz daha kolay görülebilir hale getirelim. Devam edip grid öğelerimizin etrafına basit bir kenarlık ekleyeceğiz, böylece birbirlerinin etrafındaki yerleşimlerini daha iyi anlayabileceğiz:
-
- See the Pen
- Gap 1 | CSS Grid by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan
+ Gap 1 | CSS Grid adlı ingilizce örneğe bakınız.
-Next we’ll use a slight grid column gap to space out our two columns a bit:
+Sonrasında iki sütunumuzu ayırmak için hafif bir sütun aralığı kullanalım:
-
- See the Pen
- Gap 2 | CSS Grid by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan
+ Gap 2 | CSS Grid adlı ingilizce örneğe bakınız.
-Finally we’ll add a lot of gap to our rows to highlight the difference:
+Son olarak aradaki farkı vurgulamak için satırlarımıza fazlaca aralık ekleyelim:
-
- See the Pen
- Gap 3 | CSS Grid by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan
+ Gap 3 | CSS Grid adlı ingilizce örneğe bakınız.
-You can also try playing with the shorthand `gap` to set both the `row-gap` and `column-gap` in the above CodePen.
+Yukarıdaki CodePen örneğinde `gap` kısayoluyla oynarak hem `row-gap` hem de `column-gap` özelliklerini ayarlayabilirsiniz.
-### Wrapping up our first grid
+### İlk grid'imizi tamamlıyoruz
-Now that you’ve made a grid you can start to see how easy it is to control the layout of your elements with CSS Grid. You may also realize how CSS Grid can solve common layout problems. In the next couple lessons we will cover positioning elements and advanced grid attributes. But first, check out the links below that cover making the basics of a grid in more detail.
+Grid'inizi oluşturduğunuza göre CSS Grid ile öğelerinizin düzenini kontrol etmenin ne kadar kolay olduğunu görebilirsiniz. Ayrıca CSS Grid'in yaygın düzen problemlerini nasıl çözebileceğinin farkına varabilirsiniz. Önümüzdeki birkaç derste öğelerin konumlanmasını ve ileri düzey grid özelliklerini ele alacağız. Ama önce grid temellerini konu alan aşağıdaki linklere göz atın.
-### Assignment
+### Ödev
-- Read Parts I, II and III from [CSS-Tricks Complete Guide to Grid.](https://css-tricks.com/snippets/css/complete-guide-grid/)
-- Watch this [short video](https://www.youtube.com/watch?v=8_153Zz4YI8&ab_channel=WesBos) on Implicit vs Explicit Tracks from the Wes Bos CSS Grid course.
-- Look through the developer tools docs on inspecting CSS Grid for [Chrome.](https://developer.chrome.com/docs/devtools/css/grid/)
+- [CSS-Tricks'in ingilizce makalesindeki](https://css-tricks.com/snippets/css/complete-guide-grid/) birinci, ikinci ve üçüncü kısımları okuyun.
+- Web Bos'un Css Grid kursundaki belirli vs belirsiz çizgiler hakkındaki bu ingilizce [kısa videoyu](https://www.youtube.com/watch?v=8_153Zz4YI8&ab_channel=WesBos) izleyin.
+- Chrome geliştirici araçlarından CSS Grid'i incelemekle ilgili olan bu ingilizce [dökümantasyonlara](https://developer.chrome.com/docs/devtools/css/grid/) bakın.
-### Knowledge check
+### Bilgi ölçme
-This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
+Bu bölüm, bu dersi anladığınızı kontrol etmeniz için sorular içermektedir. Aşağıdaki soruları kendi kendinize yanıtlamakta zorlanıyorsanız, yanıtı bulmak için yukarıdaki materyali gözden geçirin.
-- [How does an HTML element become a grid item?](#setting-up-a-grid)
-- [What is the space between lines on the grid?](#columns-and-rows)
-- [How do you set gutters (also known as alleys) in the grid?](#gap)
-- [Describe what happens when you have more content than defined tracks.](#explicit-vs-implicit-grid)
-- [How could you change the size for those undefined tracks?](#explicit-vs-implicit-grid)
+- [Bir HTML öğesi nasıl grid öğesi olur?](#grid-düzeni-kurmak)
+- [Grid'de çizgilerin arasındaki boşluk nedir?](#sütunlar-ve-satırlar)
+- [Grid'de oluklar (geçit olarak da bilinir) nasıl ayarlarsınız?](#aralık)
+- [Tanımlı izlerdan daha fazla içerik olduğunda ne olduğunu açıklayınız.](#belirli-grid-vs-imalı-grid)
+- [Bu tanımlanmamış izlerin boyutlarını nasıl değiştirebilirsiniz?](#belirli-grid-vs-imalı-grid)
-### Additional resources
+### Ek kaynaklar
-This section contains helpful links to other content. It isn’t required, so consider it supplemental.
+Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, ek olarak düşünülmelidir.
-- The [MDN Basic Concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) reviews many of the basics and introduces some additional concepts.
-- Watch this [short video](https://www.youtube.com/watch?v=0m5qgfX2TVQ&ab_channel=PeterSommerhoff) on grid terminology from PeterSommerhoff.
+- MDN'in, [Basic Concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) adındaki ingilizce yazısı temel konuları ve bazı ek konseptleri ele alıyor.
+- PeterSommerhoff'un grid terminolojisi hakkındaki [bu ingilizce kısa videosunu](https://www.youtube.com/watch?v=0m5qgfX2TVQ&ab_channel=PeterSommerhoff) izleyin.
\ No newline at end of file
diff --git a/content/odin/intermediate_html_css/intermediate_css_concepts/positioning.md b/content/odin/intermediate_html_css/intermediate_css_concepts/positioning.md
index 4ef203c7..d9b7e1e3 100644
--- a/content/odin/intermediate_html_css/intermediate_css_concepts/positioning.md
+++ b/content/odin/intermediate_html_css/intermediate_css_concepts/positioning.md
@@ -1,65 +1,70 @@
-### Introduction
+---
+title: 'Konumlandırma'
+---
-By now you have had quite a bit of practice moving elements around the screen using things like margin, padding, and flexbox. These techniques have all relied on CSS's default "positioning-mode". This default positioning-mode is intuitive, and you'll continue using it for almost all of your layout needs. However, there are other methods at your disposal that can be very useful in some situations.
+### Giriş
-### Learning outcomes
+Şimdiye kadar margin (dış kenar boşluğu), padding (iç kenar boşluğu) ve flexbox gibi öğeleri kullanarak öğeleri ekran etrafında hareket ettirme konusunda epey pratik yaptınız. Bu tekniklerin tümü CSS'nin varsayılan "konumlandırma modu" tekniğine dayanmaktadır. Bu varsayılan konumlandırma modu sezgiseldir ve neredeyse tüm düzenleme ihtiyaçlarınız için kullanmaya devam edeceksiniz. Ancak elinizdeki diğer yöntemler bazı durumlarda çok yararlı olabilir.
- - You'll learn how to use absolute positioning.
- - You'll learn how to use fixed positioning.
- - You'll learn how to use sticky positioning.
- - You'll know the difference between each property and how to combine them.
+### Öğrenme çıktıları
-### Static and relative positioning
+ - Mutlak konumlandırmayı nasıl kullanacağınızı öğreneceksiniz.
+ - Sabit konumlandırmayı nasıl kullanacağınızı öğreneceksiniz.
+ - Yapışkan konumlandırmayı nasıl kullanacağınızı öğreneceksiniz.
+ - Her bir özellik arasındaki farkı ve bunları nasıl birleştireceğinizi öğreneceksiniz.
-The default positioning mode that you've gotten used to is ``position: static``. The difference between static and relative is fairly simple. Static is the default position of every element, and properties ``top``, ``right``, ``bottom``, and ``left`` do not affect the position of the element. Relative on the other hand is pretty much the same as static, but properties ``top``, ``right...(etc.)`` displace the element relative to its normal position in the flow of the document.
+### Statik ve göreli konumlandırma
-### Absolute positioning
+Alıştığınız varsayılan konumlandırma modu ``position: static``'tir. Statik ve göreli arasındaki fark oldukça basittir. Static her öğenin varsayılan konumudur ve ``top``, ``right``, ``bottom`` ve ``left`` özellikleri öğenin konumunu etkilemez. Göreli ise statik ile hemen hemen aynıdır, ancak ``top``, ``right...(etc.)`` özellikleri öğeyi belgenin akışı içindeki normal konumuna göre kaydırır.
-``position: absolute`` allows you to position something at an exact point on the screen without disturbing the other elements around it. More specifically, using absolute positioning on an element will remove that element from the normal document flow while being positioned relative to an ancestor element. To put it in simple terms: elements that are removed from the normal flow of the document don't affect other elements and are also not affected by other elements. Using absolute positioning allows you to position elements anywhere on the screen using ``top``, ``right``, ``bottom``, and ``left`` properties. This property is really useful when you want to position something at an exact point on the screen, without disturbing any of the other elements. A couple of good use cases for absolute positioning are:
+### Mutlak konumlandırma
-- modals
-- image with a caption on it
-- icons on top of other elements
+``position: absolute`` bir şeyi diğer öğeleri etkilemeden ekrandaki belirli bir noktaya yerleştirmenizi sağlar. Daha açık bir ifadeyle, bir öğe üzerinde mutlak konumlandırma kullanmak, o öğeyi normal belge akışından çıkarırken, bir ata öğeye göre konumlandırır. Basit bir şekilde ifade etmek gerekirse: belgenin normal akışından çıkarılan öğeler diğer öğeleri etkilemez ve diğer öğelerden de etkilenmez. Mutlak konumlandırmayı kullanmak, ``top``, ``right``, ``bottom``, ve ``left`` özelliklerini kullanarak öğeleri ekranda herhangi bir yere konumlandırmanıza olanak tanır. Bu özellik, diğer öğelerin hiçbirini rahatsız etmeden bir şeyi ekranda tam bir noktaya konumlandırmak istediğinizde gerçekten kullanışlıdır. Mutlak konumlandırma için birkaç iyi kullanım durumu vardır:
-In the following example, we are using absolute positioning to display text over an image.
+- kipler
+- üzerinde bir başlık bulunan resim
+- diğer öğelerin üstündeki simgeler
+
+Aşağıdaki örnekte, bir resim üzerinde metin görüntülemek için mutlak konumlandırma kullanıyoruz.
- See the Pen
- Absolute Position | CSS Positioning by TheOdinProject (@TheOdinProjectExamples)
- on CodePen.
+ TheOdinProject(@TheOdinProjectExamples)
+ tarafından (CodePen'de) hazırlanan Absolute Position | CSS Positioning adlı ingilizce örneğe bakınız.
-Disclaimer: absolute positioning has very specific use cases and if possible, using flexbox or grid should be prioritized. Absolute positioning shouldn't be used to do entire page layouts.
+Uyarı: Mutlak konumlandırmanın çok özel kullanım durumları vardır ve mümkünse flexbox veya grid kullanımına öncelik verilmelidir. Mutlak konumlandırma, tüm sayfa düzenlerini yapmak için kullanılmamalıdır.
-### Fixed positioning
+### Sabit konumlandırma
-Fixed elements are also removed from the normal flow of the document and are positioned relative to the ``viewport``. You basically use ``top``, ``right``, ``bottom``, and ``left`` properties to position it, and it will stay there as the user scrolls. This is especially useful for things like navigation bars and floating chat buttons.
+Sabit öğeler de belgenin normal akışından çıkarılır ve ``viewport``'a göre konumlandırılır. Konumlandırmak için temel olarak ``top``, ``right``, ``bottom`` ve ``left`` özelliklerini kullanırsınız ve kullanıcı kaydırdıkça orada kalacaktır. Bu özellikle gezinme çubukları ve kayan sohbet düğmeleri gibi şeyler için kullanışlıdır.
-### Sticky positioning
+### Yapışkan konumlandırma
-Sticky elements will act like normal elements until you scroll past them, then they start behaving like fixed elements. They are also not taken out of the normal flow of the document. It might sound confusing, but checking out the behavior of [this](https://codepen.io/theanam/pen/MPLBYy) example might clear things up for you. It's useful for things like section-headings. Remember being able to still see what category you're looking at while scrolling through a shop? This is how it's done!
+Yapışkan öğeler, siz onları kaydırana kadar normal öğeler gibi davranır, daha sonra sabit öğeler gibi davranmaya başlarlar. Ayrıca belgenin normal akışından da çıkarılmazlar. Kulağa kafa karıştırıcı gelebilir, ancak [bu ingilizce codepen](https://codepen.io/theanam/pen/MPLBYy) örneği sizin için bazı şeyleri açıklığa kavuşturabilir. Bölüm başlıkları gibi şeyler için kullanışlıdır. Bir mağaza sayfasında kaydırma yaparken hâlâ hangi kategoriyi incelediğinizi görebilmeyi hatırlıyor musunuz? İşte böyle yapılır!
-### Assignment
+### Ödev
-1. [This](https://www.youtube.com/watch?v=jx5jmI0UlXU) video is fast-paced but provides a good visual representation of different positioning behaviors. Go ahead and watch it.
-2. [This MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/position) covers all of the conceptual details about positioning.
-3. [This CSS Tricks](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/) page should give you a different insight on the topic. You should read it as well.
-4. Finally, [this article](https://www.kevinpowell.co/article/positition-fixed-vs-sticky/) discusses the difference between fixed and sticky positioning, it's a great read to understand the difference better.
+1. [Bu](https://www.youtube.com/watch?v=jx5jmI0UlXU) ingilizce Youtube videosu hızlı bir tempodadır ancak farklı konumlandırma davranışlarının iyi bir görsel temsilini sunuyor. Hadi izleyelim.
+2. [Bu ingilizce MDN makalesi](https://developer.mozilla.org/en-US/docs/Web/CSS/position) konumlandırma ile ilgili tüm kavramsal ayrıntıları kapsar.
+3. [Bu ingilizce CSS Tricks](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/) sayfası size konu hakkında farklı bir fikir verecektir. Bunu siz de okumalısınız.
+4. Son olarak, [bu ingilizce makale](https://www.kevinpowell.co/article/positition-fixed-vs-sticky/) sabit ve yapışkan konumlandırma arasındaki farkı tartışıyor, farkı daha iyi anlamak için harika bir okuma.
-### Knowledge check
+### Bilgi ölçme
+
+Bu bölüm, bu dersi anladığınızı kontrol etmeniz için sorular içermektedir. Aşağıdaki soruları kendi kendinize yanıtlamakta zorlanıyorsanız, yanıtı bulmak için yukarıdaki materyali gözden geçirin.
-This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
+- [Statik ve göreli konumlandırma arasındaki fark nedir?](#statik-ve-göreli-konumlandırma)
+- [Mutlak konumlandırma ne işe yarar?](#mutlak-konumlandırma)
+- [Sabit ve yapışkan konumlandırma arasındaki fark nedir? ilgili ingilizce makale için tıklayın.](https://www.kevinpowell.co/article/positition-fixed-vs-sticky/)
-- [What is the difference between static and relative positioning?](#static-and-relative-positioning)
-- [What is absolute positioning useful for?](#absolute-positioning)
-- [What is the difference between fixed and sticky positioning?](https://www.kevinpowell.co/article/positition-fixed-vs-sticky/)
-### Additional resources
+### Ek kaynaklar
-This section contains helpful links to related content. It isn’t required, so consider it supplemental.
+Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, ek olarak düşünülmelidir.
-- [Understand the CSS Position Property With Practical Examples](https://www.makeuseof.com/css-position-property-practical-examples/) provides some different CSS methods for positioning elements.
+- [Understand the CSS Position Property With Practical Examples](https://www.makeuseof.com/css-position-property-practical-examples/) adlı ingilizce makale, öğeleri konumlandırmak için bazı farklı CSS yöntemleri sunmaktadır.