Compec/web-course-18

Web Course Materials given by Compec in Boğaziçi University

Compec Web Eğitimi 2018/19

Bu yıl web eğitimi iki aşamada gerçekleşecektir. İlk aşama Ekim ayında 4 hafta HTML, CSS ve JS giriş ile başlıyoruz ve Kasım ayında 5-6 haftalık Angular eğitimi ile devam ediyoruz. Angular eğitimi Armut.com iş birliği ile verilecek.

Temel Bilgiler

Eğitmen Hakkında

• Kemal Tulum
• Senior Cmpe Student
• Organization Director at Compec
• Having worked for three startups: Carla, SambaPos, Sociality
• Projects created by myself on web development
  • bountechsummit.com
  • rentcarla.com
  • compec.org
  • PlayIT
  • efounder.org
• Projects I am contributed on web development
  • sociality.io
  • metrikapp.io

Web Eğitimi için Gerekli Programlar

• Browser (Tarayıcı) tercihen Google Chrome. Derste Google Chrome üzerinden bazı uygulamalar yapıyor olacağız. Bunları diğer tarayıcılarla yapmanız mümkün ama küçük farklılıklar olacaktır.
• Text Editor. WebStorm (tercihen) veya Visual Studio Code

Ders İçeriğine Nasıl Ulaşırım?

Kurs içeriğini üç farklı yolla size ulaştırmaya çalışacağız:

• Drive üzerinden. Link burada
• GitHub üzerinden. Bu repodaki kod her hafta güncellenecek.
• CodePen üzerinden. Her hafta yazdığımız kodu CodePen'e ekleyeceğim. Linkler aşağıda olacak.

Dersteki Kodu Kendi Bilgisayarımda Nasıl Çalıştırırım?

Kodu bilgisayarınıza indirdikten sonra html dosyalarını bir tarayıcı ile açmanız yeterli.

Eduroam'a Nasıl Bağlanılır?

eduroam setup wifi ağına bağlandıktan sonra http://eduroam.boun.edu.tr/kilavuz_dis.php adresine girdikten sonra kendi işletim sisteminiz için gerekli olan yönergeleri takip ederek eduroam kurulumunu yapabilirsiniz.

Bazı noktalardan eduroam setup wifi ağına bağlanmanız mümkün olmayabilir. O yüzden gerekli döküman ve programları başka bir ağdan indirebilirsiniz, yukarıdaki linki kullanarak.

Kurs İçeriği

Hafta 1

• Temel web kavramları ile HTML, CSS, JS nedir, birlikte nasıl ve amaçlarla kullanılırlar? Örnek üzerinden anlatımı.
• Angular üzerinde JS frameworklerinin işlevine yönelik örnek kod gösterme
• Derste yazdığımız kodu bu repoda bulabilirsiniz.
• Drive Linki
• CodePen Linki

Hafta 2

• HTML temel kavramlar ve örnekler
• CSS temel kavramlar ve örnekler
• CSS Selector Egzersiz
• CSS Position Pratik uygulama
• Proje geliştirme
  • todo-app
  • instagram-clone

Hafta 3

• CSS Positioning Strategies
  • Float & Clearfix
  • Flexbox
• CSS Transitions
• CSS Animations
• Responsive Design
• Sıfırdan LinkedIn profil sayfasının bir kısmının klonunu yapma
• Zaman kalırsa efounder.org sitesi geliştirme