5 Haziran 2016

HTML/CSS Öğreniyoruz – 1

Merhaba, kodlama öğrenmeye ne dersiniz? Teknoloji artık günümüzün kaçınılmazı ve sizler için ufak bir girişimde bulunmak istiyorum. HTML/CSS kodlamayı öğrenmenizi istiyorum üstelik bunu çok kısa bir sürede yapabileceğinize inanıyorum. Ama belirtmeliyim ki kodlamayı öğrenmek için tek bir kaynak değil birden fazla kaynağa ihtiyacınız olacak ki açıklarınızı kapatmanız bu konuda kolay olsun.

Bunun dışında sizlerle öyle bir oluşum haline gelmek istiyorum ki herkes kodlamaya başladığında veya kaydettiği ilerlemeleri #kodlamadabiradım hashtag’i ile benimle sürekli etkileşim halinde olmalı. Instagram, Twitter, Facebook fark etmez ben yer noktada sizleri yakından takip edeceğim. Bu sayede hem Türk toplumunu teşvik edebilecek güzel bir oluşum olabilir hemde birlikte güzel adımlar atabiliriz.

Şimdi derslerimize başlamadan önce yüklemeniz ve bilmeniz gereken bir konudan bahsedeceğim ve 2. derste kodlamaya giriş yapacağız.

Öncelikle arkadaşlar bir HTML/CSS kodlama editörüne ihtiyacımız var. Giriş seviyesinde olduğunuzu düşünerekten herkesin Notepad++ yüklemesini istiyorum. İlerleyen dönemlerde bu seçenekleri arttıracağımdan emin olabilirsiniz ancak temelinizin sağlam olması şuan benim için daha önemli. Notepad++ indirmek için tıklayın. Eğer Mac OS kullanıcısı iseniz Sublime Text kullanabilirsiniz. Sublime Text (Mac Os) indirmek için tıklayın. Windows kullanıcıları içinde Sublime Text mevcut ancak dediğim gibi giriş seviyesi için Notepad++ öneriyorum.

Gerekli programı kurduktan sonra. İlerleyen zamanlarda Photoshop ve Illustrator programına ihtiyaç duyacağız. Bunun için Adobe sitesinden 30 günlük deneme sürümülerini indirebilirsiniz ya da satın alsanızda olur. Öğrenciyiz durumlar sıkışık diyen dostlarım içinde internetten kırılmış hallerini bulmalarını önermesemde öneriyorum. Bu programları kuruyoruz çünkü yapacağımız bir arayüz tasarımını kodlamandan önce Photoshop’ta tasarlayacağız ve PSD to CSS adını verilen eğitim modelinden ilerleyeceğiz. Illustrator’e de ihtiyacımız var çünkü kullanacağımız tüm logo ve iconları elimizden geldiğince SVG olarak düzenleyip kaydedeceğiz.

Bu adımlarıda tamamladıktan sonra bilgisayarınızda bir adet HTML/CSS kodlama editörü ve iki adet grafik programı kurulu olacak. Şimdiyse kaynak noktasına gelelim.

  • Arkaplan desenleri için Subtle Patterns.
  • Stock resimler için Pixabay, Unsplash.
  • İlham almak için Dribbble, Behance
  • Iconlar için Fontawesome, Flaticon

kaynaklarından yararlanacağız. Dilerseniz 2. derse hazırlık olması adına bu kaynakları inceleyin ve neler yapabileceğimizi görmek adına Dribbble ve Behance sitelerinin arama kutularına “web site” yazın. Profesyonel çalışmaları incelediğinizde daha da istekli olacağınıza inanıyorum.

Çok yakında 2. bölüm ile kodlamaya başlayacağız merak etmeyin. Ancak arkadaşlar unutmayın #kodlamadabiradım hashtag’i ile paylaştığınız her paylaşım benim daha fazla insana erişebilmem demek.

 

 



ETİKETLER