• Buradasın

    Frontend Geliştirme

    Özetteki ilgi çekici içerikler

    • CSS Animasyonları Kullanarak Proje Geliştirme Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı CSS animasyonlarının nasıl kullanılacağını göstermektedir. Önceki videoda CSS animasyonlarını incelemiş olan konuşmacı, bu videoda projeye hangi CSS animasyonlarını ekleyebileceğimizi anlatmaktadır. Videoda, bir web projesine CSS animasyonları ekleme süreci adım adım gösterilmektedir. Öncelikle fare üzerine geldiğinde kartların büyümesi için transform ve transition özellikleri kullanılmaktadır. Ardından sayfa yüklendiğinde sol taraftan sağa doğru kayarak gelen bir sidebar ve yukarıdan aşağıya gelen bir video list için keyframes kullanılarak animasyonlar oluşturulmaktadır. Video, CSS animasyonlarının projelerde nasıl kullanılabileceğini gösteren pratik bir uygulama sunmaktadır.

      • youtube.com

    • CSS Dersinde Yeniden Boyutlandırma Özellikleri

      Bu video, bir CSS dersinin devamı niteliğindedir. Eğitmen, CSS'de yeniden boyutlandırma özelliklerini anlatmaktadır. Videoda, text elementinde görülen yeniden boyutlandırma özelliğinin diğer form elementlerine nasıl uygulanacağı gösterilmektedir. Eğitmen önce bir paragraf etiketi oluşturarak, padding, border ve margin gibi CSS özellikleri ekleyerek bir eleman oluşturur, ardından overflow özelliğini auto yaparak yeniden boyutlandırma özelliğini aktif eder. Ayrıca, bu özelliği kapatmak için resize özelliğinin none olarak ayarlanması gerektiği de gösterilmektedir.

      • youtube.com

    • Gog.js Kurulum ve Dosya Hiyerarşisi Oluşturma Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere Gog.js kurulumunu adım adım göstermektedir. Video, Gog.js kurulumuna başlamadan önce gerekli dosya hiyerarşisinin oluşturulmasını anlatmaktadır. Önce masaüstünde veya terminalden klasör hiyerarşisi oluşturulur, ardından Sublime Text ile gerekli dökümanlar (coffee, scss, js, index.html ve package.json) eklenir. Daha sonra konsol üzerinden Gog.js ve gerekli pluginler (coffee, concat, ruby-sass, aglify, live-reload ve ten-alar) kurulur. Video, bir sonraki bölümde test yazma ve otomatik hale getirme konularının ele alınacağını belirterek sona erer.

      • youtube.com

    • Vue Router ve React Router Kullanımı Eğitimi

      Bu video, bir yazılım eğitim içeriği olup, eğitmen tarafından Vue Router ve React Router kütüphanelerinin nasıl kullanılacağı adım adım gösterilmektedir. Video, önceki bölümde bitirilen liste ekranının devamını ele alarak başlıyor ve Vue Router'ı projeye nasıl ekleyeceğini, temel yapılandırma adımlarını ve iki sayfa (ürün listesi ve ürün detayı) oluşturmayı gösteriyor. Daha sonra React Router kullanarak ürün detay sayfası oluşturma süreci, URL parametrelerinin kullanımı ve "product service" adlı bir servis sınıfı oluşturarak API servisi üzerinden ürün detaylarını çekme işlemleri anlatılıyor. Eğitim, bir sonraki bölümde detay sayfasının data modeli ve içeriği hakkında bilgi verileceğini belirterek sona eriyor.

      • youtube.com

    • CSS Border Radius Eğitimi

      Bu video, bir eğitmen tarafından sunulan CSS dersinin bir bölümüdür. Eğitmen, border radius özelliğini detaylı bir şekilde anlatmaktadır. Videoda border radius özelliğinin nasıl kullanılacağı adım adım gösterilmektedir. Eğitmen önce temel bir div oluşturarak başlayıp, border radius özelliğini kullanarak kutunun kenarlarını yuvarlama işlemini uygulamalı olarak anlatmaktadır. Ayrıca, border radius değerlerinin nasıl ayarlanacağı, köşelerin yarıçaplarının nasıl belirleneceği ve farklı köşelere farklı yarıçap değerleri verilerek kutunun şeklinin nasıl değiştirilebileceği örneklerle açıklanmaktadır.

      • youtube.com

    • React Props Tipleri Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı React'te props tiplerini anlatmaktadır. Video, prob tiplerinin neden kullanıldığını açıklayarak başlıyor ve ardından farklı prob tiplerini (string, array, boolean, number ve function) örneklerle gösteriyor. Konuşmacı, prob tiplerinin uyumluluğu sağlama ve hata ayıklama için kullanıldığını vurguluyor. Ayrıca, props tiplerine "required" özelliği ekleyerek zorunlu alanlar tanımlama yöntemini de gösteriyor. Video boyunca kod örnekleri üzerinden adım adım anlatım yapılıyor.

      • youtube.com

    • CSS'de Tek Satırda Geçiş Animasyonu Yazma Eğitimi

      Bu video, bir eğitim dersi formatında olup, bir eğitmen tarafından CSS'de geçiş animasyonlarının nasıl yazılacağı anlatılmaktadır. Videoda, CSS'de geçiş animasyonlarının tek satırda nasıl yazılacağı gösterilmektedir. Eğitmen, önceki derslerde öğretilen transition özelliğinin yanı sıra, property, duration, timing function ve delay gibi dört özelliği tek satırda nasıl kullanabileceğimizi açıklamaktadır. Bu yöntem, projelerin ilerledikçe ve daha fazla animasyon yapmak istendiğinde kodun daha düzenli ve hızlı yazılmasını sağlar. Ayrıca, ilerleyen derslerde transform, 2D ve 3D transform animasyon derslerinin ekleneceği belirtilmektedir.

      • youtube.com

    • CSS'de Background Özellikleri Kullanımı

      Bu video, bir eğitim içeriği olup, konuşmacı CSS'de background özelliğinin kullanımını anlatmaktadır. Video, background özelliğinin tek bir satırda birden fazla background özelliğini (background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size ve background-attachment) nasıl kullanabileceğimizi göstermektedir. Konuşmacı önce bu özelliklerin tek satırda nasıl yazılacağını örneklerle açıklar, ardından test ederek sonucu gösterir. Video, background özelliklerinin bitirildiği bir noktada sona erer.

      • youtube.com

    • React'te Context Kavramı Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı React'teki context kavramını anlatmaktadır. Video, context kavramının ne olduğunu açıklayarak başlıyor ve React'in kendi sitesindeki tanımını paylaşıyor. Context, component ağacı üzerinden veri elde etmenin bir yolunu sağlayarak, propsları takip etmeyi ve veri/fonksiyonları göndermeyi kolaylaştırıyor. Konuşmacı, önceki uygulamalarda propslar üzerinden veri akışı yapmanın karmaşık olduğunu, context kullanarak ise bu süreci daha basitleştirdiğini görsel örneklerle açıklıyor. Video, context oluşturma ve kullanma işleminin nasıl yapılacağını göstermeyi planladığını belirterek sona eriyor.

      • youtube.com

    • CSS Dersi: A Story Bölümü Tasarımı

      Bu video, Busra tarafından sunulan bir CSS dersidir. Eğitmen, bir web sayfasının "A Story" bölümünün CSS kodlarını yazarak tasarımını tamamlamaktadır. Videoda, "History" section'ın CSS kodlarının nasıl yazılacağı adım adım gösterilmektedir. Eğitmen önce sol taraftaki mavi çizgiyi (border left) ve boşluğu (padding left) oluşturur, ardından butonun pozisyonunu (position absolute) ayarlar ve paragrafların tasarımını düzenler. Ayrıca, genel başlıkların (h2) mavi renge dönüştürülmesi ve font özellikleri (font size, font weight, text transform) de gösterilmektedir. Video, CSS sınıflarının nasıl kullanılacağını ve sayfa düzenlemesinde dikkat edilmesi gereken noktaları içermektedir.

      • youtube.com

    • CSS ile Hareketli Buton Yapımı Eğitimi

      Bu video, Tayfun Erbilen tarafından sunulan bir CSS eğitim içeriğidir. Tayfun, Pizza Hut sitesindeki hareketli butonların nasıl yapıldığını göstermektedir. Videoda, JavaScript veya jQuery yerine CSS kullanarak hareketli butonların nasıl oluşturulacağı adım adım anlatılmaktadır. Öncelikle temel bir buton oluşturulup, hover efekti için before seçici kullanılarak alt metin ekleme, transition ile efekt verme ve position özellikleriyle hareket ettirme işlemleri gösterilmektedir. Daha sonra bu efektin yukarıdan aşağıya, aşağıdan yukarıya, sağdan sola ve soldan sağa olmak üzere farklı yönlerde nasıl uygulanacağı detaylı olarak açıklanmaktadır.

      • youtube.com

    • Tailwind CSS Text Özellikleri Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Tailwind CSS ile ilgili temel text özelliklerini anlatmaktadır. Video, Tailwind CSS'in normal kurulumunu açıklayarak başlıyor ve ardından text class'larının kullanımını örneklerle gösteriyor. İçerikte text boyutu, italik, kalın, font seçimi, spacing, line height, text hizalama, renk, altı çizili, üstü çizili ve harf büyük/küçük ayarları gibi temel text özellikleri detaylı olarak anlatılıyor. Konuşmacı, Tailwind CSS'in doktrini hakkında daha fazla bilgi edinmek isteyenler için bir kaynak da paylaşıyor.

      • youtube.com

    • Frontend Mülakat Simülasyonu ve Oyun Geliştirme

      Bu video, bir yazılım şirketinde çalışan iki kişinin (konuşmacı ve Alperen/Eren) birlikte kod yazarak frontend mülakatını simüle ettiği bir eğitim içeriğidir. Konuşmacı, Alperen'in bir sene önce işe alındığını ve şimdi onunla birlikte çalıştığını belirtiyor. Videoda, "Hasta Tik Tak" adlı bir strateji oyunu kodlaması yapılıyor. Oyun, X ve O karakterlerinin sırayla kutulara basarak üç tane karakterini çapraz, aşağı veya yana doğru getiren oyuncunun kazandığı bir oyun. Video, mülakat simülasyonu formatında ilerleyerek, state yönetimi, oyuncu sırası kontrolü, kazanma durumlarının belirlenmesi ve reset fonksiyonu oluşturma gibi konuları adım adım göstermektedir. Videoda ayrıca mülakat sırasında dikkat edilmesi gereken noktalar (heyecanlanmamak, zamanı kullanmak, rahat olmak) hakkında tavsiyeler de verilmektedir. Konuşmacılar, kod yazma sürecini, mantık çizgilerini ve problem çözme stratejilerini paylaşarak izleyicilere mülakat hazırlığı konusunda bilgi vermektedir.

      • youtube.com

    • React Native Eğitim Serisi: İlk Ders

      Bu video, kendi şirketinde React Native üzerinde çalışan bir eğitmen tarafından sunulan eğitim serisinin ilk bölümüdür. Video, React Native'in ne olduğu, popülerliği ve kullanım alanları hakkında bilgiler vererek başlıyor, ardından kurulum sürecini anlatıyor. Daha sonra React Native'in temel bileşenleri (platform, device, textview, text input, scroll view, dimension, asenkron storage), flex yapısı, fontlar ve animasyonlar gibi tasarım özellikleri tanıtılmaktadır. Ayrıca React Navigation ve Material Tep gibi navigasyon kütüphaneleri, kod düzenleme ayarları ve Android cihazında uygulama çalıştırma süreci de gösterilmektedir. Eğitmen, React Native'in temel komutlarını, test yazma yöntemlerini ve Redux gibi state management yapılarını da ele almayı planladığını belirtiyor. Video, bir React Native projesinin nasıl oluşturulduğu ve çalıştırıldığı pratik bir örnekle devam ediyor.

      • youtube.com

    • CSS Kursu: Overflow Kullanımı

      Bu video, CSS kursunun on birinci dersi olup, bir eğitmen tarafından sunulan bir eğitim içeriğidir. Videoda overflow özelliğinin nasıl kullanılacağı adım adım gösterilmektedir. Eğitmen, bir div etiketi içine metin ekleyerek overflow'un hidden ve scroll değerlerini uygulamalı olarak anlatmaktadır. Ayrıca, overflow'un content kısmında ve yan menü gibi farklı tasarımlarda nasıl kullanılabileceği açıklanmaktadır. Video, yatay scrollbar'ı kaldırma ve sadece dikey scrollbar'ı aktif etme gibi ileri seviye kullanım örnekleriyle sonlanmaktadır.

      • youtube.com

    • Tailwind CSS 4 Kullanım Eğitimi

      Bu video, UXMate tarafından sunulan bir eğitim serisinin ilk bölümüdür. Eğitmen, Tailwind CSS 4'ün nasıl kullanılacağını adım adım göstermektedir.. Video, Tailwind CSS 4'ün temel kullanımını anlatmaktadır. Eğitmen, Visual Studio Code kullanarak basit bir HTML/CSS projesi oluşturma sürecini göstermektedir. Öncelikle gerekli klasörlerin oluşturulması, NPM ve Tailwind CLI'nin kurulumu, input.css dosyasının oluşturulması ve Tailwind CLI ile output.css dosyasının oluşturulması anlatılmaktadır. Ayrıca, Tailwind CSS'in utility sınıflarının nasıl kullanılacağı ve değişikliklerin otomatik olarak nasıl uygulanacağı da gösterilmektedir.

      • youtube.com

    • Redux Temel Kavramları ve Kullanımı Eğitimi

      Bu video, YouTube Barkod kanalında yayınlanan bir eğitim içeriğidir. Sunucu, Redux kütüphanesinin temel kavramlarını ve kullanımını Türkçe bir kaynak olarak anlatmaktadır. Video, Redux'un neden kullanıldığını, global state yönetimi sağladığını ve React'teki state'lerin nasıl yönetildiğini açıklamaktadır. İçerik, Redux'un çalışma prensibini görsel örneklerle anlatarak başlayıp, adım adım Redux kurulumu, store oluşturma, type'ların tanımlanması ve reducer'ların yazılması gibi temel adımları göstermektedir. Ayrıca counter ve liste gibi farklı objelerin nasıl yönetileceği, action ve selector fonksiyonlarının kullanımı da kod örnekleriyle açıklanmaktadır. Video, e-ticaret sitesi örneği üzerinden Redux'un pratik kullanımını göstermekte ve Redux'un alternatif olarak MobX ve React'in context yapısı gibi alternatifler de bahsedilmektedir. Sunucu, Redux'un piyasadaki popülerliğini vurgulayarak, ileri seviye bir konu olduğu için izleyicilerin yorumlarda eksik veya yanlış bilgileri belirtmelerini istemektedir.

      • youtube.com

    • GitLab ve Vue.js ile Mergic Uygulaması Geliştirme Sunumu

      Bu video, GitLab'da sinir frontent engineer olarak çalışan ve Google Developer Expert on Web Technology olan Fatih Acet tarafından sunulan bir eğitim içeriğidir. Ayrıca Software Classmanship Turkey'de yaptığı sunumun tekrarını da içermektedir. Video, GitLab'ın ne olduğu, şirketin yapısı ve Fatih'in GitLab'da yaklaşık iki buçuk yıl içinde yaşadığı front-end sürecini anlatmaktadır. İçerikte Vue.js framework'ünün Mergic uygulamasında sağladığı avantajlar, legacy codebase'den Vue.js'e geçiş süreci ve GitLab'ın geliştirme süreci detaylı olarak ele alınmaktadır. Sunumda ayrıca GitLab'ın code review sistemi, düzenli toplantılar (her hafta salı günü front-end takım toplantısı, her ayın belirli günlerinde front-end ve UI-UX takımı toplantıları), sürüm yönetimi ve retrospektif değerlendirmeler hakkında bilgiler de sunulmaktadır. Mergic uygulamasında kullanılan view komponentleri, Vx store yapısı ve mimari yapısı hakkında da detaylı açıklamalar yapılmaktadır.

      • youtube.com

    • CSS Padding Özellikleri Eğitim Videosu

      Bu video, bir eğitim içeriği olup, bir eğitmen tarafından CSS'in padding özellikleri hakkında bilgi verilmektedir. Videoda padding özelliğinin ne olduğu ve nasıl kullanılacağı adım adım gösterilmektedir. Eğitmen, önceki derste CSS'in font özelliklerinden bahsettiğini belirterek, bu derste padding özelliğine odaklanmaktadır. Padding'in farklı yazılış şekilleri (top, right, bottom, left) ve piksel cinsinden nasıl ayarlanacağı pratik örneklerle anlatılmaktadır. Ayrıca, padding'in bir etiket için tüm yönlerde eşit boşluk bırakma veya farklı yönlerde farklı boşluk bırakma seçenekleri de gösterilmektedir.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor