Merge branch 'dev' into form_basics_md

kamp-us · May 23, 2024 · 9e4b809 · 9e4b809
2 parents 7c2bccb + c182bbd
commit 9e4b809
Show file tree

Hide file tree

Showing 78 changed files with 4,306 additions and 346 deletions.
diff --git a/apps/kampus/app/odin/curriculum-list.ts b/apps/kampus/app/odin/curriculum-list.ts
@@ -102,8 +102,8 @@ const foundationsCurriculum = {
           url: "temel-bilgiler/html-css/html-temelleri/html-sablonu",
         },
         {
-          title: "Metin İle Çalışma",
-          url: "temel-bilgiler/html-css/html-temelleri/metin-ile-calisma",
+          title: "Metin İle Çalışmak",
+          url: "temel-bilgiler/html-css/html-temelleri/metin-ile-calismak",
         },
         {
           title: "Listeler",
@@ -160,11 +160,11 @@ const foundationsCurriculum = {
           url: "temel-bilgiler/html-css/flexbox/grow-ve-shrink",
         },
         {
-          title: "Eksenler",
+          title: 'Eksenler',
           url: "temel-bilgiler/html-css/flexbox/eksenler",
         },
         {
-          title: "Hizalama",
+          title: 'Hizalama',
           url: "temel-bilgiler/html-css/flexbox/hizalama",
         },
         {
@@ -178,27 +178,27 @@ const foundationsCurriculum = {
       lessons: [
         {
           title: "JavaScript Temelleri Bölüm 1",
-          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-1",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-bolum-1",
         },
         {
           title: "JavaScript Temelleri Bölüm 2",
-          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-2",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-bolum-2",
         },
         {
           title: "JavaScript Geliştirici Araçları",
           url: "temel-bilgiler/javascript-temelleri/javascript-gelistirici-araclari",
         },
         {
           title: "JavaScript Temelleri Bölüm 3",
-          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-3",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-bolum-3",
         },
         {
           title: "Problem Çözme",
           url: "temel-bilgiler/javascript-temelleri/problem-cozme",
         },
         {
-          title: "Hataları Anlama",
-          url: "temel-bilgiler/javascript-temelleri/hatalari-anlama",
+          title: "Hata Mesajlarını Anlamak",
+          url: "temel-bilgiler/javascript-temelleri/hata-mesajlarini-anlamak",
         },
         {
           title: "Proje: Taş Kağıt Makas",
@@ -214,7 +214,7 @@ const foundationsCurriculum = {
         },
         {
           title: "JavaScript Temelleri Bölüm 4",
-          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-4",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-bolum-4",
         },
         {
           title: "DOM Manipülasyonu ve Eventler",
@@ -230,7 +230,7 @@ const foundationsCurriculum = {
         },
         {
           title: "JavaScript Temelleri Bölüm 5",
-          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-5",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-bolum-5",
         },
         {
           title: "Proje: Hesap Makinesi",
@@ -239,11 +239,11 @@ const foundationsCurriculum = {
       ],
     },
     {
-      header: "Her Şeyi Bir Araya Getirme",
+      header: "Sonuç",
       lessons: [
         {
-          title: "Her Şeyi Bir Araya Getirme",
-          url: "temel-bilgiler/her-seyi-birlestirme/her-seyi-bir-araya-getirme-sonuc",
+          title: "İlerlemek İstediğin Yolu Seç",
+          url: "temel-bilgiler/ilerlemek-istegin-yolu-sec",
         },
       ],
     },

diff --git a/content/odin/foundations/html_css/css-foundations/intro-to-css.md b/content/odin/foundations/html_css/css-foundations/intro-to-css.md
@@ -284,7 +284,7 @@ Resim dosyasının orijinal değerlerini değiştirmeyi planlamıyorsak bile `<i
 
 ### HTML'e CSS Ekleme
 
-Artık bazı temel sözdizimlerini öğrendiğimize göre, tüm bu CSS'i HTML'imize _nasıl_ ekleyeceğimizi merak ediyor olabilirsiniz. Bunu üç yöntemle yapabiliriz.
+Artık bazı temel sözdizimlerini öğrendiğimize göre, bu CSS'leri HTML dosyamıza _nasıl_ ekleyeceğimizi merak ediyor olabilirsiniz. Bunu üç yöntemle yapabiliriz:
 
 #### Harici CSS
 
@@ -370,7 +370,7 @@ _Tek bir_ öğeye _benzersiz_ bir stil eklemeniz gerekiyorsa bu yöntemi kullana
 
 <div class="lesson-content__panel" markdown="1">
 
-1.  [Odin Project CSS alıştırmaları repository'sine](https://github.com/TheOdinProject/css-exercises) gidin, aşağıdaki alıştırmaları sırasıyla tamamlamadan önce her bir README dosyasını gözden geçirin:
+1.  [Odin Project CSS alıştırmaları repository'sine](https://github.com/TheOdinProject/css-exercises) gidin ve README dosyasını okuyun. Daha sonra aşağıdaki alıştırmaları sırasıyla tamamlamadan önce her bir README dosyasını gözden geçirin:
     - `01-css-methods`
     - `02-class-id-selectors`
     - `03-group-selectors`

diff --git a/content/odin/foundations/html_css/css-foundations/the-box-model.md b/content/odin/foundations/html_css/css-foundations/the-box-model.md
@@ -27,11 +27,11 @@ Bir internet sayfasındaki her şey dikdörtgen bir kutudur. Bu kutular, içleri
 }
 ```
 
-![boxes](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/the-box-model/imgs/boxes.png)
+![boxes](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/css-foundations/the-box-model/imgs/boxes.png)
 
 Yukarıdaki CSS'i bu internet sayfasına eklemek isterseniz, bunun için tarayıcının denetleyicisini kullanabilirsiniz. Kutular içinde kutular!
 
-![lines](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/the-box-model/imgs/odin-lined.png)
+![lines](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/css-foundations/the-box-model/imgs/odin-lined.png)
 
 Tamam, yukarıdaki resimde bazı daireler olabilir... ama söz konusu düzen olduğunda, bu öğeler daireler gibi değil, dikdörtgen kutular gibi bir araya gelirler. Sonuçta, bir internet sayfasını düzenlemek ve tüm öğelerini konumlandırmak, bu kutuları nasıl iç içe geçireceğinize ve üst üste koyacağınıza karar vermekten ibarettir.
 
@@ -43,7 +43,7 @@ Buradaki tek gerçek karmaşıklık, `iç kenar boşluğu`, `dış kenar boşlu
 
 Diyagramları dikkatlice incelediğinizden emin olun.
 
-![the box model](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/the-box-model/imgs/box-model.png)
+![the box model](https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/css-foundations/the-box-model/imgs/box-model.png)
 
 ### Ödev
 

diff --git a/content/odin/foundations/html_css/flexbox/flexbox-alignment.md b/content/odin/foundations/html_css/flexbox/flexbox-alignment.md
@@ -1,5 +1,5 @@
 ---
-title: 'Flexbox ile Hizalama'
+title: 'Hizalama'
 ---
 
 ### Giriş

diff --git a/content/odin/foundations/html_css/flexbox/flexbox-axes.md b/content/odin/foundations/html_css/flexbox/flexbox-axes.md
@@ -1,5 +1,5 @@
 ---
-title: 'Flexbox Eksenleri'
+title: 'Eksenler'
 ---
 
 ### Giriş

diff --git a/content/odin/foundations/html_css/flexbox/project-landing-page.md b/content/odin/foundations/html_css/flexbox/project-landing-page.md
@@ -0,0 +1,87 @@
+---
+title: 'Proje: Açılış Sayfası'
+---
+### Giriş
+
+
+Bu proje için size vereceğimiz bir tasarımdan tüm bir web sayfası oluşturacaksınız. Eğer dersleri buraya kadar takip ettiyseniz, bunu başarmak için gereken becerilere sahip olmalısınız, ancak kolay olmayabilir!
+
+
+Size sunduğumuz tasarım 2 resimden oluşuyor: biri web sitesinin tamamının resmi, diğeri ise kullandığımız bazı yazı tipleri ve renkler hakkında bazı ayrıntılar içeriyor.
+
+Bir şeye bakmak için Google kullanmaktan veya önceki derslere geri dönmekten _korkmayın_. **Gerçek hayatta, profesyonel geliştiriciler yıllardır yaptıkları şeyler için Google'ı _sürekli_ kullanırlar.** Bu noktada her şeyi ezberlemiş olmanız beklenmiyor, bu nedenle bu konuda endişelenmeyin. Ayrıca, derslerimizde henüz karşılaşmamış olabileceğiniz birkaç küçük ayrıntı var. _Bunlar tasarım kaynaklı_ küçük ayrıntılardır ve kolayca bulunabilirler (örneğin Google'da `css rounded corners`).
+
+
+Projenizi tasarıma olabildiğince benzetmeye çalışın, ancak piksel mükemmelliğine ulaşma konusunda endişelenmeyin. Çeşitli bölümler arasındaki tam kenar boşluklarını bulmak için cetvelinizi çıkarmayın veya pikselleri saymayın. Bu ödevin amacı, sıfırdan bir şey yaratmak ve çeşitli unsurları diğerlerine göre aşağı yukarı doğru konuma getirmektir. Tasarımın aslında `margin: 48px`'i varken, sizin `margin: 24px` kullanmanız önemli değil.
+
+
+_Son olarak_, bu tasarıma kendinizden eklemeler yapmaktan çekinmeyin. Resimlerde bazı anlamsız yer doldurmalık içerikler var, ancak bir iş uydurmak ve bu sayfayı kişiselleştirmek istiyorsanız, lütfen bunu yapmaktan çekinmeyin! Yer doldurmalık resimler yerine gerçek resimler ekleyin ve renklerle ve yazı tipleriyle de biraz oynamaktan çekinmeyin.
+
+
+<div class="lesson-note" markdown="1">
+
+#### Web'deki resimler hakkında bir not
+
+Web üzerinde bulduğunuz herhangi bir görseli kullanmak için yasal hakkınız yoktur. Bulabileceğiniz pek çok ücretsiz görsel var, ancak kullandığınız görselin gerçekten kullanmanız için ücretsiz olduğundan emin olun ve projenizde görselin yaratıcısına referans verdiğinizden emin olun. Referans vermenin kolay bir yolu, reponuzdaki bir README dosyasına oluşturucunun adını ve iletişim bilgilerini koymaktır.
+
+
+
+Web'de kullanımı ücretsiz görseller bulmak için bazı iyi yerler şunlardır [Pexels](https://www.pexels.com/), [Pixabay](https://pixabay.com/) ve [Unsplash](https://unsplash.com/).
+
+</div>
+
+### Projenizin GitHub reposunu ayarlama
+
+Tarifler projesinde yaptığımız gibi, bu proje üzerinde çalışmaya başlamadan önce bir git reposu kurun. Git ve GitHub ileride sizin için bir portföy görevi görecek, bu yüzden her şeyi orada tutmanız gerekiyor! Nasıl kuracağınıza dair bir hatırlatıcıya ihtiyacınız olursa [önceki derse](https://www.theodinproject.com/lessons/foundations-recipes) geri dönün.
+
+### Kendi kodunuzu tamamlamadan önce başkalarının bitmiş proje kodlarına bakma konusunda uyarı
+
+Tüm projelerimizin altında, insanların tamamlanmış kodlarını ve projeler için canlı web sitelerini yayınlamaları için bir "Öğrenci Çözümleri" bölümü vardır. Bunlar, hem tamamladığınız kodu karşılaştırmanız hem de insanların proje kodları ve tasarımlarıyla hangi diğer rotaları seçtiklerini görmeniz için burada.
+
+Sıkıştığınızda veya nereden başlayacağınızı bilemediğinizde çözümlere bakmanın cazip gelebileceğini biliyoruz, ancak **bunu yapmayın!** İşte size bazı nedenler:
+
+- Gönderilen tüm projeler *diğer öğrencilerin* çözümleridir. Bu, hala öğrenmekte olan diğer insanlar tarafından yazıldıkları ve "en iyi uygulama" veya yüksek kaliteli kodu temsil etmeyebilecekleri anlamına gelir.
+- Çözümlere bakmak sizi problem çözme ve araştırma becerilerinizi geliştirme şansından mahrum bırakır. Gerçek dünyada, her zaman bakabileceğiniz "çözümler" olmayacaktır ve kendi çözümlerinizi bulmanız gerekecektir.
+- Aynı sonuca ulaşmanın birçok farklı yolu vardır - bu "her soruna uygun bir çözüm" değildir.
+
+- Bir benzetme: "Tamamlanmış bir koda bakarak kod yazmayı öğrenmek, pişmiş bir pizzaya bakarak pizza hamuru yapmayı öğrenmeye benzer."  Sadece nihai ürünü görerek ve ona giden süreci görmeyerek tahmin edebileceğinizden çok daha fazla şey var.
+
+
+Projenizi tamamladıktan sonra, projenin tamamlandığı alternatif yolları görmek için diğer çözümlere bakmaktan çekinmeyin.
+
+**SADECE BAKMAYIN. [Discord server]'ından yardım isteyin (https://discord.com/channels/505093832157691914/516751477306294273) _(Kanalı görmek için [Discord Sunucusuna Katıl](https://discord.gg/fbFCkYabZB))._**
+
+### Ödev
+
+
+<div class="lesson-content__panel" markdown="1">
+Erken ve sık sık commit atmayı unutmayın! [Commit Mesajı dersine buradan geri dönebilirsiniz](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages)!
+
+1. Tasarım görsellerini indirin ve burada ne oluşturacağınıza bir göz atın. [Birinci Resim (Tam Tasarım)](https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/01.png), [İkinci Resim (Renk ve Fontlar)](https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/02.png)
+    1. Resimlerde kullanılan yazı tipi Roboto'dur.
+    2. `hero` metin, bir web sayfasının en üstünde görünen ifadedir.
+2. Bunun gibi bir projeyi ele almanın birçok yolu vardır ve boş bir HTML belgesine bakıp nereden başlayacağınızı bilememek çok zor olabilir. Önerimiz: her seferinde bir bölümü ele alın. Oluşturduğunuz web sitesinde 4 ana bölüm (ve bir altbilgi) vardır, bu nedenle birini seçin ve devam etmeden önce oldukça iyi bir şekle getirin. En üstten başlamak her zaman sağlam bir plandır.
+3.Üzerinde çalıştığınız bölüm için, stil vermeye başlamadan önce tüm içeriği sayfaya yerleştirerek başlayın. Başka bir deyişle, HTML'yi yapın ve _sonra_ CSS'yi yapın. Şekillendirmeye başladığınızda muhtemelen HTML'ye geri dönmeniz gerekecektir, ancak başlangıçtan itibaren ileri geri gitmek daha fazla zaman alacak ve daha fazla hayal kırıklığına neden olabilecektir. (Not: Birden fazla stil sayfası kullanmanıza gerek yok. Bu proje için sadece bir CSS dosyası kullanmak yeterlidir).
+
+4. Bu sayfadaki öğelerin çoğu flexbox alıştırmalarımızda gördüklerinize çok benziyor... tazelemeye ihtiyacınız olursa o sayfalara geri dönmekten çekinmeyin.
+5. Projenizin mobil cihazda güzel görünmesi konusunda endişelenmeyin. Bunu daha sonra öğreneceğiz.
+6. Bitirdiğinizde GitHub'a göndermeyi unutmayın!
+</div>
+
+### Projenizi web üzerinde görüntüleme
+
+Çalışmanızı(projenizi) başkalarına göstermek veya aşağıdan bir çözüm göndermek istiyorsanız, sitenizi yayınlamanız gerekecektir, böylece başkaları sadece yerel makinenizden değil, web'den de erişebilir. İyi haber şu ki, projeniz GitHub'daysa(yukarıda açıklandığı gibi), bunu yapmak basit olacaktır.
+
+
+GitHub, web projelerini doğrudan bir GitHub reposundan yayınlamanıza olanak tanır. Bunu yapmak projenize `your-github-username.github.io/your-github-repo-name` adresinden erişmenizi sağlayacaktır
+
+
+Projenizi yayınlamak için birkaç yol vardır, ancak en basit olanı aşağıdakidir:
+
+- Projenizin ana HTML dosyasının `index.html` olarak adlandırıldığından emin olun. Eğer değilse, yeniden adlandırmanız gerekir.
+- Web üzerinden GitHub reponuza gidin ve aşağıdaki ekran görüntüsünde gösterildiği gibi **Settings** düğmesine tıklayın.
+
+    ![Screenshot pointing to the Settings located in an example repository](https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/03.png)
+- Sol taraftaki çubukta **Sayfalar** üzerine tıklayın.
+- **Branch'i** _none_ yerine _main branch_ olarak değiştirin ve Kaydet'e tıklayın.
+- Birkaç dakika sürebilir (GitHub web sitesi 10 dakikaya kadar diyor), ancak projenize web üzerinden `github-kullanıcı-adınız.github.io/your-github-repo-name` adresinden erişilebilir olmalıdır (tabii ki bağlantıda kendi bilgilerinizi değiştirerek).
diff --git a/content/odin/foundations/html_css/html-foundations/elements-and-tags.md b/content/odin/foundations/html_css/html-foundations/elements-and-tags.md
@@ -37,12 +37,16 @@ Tamamlanmış bir paragraf etiketi şu şekilde gözükür:
 
 Elementleri içerik taşıyıcıları olarak düşünebilirsiniz. Açılış ve kapanış etiketleri tarayıcıya elementlerin ne taşıdığını bildirir. Tarayıcı böylece gelen içeriği nasıl göstereceğine karar verir.
 
-Bazı HTML elementleri kapanış etiketi içermez. Bu elementler genellikle böyle gözükür: `<br />`, `<img/>` ancak bazıları ileride göreceğiniz gibi eğik çizgi olmadan da kullanılabilir: `<br>`, `<img>`. Bu tip elementler kendiliğinden kapanan(self-closing) element veya boş element olarak da adlandırılabilirler, çünkü herhangi bir içerik çevrelemezler. Bunlardan bazılarını ileride göreceğiz fakat çoğu element hem açılış hem kapanış etiketine sahiptir.
-
 HTML size istediğiniz her şeyi üretmeniz için [önceden tanımlanmış elementlerin geniş listesi](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) sunar. İçerikleriniz için doğru etiketi kullanmak önemlidir. Doğru etiketleri kullanmak siteniz için şu iki konuda önemli bir etkiye sahiptir: sitenizin arama motorlarında nerede sıralandığı; sitenizin ekran koruyucu(screen reader) gibi eklentiler kullanan kullanıcılara ne kadar erişilebilir olduğu.
 
 İçeriğiniz için doğru etiketler kullanmaya semantik HTML denir. Bunun hakkında detaylı bilgiyi ileride göreceğiz.
 
+### İçerik İçermeyen Elementler
+
+Bazı HTML elementleri kapanış etiketi içermez. Bu elementler genellikle böyle gözükür: `<br >`, `<img>`. Bu tip elementler i̇çerik i̇çermeyen elementler olarak da adlandırılabilirler, çünkü herhangi bir içerik çevrelemezler. Kapanış etiketi olmaması, diğer etiketlerin yaptığı gibi içeriği sarmalayamayacakları anlamına gelir.
+
+Bunlar aynı zamanda kendiliğinden kapanan etiketler olarak adlandırılır. Ancak bunlar sadece ileri eğik çizgi (/) ile biten boş öğelerdir, örneğin: <br /> veya <img />. Tarihsel nedenlerden dolayı, bu kendiliğinden kapanan etiketleri sıkça görebilirsiniz. Tarayıcılar bunları sorunsuz bir şekilde işleyebilir, ancak HTML spesifikasyonunun en son sürümü, bu kullanımı önermez ve geçersiz olarak kabul eder.
+
 ### Ödev
 
 <div class="lesson-content__panel" markdown="1">

diff --git a/content/odin/foundations/html_css/html-foundations/lists.md b/content/odin/foundations/html_css/html-foundations/lists.md
@@ -24,9 +24,10 @@ Sırasız listeler `<ul>` öğesi kullanılarak oluşturulur,  <span id="li"></s
 Sırasız bir listedeki her liste öğesi bir madde işaretiyle başlar:
 
 <p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="powjajd" data-user="TheOdinProjectExamples" style={{"height":"300px","boxSizing":"border-box","display":"flex","alignItems":"center","justifyContent":"center","border":"2px solid","margin":"1em 0","padding":"1em"}}>
-  <span>
+  <span> 
   <a href="https://codepen.io">CodePen</a>'de
-  TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>) tarafından hazırlanan <a href="https://codepen.io/TheOdinProjectExamples/pen/powjajd">html-sırasız-listesi</a>'ni inceleyebilirsiniz.</span>
+  TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>) tarafından hazırlanan <a href="https://codepen.io/TheOdinProjectExamples/pen/powjajd">html-sırasız-listesi</a>'ni inceleyebilirsiniz.
+  </span>
 </p>
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
@@ -37,7 +38,8 @@ Bunun dışında, bir yemek tarifi için adım adım talimatlar veya en sevdiği
 Sıralı listeler `<ol>` öğesi kullanılarak oluşturulur. İçlerindeki her bir öğe yine `<li>` öğesi kullanılarak oluşturulur. Ancak, sıralı bir listedeki her liste öğesi bunun yerine bir sayıyla başlar:
 
 <p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="yLXYvYp" data-user="TheOdinProjectExamples" style={{"height":"300px","boxSizing":"border-box","display":"flex","alignItems":"center","justifyContent":"center","border":"2px solid","margin":"1em 0","padding":"1em"}}>
-  <span><a href="https://codepen.io">CodePen</a>'de
+  <span>
+  <a href="https://codepen.io">CodePen</a>'de
  TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>) tarafından hazırlanan <a href="https://codepen.io/TheOdinProjectExamples/pen/yLXYvYp">html-sıralı-listesi</a>'ni inceleyebilirsiniz.
 </span>
 </p>