Merhaba, Bu dersimizde CSS'in en son ızgara yapısı olan CSS Grid yapısının temel özellikleri üzerine konuştuk. 2 boyutlu ızgara yapısının avantajlarını anlatmaya çalıştım.
Hocam çok teşekkürler .Grid system css diye arattım,normalde yabancı videoları izlerken sizin video çıktı karşıma.Siz olunca da gerisi hikaye zaten diyip girdim.Güzeldi :)
Flex konusunu araştırır iken, önce flex videonuzu izledim ve oldukça faydalı oldu. Sonra dedim şu grid için bir video var mı onuda çekmişsiniz. Ellerinize sağlık, oldukça faydalı oldu.
Hocam, bu Section'lerin icine text ve resim eklememiz icin, section'lara hangi section numarasi ise o numara göre numaralari css'de vermemiz lazim degilmi?! Örnegim section 1'e resim koymak istiyorsak mi?
Final oncesi nasil bi tekrar yapsam diyordum, simdi sizin anlattiklarinizi anlatmaya karar verdim. Hocam seneyeki ogrencilerim daha sansli olacak cok acik anlatmissiniz. Ornek model alacagim sizi, tesekkur ederim :)
Reis eline sağlık çok iyi anlatmışsın. Float devri zaten bitti. Bence flexbox , hızla artan mobil cihazlar için reponsive tasarım için can simidi olmak adına yetişti ama gelecek bence tam manası ile Grid. Grid'i sizler sayesinde çok iyi öğrendim. Her yerde kullanıyorum. Sitemi 16 kolona bölerim. Daha iyi hakim olmamı sağlıyor. Ana içeriğim main'i tagını ayrıca tekrar grid sistemiyle ayrıca 16lık sisteme yine bölüyorum. İç içe grid yapıyorum. nav menüleri'de aside'leri bile grid ile yapıyorum. Sadece grid-template-areas komutuyla calısıyorum diyebilirim. Siteme o kadar iyi hakim olmamı saglıyorlarki ne flexbox kullanırım ne de float ve responsive yaparkende cok rahatlık saglıyor
Arin Yazilim çok iyi anlıyorum motivasyon düşmesini ben de yaşıyorum :( ama gerçekten video çok temiz anlatmış, bookmarklarıma ekledim bir kaç defa izleyeyim diye 😁 şimdi tek eksiğim içerik eklemek ve bootstrap ile responsive ayarı vermek kaldı 😊😊 sayfanıza da abone oldum, ileride çok işe yarayacak benim için. Tekrar çok teşekkürler ☺️
Hocam, diyelim ki 38:12'de olduğu gibi section 6 bölümü boşa çıktı ve sayfanın düzenini bozdu. Bu bölümü nasıl kaldırabiliriz? Yani nasıl görünmez kılabiliriz.
Hocam , araştırmalarıma göre flexbox tek boyutlu ya Y ekseni yada X ekseni etrafında calısıyorsun. Grid sisteminde X Y sistemini aynı anda kullanabiliyorsun buda caprazlama bir tasaırm bile sunuyor sana. İlk başlarda gerçekten zorlanıyorsun ama alıştığın zaman varya.... heleki sadece gred-template-areas komutunu idrak etsen bile rahatlıkla gridi tam randımanlı kullanabiliyorsun. Siteyi haritalıyorsun ve istediğin kadar kolona bölebiliyorsun. Sitediğin içeriğe de istediğin kadar kolonu verebiliyorsun. Bu da sitenin istediğin alanına istediğin içeriği eklemeni saglıyor. Mesela html'de divleri üst üste yazdıgında , yazım sırasına göre ekranda görünüyor bunu css'de position relative ya da tam bagımsız yapmak için absolute diye sekillendiriyorsun istediğin yere left diye dayıyorsun ya da flex box ile o div'i flex komutlarıyla değiştirebiliyorsun. Ama Grid sistemini düzgün bir sekilde kurdugun zaman tek bir harf ile o divi alıp sayfanın en ucra kösesine bile koyabiliyorsun. Mesela ana div'i gridle kuruyorsun sonra da ana içeriklerini koydugun main tag'inin bulundugun bölgeyi tekrar ayrıca gridle sutunlendirebiliyorsun. Bu article'leri cok rahat bir sekilde bloglamayı saglıyor. Bunları flexbox ile de yaparsın ama kod yıgınları cıkar ortaya. Hem x hemde y boyutu için ayrı ayrı ugrasıyorusn. Grid ile tek kalemde işi bitiyorsun. Bence bu Grid sistemi gittikçe gelişecek. Çünkü güncellenmeye çok müsait bir sistem. Bende tırstım ilk basladım da özellikle bu kanal ve bir kanal sayesinde daha iyice kavradım ve nasıl bir nimet oldugunu anladım. Float 1 kum tanesi Flexbox bir çöl ise Grid bir gezegen yapılandırmasıdır diyebilirim. Grid'i biraz fazla övdüm galiba ama sistemi idrak edince sagladıgı nimetleri anlıyorusn
merhaba hocam aklıma takılan bişey var bir sitenin genel iskelet hatları display:grid ile yaparsak mesela header, section ve footeri hocam geri kalan içerik kısımları display:flex ile mi yapılır hocam ?
Kral sayende grid sistemi öğrendim. Flexbox'ın içinden geçmiştim, üstüne bunu da ekledim. Sağolasın.
css grid ile ilgili BİTİRİCİ VURUŞ u yapmışsın, güzel anlatımın için teşekkürler..
kifayet ettimi bu ders grid icin
Teşekkürler. Çok açıklayıcı ve öğretici olmuş.
Yorum için teşekkür ederim.
Hayatımda gördüğüm en iyi grid anlatımıydı net.Benim hatam sizin kanalınız varken bunu başka yerlerde aramam.Cansınız hocam.
Saolasın Yiğit, iyi bayramlar bu arada :D
@@ArinYazilim Hocam çok özür dilerim bayramınıızı kutlamak aklıma gelmedi.Hayırlı,bol bereketli bayramlar.Ellerinizden öper,hürmet ederim.Sevgi ve saygılarımla.
Hocam çok teşekkürler .Grid system css diye arattım,normalde yabancı videoları izlerken sizin video çıktı karşıma.Siz olunca da gerisi hikaye zaten diyip girdim.Güzeldi :)
Hocam cox gozel izah etmisen.hec udemydeki kurslarda bele gozel soylemirler Azerbaycandan sevgiler
ellerine sağlık. anlatımın süperdi hocam.
Flex-box'a alışmış biri olarak grid yapısını anlayamıyordum. Sayenizde anlaşıldı çok teşekkür ederim.
çok teşekkürler hocam emeğinize sağlık
Saolasın Selçuk.
grid ve flexbox ın farkını sorabilirrmiyim
çok güzel google sorusu :)
Teshekkur ederim.Gerchekten faydali olmush.Direk ingilizce kursdan anlamak zor oluyor bazi kisimlari,fakat sayenizde ishin mantigini anladim.MUHTESHEMSINIZ!
emeğine sağlık mantığını anladım sayende işin gücün rastgelsin hakkını helal et
Ne demek helali hoş olsun.
Flex konusunu araştırır iken, önce flex videonuzu izledim ve oldukça faydalı oldu. Sonra dedim şu grid için bir video var mı onuda çekmişsiniz. Ellerinize sağlık, oldukça faydalı oldu.
Hocam, bu Section'lerin icine text ve resim eklememiz icin, section'lara hangi section numarasi ise o numara göre numaralari css'de vermemiz lazim degilmi?! Örnegim section 1'e resim koymak istiyorsak mi?
Gridi kabul etmiyor. İnvolid property value diyor. Kolon yapamadim bir türlü
hocam video 6 yıl önce hmtl 5 geldi güncel sayılır mı bu video
Hocam grid leri yan yana getirmek istiyorum nasıl yapabiliriz
Final oncesi nasil bi tekrar yapsam diyordum, simdi sizin anlattiklarinizi anlatmaya karar verdim.
Hocam seneyeki ogrencilerim daha sansli olacak cok acik anlatmissiniz.
Ornek model alacagim sizi, tesekkur ederim :)
Emel Hanım çok saolun. Şimdiye kadar aldığım en anlamlı mesaj, çok teşekkürler.
Grid efsane hoca efsane sobanın üstüne koydum 20 tane kestane.
Elinize Emeğinize sağlık. Çok faydalı oldu.
Çok açıklayıcı bir anlatım,teşekkürler.
Rica ederim Ümitcan.
Harikaydı, çok teşekkürler.
cok cok sag oluk. super bir ders
Hocam emeğinize ağzınıza yüreğinize sağlik
Teşekkürler hocam
teşekkürler hocam
Tesekkurler hocam
Hocam çok teşekkür ederim
Ağzınıza sağlık başarılar
Rica ederim Serkan, selamlar, sevgiler..
Teşekkürler Gürcan hocam. Emeğinize sağlık :)
Gerçekten çok faydalı oldu. Çok güzel ve anlaşılır anlatmışsınız. Emeğinize sağlık. Hemen abone oldum.
teşekkürler
teşekkürler
Bu grid yapisi internet exploerde calismiyor. Kodlari firefoxta denedim calisiyor. Guzel bir calisma. Kisa bir surede site iskeletini yapabiliriz. Bir kac tane sorum var cevaplarsaniz memnun olurum.1-Ders anlatimindaki ornek butun sayfayi kapliyor. Bu boyutlari istedigimiz uzunlukta verebiliriz? Mesala ben sitenin 800px olmasini istiyorum.2-Boyutunu belirledigimiz site iskeletini nasil sayfada ortalayabiliriz?3-Kodlari aynen yazmama ragmen grid-template-areas bende calismadi neden?.genel {
display:grid;
grid-template: 150px 250px / 250px 3fr 1fr;
grid-gap: 10px 10px;
grid-template-areas:
"A B C"
"D E F"
}
kutu1 {grid-area: A;}
kutu2 {grid-area: B;}
kutu3 {grid-area: C;}
kutu4 {grid-area: D;}
kutu5 {grid-area: E;}
kutu6 {grid-area: F;}
Hocam elinize sağlık çok kaliteli ve sağlam bir içerik olmuş, böyle videoların devamını bekliyoruz
Alirim bi abonelik o zaman :)
@@ArinYazilim Tabiki :)
Reis eline sağlık çok iyi anlatmışsın. Float devri zaten bitti. Bence flexbox , hızla artan mobil cihazlar için reponsive tasarım için can simidi olmak adına yetişti ama gelecek bence tam manası ile Grid.
Grid'i sizler sayesinde çok iyi öğrendim. Her yerde kullanıyorum. Sitemi 16 kolona bölerim. Daha iyi hakim olmamı sağlıyor.
Ana içeriğim main'i tagını ayrıca tekrar grid sistemiyle ayrıca 16lık sisteme yine bölüyorum. İç içe grid yapıyorum. nav menüleri'de aside'leri bile grid ile yapıyorum.
Sadece grid-template-areas komutuyla calısıyorum diyebilirim. Siteme o kadar iyi hakim olmamı saglıyorlarki ne flexbox kullanırım ne de float ve responsive yaparkende cok rahatlık saglıyor
Harika olmus, cok iyi anladim! Emeginize saglik!!
Cok tesekkur ederim. Bazen motivasyonum dusuyor, boyle mesajlari daha bol bekliyorum :))))
Arin Yazilim çok iyi anlıyorum motivasyon düşmesini ben de yaşıyorum :( ama gerçekten video çok temiz anlatmış, bookmarklarıma ekledim bir kaç defa izleyeyim diye 😁 şimdi tek eksiğim içerik eklemek ve bootstrap ile responsive ayarı vermek kaldı 😊😊 sayfanıza da abone oldum, ileride çok işe yarayacak benim için. Tekrar çok teşekkürler ☺️
Hocam table yapısının gelişmiş hali gibi öğrenmem kolay oldu çünkü table da baya uğraşmıştım lisede :D
İyi ki varsınız
Hocam ağzınıza sağlık. Teşekkürler. Çok faydalı oldu.
Teşekkürler. Epey faydalı bir ders oldu.
Hocam bu serinin devamı gelicektir inşallah
Bu ders seri değil temel grid yapısına giriş, bundan sonrası çalışmaca.
Css grid yazınca ilk video burası çıktı. Güzel denk geldi. İlk bilgileri buradan aldım şimdi pratik zamanı. Faydalıydı.Emeğinize sağlık.
@Альтернативные истории игр Gayet iyi gidiyor.
Sonunda bu kadar güzel bir yapıyı anlaya bildim flex iyiydi bu dahada iyi geldi çok teşekkürler
Emeğinize sağlık Hocam
bu kadar da basit anlatılmaz hocam ağzınıza sağlık.
Teşekkürler, emeğinize sağlık hocam..
Hocam ağzım açık kaldı resmen. Matematikte matris diye bir konu var onu andırdı bir an. Teşekkürler
doğrudur :) ama o kısım kavrandıktan sonra grid yapısı çok kolaylaştırır işleri
çok güzel anlatmışsınız hocam. Çok teşekkür ederim :)
Çok teşekkürler. Derslerinizi seviyoruz..
iyi ki varsınız hocam
E posta adresinizi alabilir miyim ?
Hocam, diyelim ki 38:12'de olduğu gibi section 6 bölümü boşa çıktı ve sayfanın düzenini bozdu. Bu bölümü nasıl kaldırabiliriz? Yani nasıl görünmez kılabiliriz.
display: none;
ve ya visibility; hidden;
Hocam merhaba, tabloda en üst (başlık) satırını sabitleyebiliyormuyuz css ile? excel de ki gibi satırı dondurup altındakiler scroll bar ile kayacak!
Evet. Css te position fixed konusunu inceleyin.
position: sticky;
top: 0;
bununlada yapa bilirsiniz
Reis eline ağzına sağlık
Mükemmel anlatım. Teşekkürler.
Tek kelime ile mukemmel, sondaki grid-area inanilmaz, o kadar position, float, flexbox kullanmaktansa bu daha mantikli
aynen abi ya flex baya baydirmisdi beni
Hocam , araştırmalarıma göre flexbox tek boyutlu ya Y ekseni yada X ekseni etrafında calısıyorsun. Grid sisteminde X Y sistemini aynı anda kullanabiliyorsun buda caprazlama bir tasaırm bile sunuyor sana.
İlk başlarda gerçekten zorlanıyorsun ama alıştığın zaman varya.... heleki sadece gred-template-areas komutunu idrak etsen bile rahatlıkla gridi tam randımanlı kullanabiliyorsun.
Siteyi haritalıyorsun ve istediğin kadar kolona bölebiliyorsun. Sitediğin içeriğe de istediğin kadar kolonu verebiliyorsun. Bu da sitenin istediğin alanına istediğin içeriği eklemeni saglıyor.
Mesela html'de divleri üst üste yazdıgında , yazım sırasına göre ekranda görünüyor bunu css'de position relative ya da tam bagımsız yapmak için absolute diye sekillendiriyorsun istediğin yere left diye dayıyorsun ya da flex box ile o div'i flex komutlarıyla değiştirebiliyorsun.
Ama Grid sistemini düzgün bir sekilde kurdugun zaman tek bir harf ile o divi alıp sayfanın en ucra kösesine bile koyabiliyorsun.
Mesela ana div'i gridle kuruyorsun sonra da ana içeriklerini koydugun main tag'inin bulundugun bölgeyi tekrar ayrıca gridle sutunlendirebiliyorsun. Bu article'leri cok rahat bir sekilde bloglamayı saglıyor. Bunları flexbox ile de yaparsın ama kod yıgınları cıkar ortaya. Hem x hemde y boyutu için ayrı ayrı ugrasıyorusn. Grid ile tek kalemde işi bitiyorsun.
Bence bu Grid sistemi gittikçe gelişecek. Çünkü güncellenmeye çok müsait bir sistem. Bende tırstım ilk basladım da özellikle bu kanal ve bir kanal sayesinde daha iyice kavradım ve nasıl bir nimet oldugunu anladım.
Float 1 kum tanesi
Flexbox bir çöl ise
Grid bir gezegen yapılandırmasıdır diyebilirim.
Grid'i biraz fazla övdüm galiba ama sistemi idrak edince sagladıgı nimetleri anlıyorusn
elasiz cox tesekkur edirem
merhaba hocam aklıma takılan bişey var bir sitenin genel iskelet hatları display:grid ile yaparsak mesela header, section ve footeri hocam geri kalan içerik kısımları display:flex ile mi yapılır hocam ?
Yapılır Tuna. Hatta genel yaklaşım belirttiğin şekildedir.
@@ArinYazilim tşk ederim hocam
hocam mail adresini varmı size yaptığım temayı göstersem vaktiniz olur mu ?
Hocam ses kalitesini biraz daha geliştirmelisiniz. Videoda sanki klavye kullanımı gibi bir ses var başlangıçta.
Adamsin hocam güzel ders oldu:)
Saolasın müdür, merak ettim hocam ne ile ilgileniyorsunuz siz?
@@ArinYazilim web tasarim yani öğreniyoruz Kanaliniz baya fayda etdi ediyor saolasin:)
İlk Yorum.
?
peki flex mi kullanmak gerek grid mi?
O zaman yalnızca birinin olması yeterli olurdu. Eğer sütun ve satırlarınız düzgün ile flex, duvar yapısı gibi karışık ise grid fikrimce.