2020 Yılı İçin Web Tasarımı ve Web Programlama Rehberi (Temel Front-End)

AÖF Web Tasarımı ve Kodlama, Meslek lisesi Web Programcılığı, MYO Bilgisayar Programcılığı ve Bilgisayar Mühendisliği okuyan pek çok arkadaşın okuldaki derslerle yetinmediğini ve kendilerini ayrıca geliştirmeleri için çaba sarf ettiğini görmekteyiz. Aslında yapılması gereken doğru iş de budur. Türkiye’de Web geliştirmeye dair yukarıda saydığım açıköğretim ve meslek liselerinde ayrı bir bölüm olsa da bu bölümlerin dersleri kendinizi geliştirmediğiniz sürece size iş bulmanızda veya iş yapmanızda yardımcı olmamaktadır. O yüzden eğitim sistemine alternatif olarak kendinize bir eğitim rotası çizmeniz gereklidir. Ben Web geliştiriciliği ile alakalı hem anadolu meslek lisesinin ilgili bölümünde eğitim gördüm hem de açıköğretim fakültesinde ilgili bölümü okumaktayım. Ben her ne kadar kendi kendimi geliştirebilsem de yukarıda saydığım bölümleri okuyan ve ne yapacağı konusunda bilgisi olmayan pek çok öğrenciyi düşünerek bu rehberi hazırlama kararı aldım.

Bu rehberi hazırlarken Brad Traversy’in şu videosu oldukça yardımcı oldu. Normalde Youtube videolarını çalışmalarımda kaynak almam ama kendisi Web konusunda gayet paylaşımcı ve konuyu geniş kapsamlı bilen birisi. Üstelik bilgisini saklamaması ve herkese rehber olması da benim için olumlu bir etken oldu. Bunun yanında internette mevcut olan diğer kaynakları da incelediğimi ve her bir konu için ek araştırma yaptığımı da söylemeliyim.

Daha önce yazdığım rehberden bazı kısımları bu yazıda kullandım. Fakat önceki rehberin bir takliti olmasından kaçındım. Siz de ikisini karşılaştırdığınızda bu çalışmanın daha gelişmiş ve kapsamlı olduğunu göreceksiniz. Önceki yazıyı okumak için burayı tıklayın.

Şimdi çalışmamızın ilk başlığına geçelim.

Neden Web Programcılığı Öğrenilir?

Web programcılığı öğrenmenin pek çok fazla sebebi olabilir. Ama belli başlı sebepleri saymak gerekirse şunları sayabiliriz.

Bir Firmada Çalışmak İçin Web Programlama Öğrenmek

Web programcılığı, programlama dünyasında oldukça popüler ve yaygın bir çalışma alanıdır. Bu kadar popüler olması iki taraflıdır elbette. Hem geliştirici sayısı çoktur hem de bu konuda iş ve firma miktarı oldukça fazladır. Üstelik Web programcılığına az veya çok gelişmiş ülke fark etmeden hemen hemen bütün ülkelerde ihtiyaç vardır. Örneğin elektronik üretmeyen bir ülkede gömülü sistemlere veya teknoloji üretmeyen bir ülkede yapay zekaya pek ihtiyaç duyulmasa da basit bir marketin sitesini tasarlamak için bile Web programcılığına ihtiyaç duyulur. O yüzden ülkemizde Web programcılığı C# ile yazılan otomasyon yazılımları ile beraber en popüler yazılım alanlarından biridir. Bu yüzden bir firmada çalışmak isteyen pek çok geliştirici veya mühendis ister istemez Web programcılığı öğrenmek istemektedir.

Kendi İşini Kurmak ya da Freelance Çalışmak İçin Öğrenmek

Yazılımın bazı konularında kendi işinizi kurmak biraz zor olabilir. Özellikle spesifik bir işi yapıyorsanız bir takım halinde çalışmanız gerekebilir. Ama Web programcılığı bazen tek başınıza bile yürüteceğiniz bir iş olabilir. Özellikle full-stack yani tam donanımlı geliştiriciler bazen 4-5 kişinin ayrı ayrı yapması gereken işleri bile yapabilir. Bu durumda kendi işinizin patronu olabilirsiniz. Kendi yazılım firmanızı açabileceğiniz gibi serbest çalışma imkanına da sahip olursunuz. Günümüzde iyice popüler hale gelen Freelance çalışma modeli böyledir. Yurt içinde serbest iş bulacağınız gibi yurt dışında da da iş bulabilirsiniz. Yalnız kendi işinizde çalışmak istiyorsanız kendinizi çok geliştirmeniz gerektiğini ve birden fazla kişinin yapacağı işi tek başınıza yapmanız gerektiğini unutmayınız. Yalnız bu Web sektöründe çok da zor bir deneyim değildir.

Danışman Olmak

Öğrendiğiniz bilgilerle sadece iş yapmanız gerekmez. Aynı zamanda bildiğiniz konuda danışmanlık yaparak para kazanabilirsiniz. Bu yeni bir kavram olarak ülkemizde pek yerleşmese de sizin bilginize ihtiyacı olan insanlar sizi bulabilir ve siz bilgilerinizle yol gösterip yardımcı olabilirsiniz. Bir yandan da işin eğitim noktasını da unutmamak gereklidir. Udemy gibi pek çok eğitim platformunda Web konusundaki eğitim içerikleri diğerlerine göre oldukça popülerdir. Bazıları para kazanmak için işin eğitimine odaklanmaktadır.

Bir Uygulama veya Hizmet Oluşturmak

Her zaman başkaları için site yapmanız gerekmez. Bazen de çok iyi ve etkili bir fikirle ortaya çıkarsınız ve bunu projeye dökersiniz. Bu sayede milyon liraları bulan bir siteye sahip olabilirsiniz. Türkiye’de yerli olarak ortaya çıkan ve büyük başarılar elde eden pek çok örneği görebiliriz. Bir dönem ciddi gelir elde edilen “Webmaster” işi de böyledir.

Hobi İçin Web Programcılığı

Bir işten her zaman para kazanmanız gerekmez. Bunu para kazanma amacı gütmeden, üstelik üzerine para koyarak da icra edebilirsiniz. Bundan keyif alıyorsanız bu aktiviteye hobi denmektedir. Günümüzde millet geçim derdinden hobi icra etmeyi unutsa da resim, spor, sinema, avcılık gibi hobilerin yanında elektronik, yazılım gibi konular da hobi olabilir. Web programcılığını hobi olarak yapmak bile oldukça kazançlı hobilerden biri olabilir! Bu hobiyi paraya çevirme imkanınız olduğu için diğer hobilerden daha faydalı olduğunu söyleyebiliriz.

Gerekli Araçlar

Web programcılığına başlama kararı aldıktan sonra eğer elinizin altında bir masaüstü veya dizüstü bilgisayar yoksa muhakkak edinmeniz gereklidir. Zaten bir bilgisayar, bir masa bir de koltuktan başka çok da ihtiyacınız olan şey yoktur. Diğer işlerle karşılaştırıldığı zaman neredeyse sermaye gerektirmeyen ve en masrafsız işlerden biri olduğu ortadadır.

Bilgisayar

Yazılımın bazı alanlarında iyi bir bilgisayara ihtiyaç duyulmaktadır. Örneğin üst seviye bir oyun motoru ile çalışıyorsanız buna göre bir bilgisayar edinmeniz gereklidir. Bu da başlangıçta sizin için maliyetli olmaktadır. Ama Web programcılığı için çok üst seviye bir bilgisayara ihtiyaç duyulmaz. Orta seviyeden itibaren orta/üst seviye arasında bir fiyat/performans bilgisayarı size fazlasıyla yetecektir. Pek çok işi bir internete girebilen bilgisayarla bile yürütmeniz mümkündür. Ama cep telefonu ve tabletlerden bu işi icra etmeniz pek beklenemez. Bir de küçük ekranlı bir laptop yerine en az 22” (1080p) monitöre sahip bir bilgisayar kullanmanız iyi olacaktır. Küçük ekran gözlerinizi yoracağı gibi daha dar bir çalışma alanı sunar.

İşletim Sistemi

Web programcılığı için hangi işletim sistemini kullanacağınız çok önemli değildir. Grafik tasarımda olduğu gibi Web programcılığında da MacOS kullanmak bazı noktalarda daha avantajlı olabilir. Fakat Mac cihazların fiyatlarına baktığımızda onlara o kadar parayı vereceğinize üst seviye bir Windows sistem kurma imkanınız vardır. Ben Windows kullanıyorum siz de hangi işletim sistemine alışıksanız onu kullanın.

Metin Editörü ve IDE

Web programcılığında işinizin büyük kısmını kod yazarak icra edersiniz. Bunun için de ya entegre geliştirme stüdyosu (IDE) ya da metin editörüne ihtiyaç duyarsınız. Aşağıda kullanacağınız programların listesi verilmiştir. Bunların hepsi ücretsizdir ve internetten indirip kullanabilirsiniz.

  • VSCode
  • Sublime Text
  • Atom
  • Notepad++
  • Visual Studio 
  • Eclipse

Bu listedekilerden hangisini seçip kullanacağınız size kalmıştır. Ama tavsiye isterseniz VSCode ve Eclipse tavsiye edilmektedir.

Dilerseniz bütün bunları kullanmak yerine Notepad programı açıp burada HTML, CSS, Javascript veya PHP kodları yazabilirsiniz. Lisede bize de bu program üzerinden kod yazdırırlardı. Yalnız bu programın geliştiricilik konusunda hiç bir araca veya yardımcı özelliğe sahip olmaması sizi bu işten soğutacak derecede hata yapmanıza sebep olabilir. Nitekim Notepad kullanırken Notepad++’ın kod renklendirme özelliğini görünce bile oldukça sevinmiştim. Eskiden bu metin editörleri şimdi olduğu gibi çeşitli değildi. Son yıllarda açık kaynak ve ücretsiz yazılım akımının güçlenmesiyle Microsoft bile VSCode adında ücretsiz ve açık kaynak bir metin editörü programını yayınlamıştır. Günümüzde elimizdeki araçların eskiye göre çok daha işlevsel ve fazla olduğunu bilmemiz gerekir. Bu bizim için büyük bir imkandır.

Terminal

Web geliştiriciliğinde sadece metin editöründe kod yazmayız. Terminal üzerinden komutlarla çalışan programları da kullanmak gerekebilir. Git, npm veya Node.js gibi bazı platformlar terminal üzerinden çalışmaktadır. Ayrıca bunun yanında sistem komutları, SSH veya CLI için terminal kullanmanız gerekebilir. Aşağıda terminal programlarının listesi yer almaktadır.

  • Bash
  • Zsh
  • PowerShell
  • Git Bash 
  • iTerm
  • Hyper
Tarayıcı

İnternet tarayıcılar internet sitelerinde gezmenin yanı sıra yaptığınız siteleri yani yazdığınız kodları çalıştırıp nasıl çalıştığını görmek için de kullanılmaktadır. Eskiden sadece yazdığınız front-end kodlarını çalıştırdığınız programlar olsa da günümüzde tarayıcılar sundukları geliştirici araçları ile bir geliştirme ortamı haline gelmiştir. Örneğin geliştirici araçlarından “Console” sekmesini açıp Javascript makinesi ile doğrudan irtibata geçebilirsiniz. Bunun gibi geliştirici araçları kaynak kodu görüntüleme ve çeşitli değişiklikleri yapma gibi pek çok özelliği bulundurmaktadır. Hangi tarayıcıyı kullandığınızın çok önemi yoktur. Tarayıcıların geliştirici araçları benzer özelliklere sahiptir. Günümüzde en popüler tarayıcı olarak Chrome veya Firefox tarayıcılarından birini kullanabilirsiniz.

Tasarım Araçları

Web geliştiriciliğini tek başınıza icra etmeyi düşünüyorsanız işin sadece programlama kısmıyla uğraşmayacağınızı bilmeniz gerekir. Aynı zamanda da tasarım konusunda bilgi sahibi olmanız gerekir. Günümüzde internet sitelerinin tasarımı kod tabanlı ve sadelik esasına göre yapıldığı için eskisi gibi bir düğme tasarımıyla bile uğraşmanıza pek gerek yoktur. Ama bazı yerlerde güzel dokunuşlar yapmak için grafik tasarım programlarına ihtiyaç duyabilirsiniz. Unutmayın, bir işi yaparken sağdan soldan topladığınız görsel meteryaller değil kendi ürettiğiniz içerikleri kullanmak zorundasınız. Bu yüzden grafik noktasında bir grafik tasarımcı kadar olmasa dahi işinizi görecek kadar bilgi ve pratik sahibi olmalısınız. Aşağıda tavsiye edilen programların listesi verilmiştir.

  • Adobe XD 
  • Photoshop 
  • Sketch
  • Figma
  • Fireworks 

Adobe XD programı bütün bunların arasında başlıca öğrenmeniz ve kullanmanız gereken program olarak zikredilmektedir.

Kod Yazmaya Nereden Başlamalı ?

Bu soruya cevap vermek için öncelikle hangi alanda çalışmak istediğinizi bulmalısınız. Web programcılığının iki ayrı yüzü olduğunu unutmamak gerekir. Front-end (ön yüz) ve Back-end (arka yüz) olarak birbirinden ayrı ama birbirine muhtaç iki ayrı alan olduğunu ve geliştiricilerin front-end veya back-end geliştirici olarak ayrıldıklarını bilmeniz gerekir.

Front-end, internet sitelerinin istemci tarafı olup görsel kısmını, istemci tarafındaki etkileşimini ele almaktadır. Burada HTML, CSS gibi tasarıma yönelik işaretleme dilleri kullanıldığı gibi Javascript gibi programlama dili de bunlarla beraber kullanılmaktadır. Günümüzde front-end teknolojileri daha karmaşık ve gelişmiş olduğundan eskisi gibi kolay değildir. Back-end ise sunucu tabanlı programlama ve veri tabanı kısmı ile ilgilenmektedir. Sadece front-end veya back-end üzerine çalışıp bu konulardan birinde uzman olabilirsiniz. Bu durumda bir firmada bir takım içinde çalışma imkanınız vardır. Ama küçük ölçekli firmalarda ve kendi işinizde web tasarımcı, front-end geliştirici, back-end geliştirici veya veri tabanı programcısı gibi bir ayrıma girmemeniz gereklidir. Yukarıda dediğimiz gibi belki de 4-5 kişinin yapacağı işi yapmanız gerekebilir. Buna da full-stack (tam donanımlı) geliştiricilik adı verilir. Buna kendiniz karar vermeniz gerekse de benden bir tavsiye istiyorsanız ben sizin full-stack geliştirici olma niyetiyle başlamanızı tavsiye ediyorum. Full-stack geliştirici yeri geldiğinde front-end, back-end veya veri tabanı kısmına bakabilir.

HTML ve CSS

Full-stack geliştirici olma niyetiyle işe başladıysanız önceden programcılık tecrübenizin olup olmamasına göre başta neyi öğreneceğiniz değişmektedir. Eğer C#, Python, Java gibi dillerle tecrübeniz varsa ve programcılık temelleri ile mantığını kavramışsanız HTML ve CSS size çerez gibi gelecektir. Bu durumda daha serbest davranıp yer yer back-end yer yer de ileri konulara atlayarak daha serbest bir öğrenim planı yürütebilirsiniz.

Ama sıfırdan yazılıma başlayacaksanız HTML ve CSS sizin için bir mihenk taşı olacaktır. Çünkü HTML ve CSS’i bile öğrenemiyorsanız ilerleyen konuları öğrenmeniz neredeyse imkansızdır. HTML ve CSS sitelerin temel yapısı olarak ilk öğrenilecek konular olsa da aynı zamanda da sizin bu işi başarıp başaramayacağınızı belirleyen bir imtihan olarak karşınıza çıkmaktadır. Bu ikisinin ne olduğu hakkında kısa bir bilgi verelim.

HTMLHyperText Markup Language ifadesinin kısaltmasıdır. Bir programlama dili değil bir işaretleme dilidir. Web sayfalarının iskeletini oluşturur. Örneğin bu makaleyi yazarken benim kullandığım kalın veya italik yazılar HTML etiketleri vasıtasıyla belirtiliyor. Bunun gibi nereye resim ekleneceği, nerede tablo olacağı, nerede başlık, nerede çerçeve olacağı gibi konular HTML’ye girmektedir. HTML ile internet sayfasına elementler eklenir ve içerik biçimlendirilir.

CSSCascading Style Sheets yani Basamaklı Biçim Sayfaları yine HTML gibi bir işaretleme dilidir. Buna biçimlendirme dili de diyebiliriz. CSS’de bazı değişkenler ve bu değişkenlerin parametreleri vardır. Değişken olarak ifade ettiğimiz değerlere kendisi property (özellik) adını verir. Örneğin yazı rengi, arka plan rengi, yazı boyutu, yazı fontu, yazı biçimi, kenar aralıkları, kenar kalınlığı, kenar rengi, metin hizalaması, saydamlık, görünürlük gibi pek çok özellik CSS’in kendisinde property olarak kayıtlıdır. Siz bu değişkenlere değer atayarak biçimlendirme yaparsınız ve bunu HTML elementleri ile ilişkilendirirsiniz. CSS internet sitesinin ince işçiliği, makyajı ve süsüdür. CSS olmadan HTML ile yapılmış siteler renkten, biçimden ve estetikten uzak düz yazı gibidir. CSS ile binlerce tema, şablon ve tasarım meydana gelmektedir. HTML olmadan CSS olmaz, CSS olmadan HTML olsa da iyi görünmez. O yüzden HTML’yi ayrı CSS’i ayrı olarak ele almamak gerekir. İkisi birbirinden ayrılmaz parçalardır.

HTML ve CSS öğrenirken günümüz teknolojisinde olmazsa olmaz kavramları çok iyi öğrenmeniz gerekecektir. Eski eğitimlerde pek üzerinde durulmayan ve pek çoğu da o zaman mevcut olmayan bu konular günümüz Web teknolojilerinde iş yapmanız için şart olmuştur. Bunlardan en önemlisi HTML’nin semantik elementleri, özellikleri ve CSS’in Grid, Flexbox ve Transition (Geçiş) özellikleridir. Yeni tekniklerin yerini eski teknikleri tercih etmeniz yaptığınız sitenin kalitesine olumsuz etki edecektir. Örneğin anlambilimsel (semantic) elementler SEO yani arama motoru optimizasyonu için çok önemlidir. Bunun yerine anlamı olmayan <div> etiketini kullanmak sitenin SEO puanını olumsuz etkileyecektir. Önceden hiç bir sakıncası olmayan bir yöntem yeni gelen özelliklerle kullanımı sakıncalı olabilmektedir. O yüzden HTML ve CSS öğrenirken bu teknikleri öğrenmeden sadece etiketleri ezbere kullanmanız sizin zararınıza olur.

Adaptive ve Responsive Tasarım

Günümüzde olmazsa olmaz tekniklerden biri de uyumlu ve esnek site tasarımlarıdır. Eskiden bir tek bilgisayarlar internet sitelerine girebiliyordu. Benim dönemimde ise en son zamanlarda bile sitelerin bir normal versiyonu bir de ayrı bir bağlantı ile girilen (m.siteadi.com gibi) mobil versiyonu bulunurdu. Daha öncesinde wap.siteadi.com diye küçük ekranlı nokia telefonların görüntüleyebileceği basitlikte ayrı site sürümleri olurdu. Günümüzde ise böyle bir ayrım kalmamıştır. Artık tek bir site hem 40” televizyon ekranında hem 22” bilgisayar ekranında hem 15.6” laptop ekranında hem de 7” telefon ekranında sıkıntısız görüntülenebilmektedir. Aynı kodların farklı ekranlara ve pencere boyutlarına uyumlu olarak site görüntüsü vermesi işine Responsive tasarım adı verilmektedir. Bunun için HTML ve CSS’de belli başlı teknikler vardır. Örneğin en bilineni Viewport, Fluid Width gibi tekniklerdir. Eğer sizin yaptığınız site bütün ekranlarda sıkıntısız görüntülenemiyorsa bu işi yapmanız günümüzde mümkün değildir.

Ben İnternet ile 1998 yılında tanıştığım için İnternet tarihinin büyük bir kısmını gözlemleme şansı elde ettim diyebilirim. Günümüz siteleri ile 2006-2010 yılına ait siteleri karşılaştırdığımda günümüz sitelerinin giderek büyüyen yazı ve arayüz boyutu bilgisayar kullanırken beni rahatsız etmekte. Önceki siteler çok fazla ögeyi ekranda barındırır ve yazılar oldukça küçük olurdu. Telefonda bu siteye girdiğinize yazılar karınca gibi olduğundan okumak çok zor hale gelirdi. Bunun sebebi o dönem sitelerin masaüstü bilgisayarlara göre günümüzde ise cep telefonlarına göre tasarlanmasıdır. Masaüstü kullanıcısı olarak benim şikayetçi olduğum durum belki Internet kullanıcılarının %80’ini oluşturan mobil kullanıcılar için hiç sorun teşkil etmemektedir. Siz de site tasarımı yaparken öncelikli olarak mobil kullanıcıları düşünmeniz gereklidir. Ama siz siz olun masaüstü kullanıcılarını da düşünmeyi ihmal etmeyin! Yoksa oyuncak gibi siteleri kocaman ekranlarda kullanmak zorunda kalırız.

CSS Ön İşlemciler (CSS Preprocessors)

CSS yazılım çatılarına (framework) geçmeden önce daha temele yakın olan araçları öğrenmemiz bizim için faydalı olacaktır. HTML ve CSS konusunu ne kadar iyi öğrenirseniz öğrenin günümüzde sırf bunları kullanarak iş yapmanız yüksek seviye deneyim, bilgi ve oldukça fazla zaman gerektirecektir. Bu yüzden işinizi kolaylaştıran ek yazılımlara ihtiyacınız vardır. Bu sizi tembelliğe alıştırmamalı ve siz yine işin bütün ayrıntısını bilmelisiniz. Bunlar size zaman kazandırmak için kullanılmaktadır.

CSS Ön İşlemciler de CSS dilinde mevcut olmayan pek çok özelliği dilde kullanmanıza ve dile esneklik kazandırmaya yardımcı olmaktadır. Bununla yapılan bütün işleri CSS kodu yazarak da yapabilseniz de bu sizin için daha zor olacaktır. Burada değişkenler, for, if gibi programlama dillerine dair özellikleri de kullanma imkanınız vardır.

CSS Ön İşlemciler arasında en popüleri SASS sonrasında ise SCSS‘dir.

Tekrar belirtmek gerekirse ön işlemciler CSS’in alternatifi değildir. Ön İşlemci diline uygun yazdığınız kodlar ön işlemci vasıtasıyla CSS kodlarına dönüştürülür.

CSS Yazılım Çatıları (Framework)

Web programcılığında yazdığınız kodların büyük bir kısmı bir noktadan sonra “işin ameleliği” seviyesine inmektedir. Kafa yormadan defalarca aynı kodu yazmakla veya tekerleği yeniden icat etmekle uğraşmadan hazır yazılım çatılarında yer alan sınıfları kullanarak aynı kodu defalarca yazmaktan kurtulabilirsiniz. Üstelik sizin günlerce uğraşarak aynısını yapacağınız kütüphanelerin her ögesini kullanmak için sadece sınıf adı yazmanız yeterli olabilmektedir.

O yüzden günümüzde sitelerin neredeyse %90’ı CSS yazılım çatılarından birini kullanmaktadır. Bu yazılım çatıları insanı tembelliğe itmez, az zamanda çok iş yapmanızı sağlar. Çünkü günümüzde kısa zamanda çok iş yapmadıkça bu işten para kazanmanız oldukça zordur. Siz oturup kod yazmakla uğraşırsanız yeni gelişmeleri takip etmekte de zorlanırsınız. O yüzden Framework kullanmaktan asla korkmayın. Fakat bu sizi tembelliğe de alıştırmamalı yeri geldiğinde kendi CSS kütüphanenizi yazabilecek ve hazır kütüphaneleri düzenleyebilecek seviyeye gelmeniz gereklidir.

CSS yazılım çatıları arasında Bootstrap tartışmasız bir numaradır. Ama bunun yanı sıra Tailwind CSS, Meterialize ve Bulma gibi çatılardan da bahsedebiliriz. İhtiyacınız doğrultusunda yeri geldiğinde pek çok çatı ile çalışacak olsanız da başlangıçta Bootstrap’ın tamamını öğrenmeniz ve kullanmanız size yeterli olacaktır. Bunları öğrenmek HTML veya CSS öğrenmekten daha kolaydır. Sadece hazır kodları yazdığınız kodlara entegre etmeniz gereklidir.

Javascript

Buraya kadar HTML, CSS ve CSS’e dair yazılım paketleri ile işin tasarım yönünden bahsettik. İşin tasarımını öğrenmek belki bir Web veya grafik tasarımcı için yeterli olsa da en azından Front-end geliştirici olmak istiyorsanız betik dillerini ve istemci tabanlı programlamayı öğrenmeniz gereklidir. Önceden pek çok istemci tabanlı programlama dili kullanılsa da günümüzde Javascript tek dil haline gelmiştir. İnternet tarayıcısında çalışan bir programlama dili olarak başka seçeneğiniz olmadığı için Javascript öğrenmekten başka seçeneğiniz yoktur.

Bu dil aynı bir programlama dili gibi aritmetik ve mantık operatörlerine, değişkenlere ve fonksiyonlara sahiptir. Dilin yapısını incelediğinizde bir C++ veya Java’dan çok da farklı olmadığını göreceksiniz. Javascript dili her ne kadar bir istemci tabanlı script dili olarak tanımlansa da Unity gibi oyun motorlarında ve Node,js ile sunucu tabanlı olarak da kullanılmaktadır. Eskiden Javascript’in ününü açıkcası pek duyamazdık. Günümüzde Javascript üzerine geliştirilen araçlar ile (framework) dilin uygulanabilirliği oldukça artmıştır. Unutmayın! Javascript, HTML ve CSS gibi bir işaretleme dili değil bir script yani programcıkların yazıldığı bir dildir. Programlama dillerine (Özellikle C, C++, Java) yabancı olmayanlar için oldukça kolay ve yüksek seviye bir dildir. Programlama dillerine yabancı olanlar ise algoritma ve programcılık mantığı üzerine biraz kafa yormalı. Javascript özetle bizim internet sayfalarımızı bir kitap sayfası gibi sabit bir sayfa olmaktan çıkarıp dinamik, etkileşimli ve hareketli sayfalar haline getirmektedir. Önemli bir nokta ise bunu istemci tabanlı yapmasıdır. Yani program kodu sunucudan sizin bilgisayarınıza gelir ve tarayıcının Javascript makinesi (interpreter) tarafından çalıştırılır. Javascript HTML ve CSS kodları ve parametreleri üzerinde değişiklik yapabilir.

Diğer Araçlar

Bu noktadan sonra artık daha gelişmiş araçları kullanıp basit siteleri de yayınlayabilmeniz lazımdır. Öncelikle kullanmanız gereken araçlardan bahsedelim ve sonrasında yeterliliklerden bahsedelim.

Git

Git versiyon kontrol sistemi olarak biraz kafa karıştırıcı görünebilir. Aslında prensibi oldukça basittir. Siz bir çalışmayı yaparken zaman zaman onlarca farklı versiyonunu çıkarabilir ve bunları sıralayabilirsiniz. İşte bunu sıralayıp, dallandırıp kontrol edeceğiniz bir yazılım arıyorsanız versiyon kontrol yazılımlarını kullanmanız gereklidir. Eğer bilgisayarınızdan hariçte bir yere depolamanız gerekiyorsa bunun için de GitHub servisi mevcuttur. Yaptığınız projeleri GitHub’a yüklemeye ve örnek projelerinizi GitHub’da yayınlamaya özen göstermeniz lazımdır. Git konsol ekranından yönetildiğinden zor görünse de öğrenmesi kolaydır. Aynı zamanda takım çalışmalarında vazgeçilmezdir.

Tarayıcı Geliştirme Araçları

Tarayıcı geliştirme araçları ücretsiz ve tarayıcı ile birlikte gömülü halde gelen yazılımlardır. Bu yazılımlar Web geliştiriciliğinin olmazsa olmazlarıdır ve bu yazılımları etkin bir şekilde kullanmanız beklenir. Genel olarak kullanımı basit ve işlevsel yazılımlar olduğu için bunları öğrenmeniz de çok zor değildir. Yalnız etkin olarak kullanmaya alışmanız gerekir.

VSCode ve Diğer Metin Editörü Eklentileri

Metin editörleri sade haliyle genellikle çok fazla bir özelliğe sahip değildir. Açık kaynak editörlerin en büyük özelliği büyük bir geliştirici kitlesinin bunlara eklenti yazması ve oldukça işlevsel hale getirmesidir. Bu sayede sizin hızlı ve etkili kod yazmanıza yardımcı olarak pek çok eklentiyi ücretsiz olarak edinebilirsiniz.

Emmet

Front-end geliştiriciliğin en çok can sıkan taraflarından biri çoğu zaman birbirinin aynısı kodları alt alta yazmaktır. Bunlar işin ameleliği olup ne ek bir bilgi ne de bir tecrübe gerektirir ve kazandırır. O yüzden bu zaman kaybından kaçınmak için otomatik kod yazıcılara ihtiyaç duyulur. Emmet de bunlardan biridir ve sizin çok daha hızlı kod yazmanızda yardımcı olur. Örneğin boş bir dosyada HTML iskeleti oluşturmak için <html>, <head>, <body> vs. etiketleri uygun olarak sıralamanız gereklidir. Emmet ile ! yazdıktan sonra TAB tuşuna basarak 1 saniyede bunu otomatik olarak yazdırmanız mümkündür. Bunun gibi pek çok özelliğe sahip olan bu eklentiyi pek çok metin editörü ile beraber kullanabilirsiniz.

NPM ve Yarn (Paket Yöneticileri)

Başka geliştiricilere ait kodlar, yazılım paketleri, kütüphaneler, yazılım çatıları gibi pek çok yazılım parçasını veritabanından indirmek için paket yöneticilerini kullanmanız gereklidir. Bunlar konsol ekranından kontrol edilir.

Örneğin ben NPM paket yöneticisi ile NES.css adlı CSS kütüphanesini bilgisayara indirip kullanmak istiyorsam şöyle bir komut yazmam gerekecektir.

npm install nes.css

Axios

Axios Javascript kütüphanesi olarak HTTP talepleri oluşturmak için kullanılır. Tarayıcı ile beraber gelen Fetch API buna ihtiyaç bırakmasa da yine de bazı avantajlarından dolayı tercih edilebilir.

Wepack ya da Parcel

Javascript modül paketleyicileridir.

Temel Gereksinimler

Siz full-stack geliştirici veya front-end geliştirici olmaya niyetli olsanız da öncelikle temel front-end geliştirici olmanız gereklidir. Full-stack düşünenler için ileride yol ayrımı vardır. İleri front-end geliştirici konularından bahsetmeden önce temel front-end geliştiricinin ne yapabildiğine bir değinelim.

  • Şahıslar ve küçük işletmeler için site yapabilir. 
  • Mobil cihazlara uyumlu site tasarımı yapabilir. 
  • CSS animasyonları ve efektleri yapabilir. 
  • CSS yazılım çatılarından birini iyi derecede kullanabilir. (Framework)
  • Javascript ile sayfalara hareketli işlevler ekleyebilir. 
  • Javascript ile küçük istemci tabanlı uygulamalar yazabilir. 
  • Tarayıcıların geliştirme araçlarını kullanabilir. 
  • Git ile versiyon kontrolü yapabilir. 
  • Küçük projeleri idare edebilir. 

Bu yazdıklarımız hiç bilmeyen birine zor görünse de aslında en temel yeterliliklerdir ve bunları edinmek de hiç zor değildir. Bunları yerine getirmeden daha ileri seviyeye geçmenizi önermiyorum. Kimse emeklemeden koşamaz. Ayrıca siteyi programlamak yanında bunu yayınlamak ve çeşitli internet konularını öğrenmek gereklidir. Bu gereksinimleri de madde madde şöyle verebiliriz.

  • Alan Adı (Domain) kaydı yapabilmek. 
  • Hosting (Sunucu) hizmetleriyle çalışabilmek.
  • Statik hosting kullanabilmek. 
  • SSL Sertifikası kullanabilmek.
  • FTP ve SFTP protokollerini kullanabilmek.
  • SSH kullanabilmek.
  • CLI ve Git kullanabilmek.

Bütün bunlardan sonra front-end geliştiricilikte ilerlemek gereklidir. Full-stack çalışacak arkadaşların da front-end noktasında ileri olması gereklidir. Çünkü günümüzde Web teknolojileri ağırlıklı olarak front-end üzerinde yürümektedir.

Bu noktaya kadar temel front-end kısmını bitirdim. Çalışmanın devamını ayrı bir başlık altında yazmak üzere sonraya bıraktım. Bizi takipte kalın.

Bizi Facebook grubumuzda takip etmeyi unutmayın. Bilgili ve öğrenmeye hevesli bir topluluk oluşturmak istiyoruz.

https://www.facebook.com/groups/1233336523490761/

UYARI!!

 

 

Gökhan Dökmetaş

"Arduino Eğitim Kitabı" ve "Arduino ve Raspberry PI ile Nesnelerin İnterneti" kitaplarının yazarı. Başkent Teknoloji ve Dedektör Merkezi'nde Ar-ge Sorumlusu. Araştırmacı-Yazar.

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.