Frontend Bootcamp

Doğru HTML etiketleri kullanıp, nerede span nerede h1 kullanmamız gerektiğini üzerinde durduk.

• HTML etiketleri (html, head, body, title, UTF-8, lang="tr", h1, p, span, a, img, table)
• DOCTYPE nedir?
• DOM nedir?
• meta viewport nedir?
• Semantic HTML nedir?
• CSS seçiciler - id, class, !important - inline, inline-block, block - margin, padding
• CSS kodunu hangi tarayıcı hangi versiyonda destekliyor?

Tasarımı koda döktüğümüz işlemin adı Psd to CSS.

• Psd to CSS
• box-sizing nedir?
• CSS attribute seçici
• CSS ::placeholder seçici
• Google DevTools
• Google Font - Google Font nasıl kullanılır?
• normalize.css - reset.css ve normalize.css nedir?
• CSS stil rehberi
• HTML Form Elemanları

• Color Zilla (Sayfadaki rengi almak için)
• WhatFont (Sayfadaki yazı stilini seçmek için)
• Emmet (Hızlı HTML CSS yazmak için) - (Emmet nasıl kullanılır?)
• Live Server (HTML'in anlık yenilenmesi için)

• Form Tasarımı
• Kart Tasarımı

Ağırlıklı olarak CSS seçicilerin üstünde durduk.

• Frontend Roadmap - (Yol haritası)
• CSS position - (relative, absolute, fixed)
• CSS seçiciler - (:hover, :focus, :nth-child, :nth-child(odd) ::before, ::after)

Kodu daha sağlıklı, anlaşılır ve kolay yazmamızı sağlayan teknolojileri tanıdık.

• CSS variable
• BEM
• CSS Flexbox - (flex, direction, justify-content, align-items)
• SASS - (nesting, variable)

• Live Sass Compiler (SCSS kodunu CSS'e çevirir)

• Tasarım koda dökülecek - Figma İndir
  (Eğitimde gördüğümüz her şeyi kullanmaya çalışın, BEM, SASS, variable, flex, Google fonts vb.)
• Khan Academy Testleri Çözülecek

Trafalgar Langing tasarımını Semantic HTML, BEM, SASS ve Bootstrap kullanarak koda döktük.

• CSS'te background-image
• CSS'te flex-direction
• atomic design
• Mobile first kavramı
• @media query
• Bootstrap grid system - (Grid sistemi kullanımı)

• Covid19 tasarımı koda dökülecek
• Data warehouse tasarımı koda dökülecek

Bootstrap'i Codepen'de Ayarlar > Css > arama kısmına Bootstrap yazarak yada sitesinden indirerek yada CDN ile kodunuza ekleyebilirsiniz.

Eğitimde gördüğümüz her şeyi kullanmalıyız:
BEM, SASS, variable, flex, Google fonts, media query, Bootstrap grid system vb.
@media query'ler yardımıyla mobil ve tablet üstü için farklı kodlar yazalım; yazıların fontlarının küçülmesi, resimlerin mobilde gizlenmesi, yan yana olan şeylerin mobilde alt alta gelmesi gibi. Tasarımı yorumlamakta özgürsünüz.

• Fatih Hayrioğlu'nun CSS Dersleri
• Prototurk Youtube kanalında HTML, CSS ve Frontend Daily oynatma listeleri
• Adem İlter'in Sıfırdan CSS Eğitim ve HTML+CSS Öğreniyoruz oynatma listeleri

Git ile temel komutları gösterip JavaScript temellerini gördük.

• Git - (master, checkout, branch, add, commit, push, merge, pull, fetch, conflict)
• JavaScript (script tag'i, değişkenler -array - booleans, if/else, for, log, debugger, promp)

• JavaScript Ödev - Pratik
  Değişken, for ve if kullanılarak aşağıdaki senaryo oluşturulacak.
  Örnek çıktı şu şekilde olacaktır: Ömer doğdu, Ömer 1 yaşında, Ömer 2 yaşında, ... Ömer reşit oldu, Ömer 30 yaşında evlendi

  Yapılacaklar:

  • ad, resitYas, evlenecegiYas değişkenleri oluşturulacak
  • evlenecegiYas değişkeni promp() ile kullanıcıya sorulacak
  • for ile 0'dan 35'e kadar döngü oluşturulacak
  • Kişinin yaşı 0 ise doğdu, 18 ise reşit oldu, 'evlenecegiYas' ise konsola evlendi yazacak

• JavaScript (Events, dir, forEach, function, classList , innerText, innerHTML)

• JavaScript Ödev - Koyu Tema
  Butona basıldığında koyu tema atkifleştirilip, kaldırılacak.

  Yapılacaklar:

  • Ekranda çeşitli yazılarak olacak.
  • "Koyu temayı aç" butonuna basılınca arkaplan ve yazı renkleri değişecek ve buton "Koyu temayı kapat" olacak.
• JavaScript Ödev - Üyelik Form Kontrol
  Ad, soyad, kullanıcı adı, email, parola, parola tekrar formu hazırlanacak.
  Submit edildiğinde kurallara göre sonuç verecek.
  

  Yapılacaklar:

  • Ad soyad otomatik olarak kullanıcı adı yapılacak; Ömer+Gülçiçek = ömergülçiçek
  • Submit edildiğinde parola eşleşmiyorsa yada 8 karakterden az ise kırmızı bir div'e "Parolanız 8 karakterden az yada eşleşmiyor" yazmalı
  • Form başarılı ise yeşil bir div'e "Hoşgeldin @ömergülçiçek" yazmalı
• JavaScript Ödev - Çekiliş Uygulaması (İsteğe bağlı)
  Kullanıcıdan input ile kullanıcı listesi alınacak ve rastgele hediye dağıtılacak.
  

  Yapılacaklar:

  • Kullanıcı input'a virgüller ile sürüyle isim girecek ("Ali, Veli, Ayşe, Zeynep" vb.).
  • Submit butonuna basıldığında bu isimler split() fonksiyonu ile diziye aktarılacak.
  • Kullanıcı sayısı kadar rastgele bir rakam seçilip o kişiye rastgele bir hediye verilecek.
  • Hediye kazanan kişiler ve verilen hediyeler dizilerden kaldırılmalı
  • En son kimin ne hediye kazandığı ekrana yazdırılacak

Geniş kapsamlı JavaScript örneği üzerinde duruldu ve genel tekrar yapıldı.

• JavaScript Ödev - Tiyatro Oturma Planı
  Kimin hangi sırada oturacağını çeken JavaScript kodu geliştirilecek.

  Yapılacaklar:

  • Id, katılımcı ismi, tiyatroya gelecek mi checkbox'ı ve sıra numarasını alan bir input olacak.
  • Sıra numarası varsayılan olarak disabled gelecek.
  • Partiye gelecek mi checkbox'ı dinlenecek, eğer gelecek ise sıra numarası yazılabilir olacak.
  • Sırayı kaydet butonuna tıklanıldığında tablodan veriler okunulacak ve konsola yazdırılacak.
  • Çıktı içerisinde, id ve sıra numarasını tutan objeleri kapsayan bir array oluşacak.

CRA ile React temellerini gördük.

• React (Virtual DOM, JSX, Create React App, export default - import, components - props)

• React (Hooks, State, Conditional Rendering, Handling Event)

• React Developer Tools - (DevTools'ta React componentlerini görmek için)

• React Router
• JSON Server
• Axios

• React Ödev - Objeden header oluşturma ve state pratikleri
  Verilen headerLinks dizisi ile istenilen layout ve ve isimlerde geliştirme tamamlanacaktır.

  Yapılacaklar:

  • headerLinks dizisi <Header /> componentine parametre olarak gönderilecek ve menü renderlanacak.
  • <input>'a girilen değer anlık olarak <UserCard /> componentine gönerilip, ekrana yazılacak.

Bitirme projesi olarak daha önce geliştirdiğimiz Covid19 tasarımı React ile koda dökülecek. İsteyen kişiler şartları sağlayan ve işlediğimiz konuları içeren herhangi bir başka proje geliştirilebilir.

• Proje Create React App başlangıç kiti ile koda dökülecek.
• Semantic HTML etiketleri kullanılacak.
• CSS kısmında SASS/LESS yada Styled Component kullanılabilir (Düz CSS kullanmayın).
• SASS yada LESS ile geliştirenler BEM kullanmalı.
• Bootstrap grid sistemi ile mobil öncelikli geliştirilecek.
• React Router ile geliştirilecek (Tasarımdaki section'ları farklı sayfalarda geliştirin).
• Statik yazılar hariç her yazı, verilen obje render'lanarak ekrana yazılacak.
• Hook (useState ve useEffect) kullanın.
• Proje GitHub'a atılacak.

• Tasarımın mobil ve tablet versiyonu olmadığı için buralarda esnek davranmanız serbest. Yazı boyutları ve margin/padding'leri azaltarak mobile göre sığdırmaya çalışabilirsiniz. Fakat mobilde (arkaplan görselleri hariç) herhangi bir başlık, yazı yada resmi gizlemeyin.
• Projeyi bitirdikten sonra proje şartlarını sağlayıp sağlamadığını mutlaka kontrol edin.
• Tasarımda farklı farklı butonlar mevcut. Standart olması açısından 1 tanesini component olarak geliştirip, her yere bu componenti çağırın.
• Tasarımı 100% tutturmaya çalışmaya gerek yok, bir kaç px'lik kaymalar yada farklar sorun değil, göze batan çok büyük hatalar olmasın kafi; önemli olan React yapısı.
• Sizlere verilen diziyi projenize dahil edip, axios (yada herhangi bir istek atan kütüphane ile) ile ulaşıp kullanın.