Frontend Bootcamp

HTML, CSS Seçiciler 12 Aralık 2020

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

İşlenen Konular;
Font, Psd to CSS 13 Aralık 2020

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

İşlenen Konular;
Kullanılan Eklentiler;
Verilen Ödevler;
Pseudo class 19 Aralık 2020

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

İşlenen Konular;
BEM, SASS, variable 20 Aralık 2020

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

İşlenen Konular;
Kullanılan Eklentiler;
Verilen Ödevler;
Psd to CSS 26-27 Aralık 2020

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

İşlenen Konular;
Verilen Ödevler;

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.

Faydalı Kaynaklar;
Git, JavaScript Temeli 9 Ocak 2021

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

İşlenen Konular;
Verilen Ödevler;
  • 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 10 Ocak 2021
İşlenen Konular;
Verilen Ödevler;
  • 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
JavaScript Pratik 16 Ocak 2021

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

Verilen Ödevler;
  • 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.
React'a Giriş 17 Ocak 2021

CRA ile React temellerini gördük.

İşlenen Konular;
React 23 Ocak 2021
İşlenen Konular;
Kullanılan Eklentiler;
React Router, JSON Server, Axios 24 Ocak 2021
İşlenen Konular;
Verilen Ödevler;
  • 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 Son Gün: 28 Şubat 2021

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 Şartları;
  • 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.
Bitirme Projesi Hakkında Notlar;
  • 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.