initial commit

1 files changed, 105 insertions, 0 deletions

diff --git a/files/tr/öğren/css/ilk_adimlar/ogrendiklerinizi_uygulayın/index.html b/files/tr/öğren/css/ilk_adimlar/ogrendiklerinizi_uygulayın/index.html
new file mode 100644
index 0000000000..3282953c36
--- /dev/null
+++ b/files/tr/öğren/css/ilk_adimlar/ogrendiklerinizi_uygulayın/index.html
@@ -0,0 +1,105 @@
+---
+title: Öğrendiklerini uygula
+slug: Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın
+tags:
+  - Acemi
+  - Başlangıç
+  - Beginner
+  - CSS
+  - Eğitim
+  - Learn
+  - Playground
+  - oyun alanı
+translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
+---
+<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">Son birkaç derste öğrendiklerinle, basit bir metin belgesine CSS'i kullanarak, onlara kendi stilini uygulayabileceğini gördün. Bu makele öğrendiklerini uygulayabileceğini gösterecektir.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Ön Koşul:</th>
+   <td>Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış  ve HTML temellerini anlamış olman gerekir (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Başlangıç_noktası">Başlangıç noktası</h2>
+
+<p>Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">örnek dosyayı </a>indirebilirsin. Bu, HTML içeren tek bir dosyadır ve içerisinde "Dahili CSS" tanımları vardır. Alternatif olarak çevrimiçi(online) kod düzenleyebileceğin şu sayfalarıda kullanabilirsin: <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ve <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: Takıldığın noktalarda bizden yardım isteyebilirsin — <a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge#Assessment_or_further_help">Değerlendirme ve daha fazlası</a> bölümüne bakabilirsin.</p>
+</div>
+
+<h2 id="CSS_ile_çalışmak">CSS ile çalışmak</h2>
+
+<p>Aşağıdaki etkileşimli örnek, CSS kullanılarak şekillendirilmiş bir biyografiyi göstermektedir. Kullandığım CSS nitelikleri aşağıdaki gibidir — her biri MDN'deki nitelik sayfasına bağlanır, bu size kullanımıyla ilgili daha fazla örnek verecektir.</p>
+
+<ul>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
+
+<p>Seçicilerden, h1 ve h2 gibi stil etiketlerinin bir karışımını kullandım, ancak aynı zamanda iş başlığı için bir sınıf oluşturdum ve onu şekillendirdim.</p>
+
+<p>Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.</p>
+
+<ol>
+ <li>CSS <code>color</code> niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(<code>hotpink)</code> yap.</li>
+ <li>Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(<code>dotted</code>) çizgi atın ve rengini mor(<code>purple</code>) yap.</li>
+ <li>2. düzey başlığı italik yap.</li>
+ <li><code>ul</code> etikemizin arka plan renk {{cssxref("background-color")}}  değerini #eeeeee yap ve ayrıca mor(<code>purple</code>) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için <code>paddin</code> niteliğine kullan.</li>
+ <li>Linklerin üzerine gelindiğinde renginin yeşil(<code>green</code>) olmasını sağla.</li>
+</ol>
+
+<p>Çıktının resimdeki gibi gözükmesi gerekmektedir.</p>
+
+<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
+
+<p><a href="/tr/docs/Web/CSS/Reference">MDN CSS reference</a> safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!</p>
+
+<p>Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
+
+<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2>
+
+<p>Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:</p>
+
+<ol>
+ <li>Çalışmanı <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, veya <a href="https://glitch.com/" rel="noopener">Glitch</a> gibi çevrimiçi bir düzenleyiciye kaydet.</li>
+ <li><a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler:
+  <ul>
+   <li>"CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.</li>
+   <li>Hali hazırda denediklerini ve bizden ne yapmamızı istediğinle ilgili ayrıntılar. Örneğin, bir niteliğe değer atarken sorunla karşılaşırsan veya yaptığının değerlendirilmesini istiyorsan.</li>
+   <li>Yukarıdaki 1. adımda bahsedilen çevrim içi düzenleyicilere kaydettiğin kodun bağlantısı. Bu, bizden istediğin değerlendirme ve yardım için gereklidir. Göremediğimiz kod üzerinden birisine yardım etmek çok zordur.</li>
+   <li>Yardım istediğin konunun <em><u>sorusunu</u> </em>içeren sayfanın bağlantısı.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Sıradaki_ne">Sıradaki ne?</h2>
+
+<p>Bu ilk üniteyi tamamladığın için tebrikler. Artık CSS hakkında iyi bir genel anlayışa sahip olmalısın ve bir stil sayfasında olup bitenlerin çoğunu anlayabiliyorsundur. bir sonraki ünite olan <a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşlarında</a>, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.</p>
+
+<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="Bu_ünitede">Bu ünitede</h2>
+
+<ol>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li>
+</ol>