Vite is a fast web development tool with dev server and build command. Provides Hot Module Replacement and bundles code with Rollup. Supports multiple frameworks through plugins and extensible via API. Requires Node.js version 18+ or 20+
Fetch API is standard method for reading JSON files. Same syntax works for local and remote files. Local files may cause CORS errors in browsers. Live server in IDE prevents CORS errors
React Router is a popular library for creating routes in React applications. BrowserRouter uses HTML5 history API for URL synchronization. Switch renders first matching Route or Redirect component. Route component renders UI when path matches current URL
Bu video, bir web geliştirme eğitim içeriğidir. Eğitmen, önceki derste layout kavramını öğrendiklerini hatırlatarak, bu derste HTML5 parsel view kavramını anlatmaktadır.. Video, büyüyen projelerde müdahale edilebilirliği artırmak ve gereksiz kod yazmanın önüne geçmek için parsel view'in nasıl kullanılacağını göstermektedir. Eğitmen, ana sayfadaki slider ve proje listelerini örnek olarak kullanarak, bu bölümleri ayrı parsel view dosyalarına nasıl taşıyabileceğimizi adım adım göstermektedir. Ayrıca, parsel view'lerin nasıl ekleneceği ve değiştirileceği pratik uygulamalarla anlatılmaktadır.
Bu video, bir eğitmen tarafından sunulan AngularJS programlama dilini öğretmeyi amaçlayan kapsamlı bir eğitim içeriğidir.. Video, AngularJS'in temel kavramlarını ve kullanımını adım adım göstermektedir. İlk bölümde AngularJS'in ne olduğu, temel bileşenleri (direktifler, expressionlar, filter'lar, controller'lar, modüller, HTTP, form validation, API, Bootstrap) ve öğrenme süreci tanıtılmaktadır. İkinci bölümde ise Angular expressionların nasıl kullanıldığı, double braces içinde yazılması, veri bağlama işlemleri ve int, ngInit gibi directive'lerin kullanımı örneklerle açıklanmaktadır.. Eğitim, AngularJS'in HTML'i yeni özelliklerle geliştiren bir sistem olduğunu ve tek sayfa uygulamaları için mükemmel bir çözüm olduğunu vurgulamaktadır. Ayrıca Laravel'deki Blade sistemine benzer bir yapıya sahip olan Angular expressionların JavaScript operatörleri ve değişkenleri içermesi de anlatılmaktadır.
Web sayfası, site ve alan adı kavramları detaylı şekilde açıklanır. Web yazılımcı rolleri: ön uç, arka uç ve full stack. HTML ve CSS ile web tasarımı öğretilir
React Router is a comprehensive routing solution for React applications. It offers pre-developed components and Hooks for modern routing strategies. React Router v6 was released in 2021 to address issues with v5
Fullstack Developer, hem front-end hem back-end teknolojilerinde yetkin yazılım geliştiricidir. HTML, CSS ve JavaScript temel web teknolojileri bilgisi gereklidir. React, Angular ve Vue.js gibi modern framework'ler öğrenilmelidir
Bu video, bir konuşmacının kendi deneyimlerini paylaşarak yazılım öğrenme sürecindeki zorlukları anlattığı eğitim içeriğidir. Konuşmacı, Udemy platformunda back and front-end eğitimleri izleyen ancak kendi projelerini geliştirmekte zorlanan izleyicilere hitap ediyor.. Video, yazılım öğrenme sürecinde karşılaşılan psikolojik zorlukları ve bunların nasıl aşılacağını ele alıyor. Konuşmacı, tutorial izleyerek kodlamayı öğrenmenin kolay olduğunu ancak kendi projelerini geliştirmekte zorlandığını anlatarak, bu durumu aşmak için kendi deneyimlerini paylaşıyor. Bisiklete binme benzetmesiyle öğrenme sürecinin adım adım ilerlediğini ve kendi kendine güvenmenin önemini açıklıyor.. Konuşmacı ayrıca React öğrenme sürecinde yaşadığı zorlukları ve bu zorlukları nasıl aşmayı başardığını anlatıyor. Tutorial'ları takip etmenin önemini vurgularken, kendi projelerinizi yazmanın ve küçük parçalara bölmek gibi pratik tavsiyeler veriyor. Yazılım öğrenmenin zeki olmak değil, iş disiplini ve düzenli çalışma ile mümkün olduğunu belirtiyor ve izleyicilere umutsuzluğa düşmemeleri, doğru planlamalarını yapmaları ve kendilerini acımasızca eleştirmeleri konusunda destek oluyor.
Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, HTML'de div etiketinin kullanımını ve CSS ile nasıl biçimlendirileceğini adım adım göstermektedir.. Video, div etiketinin web sayfalarının tasarımını ve iskeletini oluşturmak için nasıl kullanıldığını anlatmaktadır. İlk bölümde temel div etiketi örneği oluşturulup CSS ile genişlik, yükseklik, arka plan rengi ve padding gibi özellikler verilmektedir. İkinci bölümde ise div'lerin float left özelliğiyle hizalanması, class kullanarak birden fazla div'e aynı stil özelliklerini uygulama ve Instagram benzeri bir tasarım oluşturma süreci gösterilmektedir.. Eğitim, div'lerin yan yana veya alt alta yerleştirilmesi için margin ve float özellikleri, resim ekleme ve iç içe div kullanımı gibi konuları da kapsamaktadır. Video, ileriki derslerde sıfırdan web sayfası tasarımlarının yapılacağını belirterek sonlanmaktadır.
Bu video, bir eğitim serisinin üçüncü bölümü olup, bir eğitmen tarafından React ve Redux kullanarak basit bir web uygulaması oluşturma sürecini göstermektedir.. Video, React ve Redux ile bir proje oluşturma sürecini adım adım anlatmaktadır. Eğitmen önce temel dosyaları (index.js, App.js, Store.js) oluşturup, React ve Redux kütüphanelerini import etmeyi, ardından React Router ile sayfa yönlendirmesini ve Redux store'larını oluşturmayı göstermektedir. Eğitim serisinin stratejisi, önce CC React classs yapısı ile projeyi oluşturup uçtan uca ayağa kaldırmak, sonra aynı projeyi birebir COCATE yapıp React hooks olarak dönüştürmek ve bu dönüşüm sırasında hook kullanımını öğrenmek şeklinde ilerlemektedir.
Bu video, bir Angular eğitim serisinin bir bölümüdür. Eğitmen, önceki derste seçilen bir ürünün detay bilgilerinin form üzerinde gösterildiğini hatırlatarak devam etmektedir.. Video, seçilen bir ürünün detay bilgilerindeki değişiklikleri nasıl güncelleyeceğimizi adım adım göstermektedir. Önce enter tuşuna basıldığında bilgilerin form üzerine aktarılması, ardından "Save Changes" butonu eklenerek tüm bilgilerin aynı anda güncellenmesi anlatılmaktadır. Ayrıca, form ve butonların sadece seçilen ürün için gösterilmesi için ng-if kullanımı da gösterilmektedir. Video boyunca Samsung S5, S6 gibi telefon örnekleri üzerinden kodlama ve uygulama gösterilmektedir.
Bu video, Adem İltar tarafından sunulan bir web geliştirme eğitim serisinin bir bölümüdür. Eğitmen, izleyicilerden gelen yorumları ve sorunları ele alarak uygulamayı geliştirmektedir.. Videoda, React ve Next.js framework'lerinde web uygulaması geliştirme süreci adım adım anlatılmaktadır. İçerik, side bar tamamlanması, buton komponenti oluşturma (link button ve base button), navigation komponenti stillendirilmesi, yeni sayfaların (explore, notification, messages, bookmark, list, profile) oluşturulması ve router kullanımı ile sayfa geçişlerinin yönetimi konularını kapsamaktadır.. Eğitmen, kod hiyerarşisini düzenleyerek importları daha düzenli hale getirmekte, Twitter logosunun boyutunu düzeltmekte ve hover efektlerini ayarlamaktadır. Ayrıca, bir sonraki derste tema değiştirme özelliğinin nasıl ekleneceği hakkında bilgi verilmekte ve bu özelliğin sayfadaki değişkenler ve renklerle nasıl entegre edileceği açıklanmaktadır.
Bu video, bir eğitim içeriği olup, izleyicilere Angular CLI'ye Bootstrap entegrasyonunu adım adım göstermektedir.. Video, Angular CLI'ye Bootstrap kurulumunun nasıl yapılacağını detaylı şekilde anlatmaktadır. Önce npm ile Bootstrap'in kurulumu, ardından Angular CLI.json dosyasına script ve style dosyalarının eklenmesi, Angular CLI sitesinden gerekli modüllerin yüklenmesi ve son olarak Bootstrap bileşenlerinin (örneğin buton) projeye nasıl entegre edileceği gösterilmektedir. Video, bir sonraki derste Bootstrap araçlarının daha detaylı kullanılacağını belirterek sonlanmaktadır.
Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin bir bölümüdür.. Video, webpack ile ilgili temel kurulum ve yapılandırma adımlarını kapsamlı şekilde ele almaktadır. İlk bölümde webpack projesi için gerekli paketlerin ve pluginlerin kurulumu, dosya yapısı, common.config.js dosyası oluşturma ve temel yapılandırmalar gösterilmektedir. İkinci bölümde ise CSS dosyalarının işlenmesi, imaj dosyalarının yönetimi ve hızlı band oluşturma yöntemleri anlatılmaktadır.. Eğitim, hem lokal ortamda çalışma hem de production ortamları için farklı config dosyaları oluşturma, pluginler (clean, mini-extract, html-loader) ekleme ve projelerin nasıl çalıştırılacağı konularını içermektedir. Video, bir sonraki derste nasıl çalıştığı konusunun tekrar ele alınacağını belirterek sona ermektedir.
Bu video, frontal kütüphanelerini karşılaştıran bir serinin üçüncü bölümüdür. Sunucu, Vics kütüphanesini tanıtmaktadır.. Videoda Vics kütüphanesinin 2014 yılında Google çalışanı Avenu tarafından geliştirildiği ve GitHub'da yayınlandığı belirtiliyor. Vics, Angular ve React karışımı bir yapıya sahip olup, HTML ve CSS kodlarının JavaScript kodlarından ayrı tutulması, ES5, ES6 ve TypeScript ile kullanılabilmesi gibi avantajları ile router ve formalidasyon gibi paketlerin View paketi içinde yer almaması ve bağımlılık enjeksiyonu gibi konseptlerin olmaması gibi dezavantajları anlatılıyor. Video, bir sonraki bölümde üç framework'ün detaylı karşılaştırılacağını ve performans durumları, benchmarklar gibi konulara bakılacağını belirterek sona eriyor.
Bu video, Tayfun Erbilen tarafından sunulan bir web tasarım eğitim içeriğidir. Eğitmen, izleyicilere HTML ve CSS kullanarak bir PSD tasarımını web sayfasına dönüştürme sürecini adım adım göstermektedir.. Videoda, bir web sayfasının tüm bölümlerinin (logo, menü, blog, now, sağ ve sol bölümler, konu bölüm, sayfalaama, footer ve iletişim bilgileri) HTML ve CSS kodlarıyla nasıl oluşturulacağı detaylı olarak anlatılmaktadır. Eğitim, temel web tasarım tekniklerini kapsayan bir rehber niteliğindedir.. Eğitimde ayrıca Cufon kullanılarak özel font uygulama, float ve clear gibi CSS özellikleri, farklı tarayıcı uyumluluğu testleri ve jQuery ile hover efektleri gibi ileri seviye konular da ele alınmaktadır. Video, HTML ve CSS bilgisi olanlar için blog tasarımı yapmak isteyenler için faydalı bir kaynak niteliğindedir.
Bu video, Savaş Çın Altun tarafından sunulan bir eğitim içeriğidir. Savaş, Jeky Mobile eğitim setinin ilerleyişini göstererek tema oluşturma özelliğini anlatmaktadır.. Videoda jQuery Mobile'in tema oluşturma özelliği adım adım gösterilmektedir. Savaş, jQuery Mobile web sitesine giriş yaparak tema oluşturma menüsünü açıp, renk, gölge, arka plan, kenarlık gibi özelliklerin nasıl değiştirileceğini göstermektedir. Oluşturulan temanın nasıl indirileceği ve mevcut bir şablona nasıl entegre edileceği de anlatılmaktadır. Video, 14. ders olarak belirtilmiş olup, 15. derste görüşmek üzere sonlanmaktadır.