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 , 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
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 :)
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 ☺️
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
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?
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.
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 ?
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.
Kral sayende grid sistemi öğrendim. Flexbox'ın içinden geçmiştim, üstüne bunu da ekledim. Sağolasın.
Flex-box'a alışmış biri olarak grid yapısını anlayamıyordum. Sayenizde anlaşıldı çok teşekkür ederim.
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
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.
bu kadar da basit anlatılmaz hocam ağzınıza sağlık.
Teshekkur ederim.Gerchekten faydali olmush.Direk ingilizce kursdan anlamak zor oluyor bazi kisimlari,fakat sayenizde ishin mantigini anladim.MUHTESHEMSINIZ!
Teşekkürler. Çok açıklayıcı ve öğretici olmuş.
Yorum için teşekkür ederim.
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.
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.
Hocam cox gozel izah etmisen.hec udemydeki kurslarda bele gozel soylemirler Azerbaycandan sevgiler
Çok açıklayıcı bir anlatım,teşekkürler.
Rica ederim Ümitcan.
ellerine sağlık. anlatımın süperdi hocam.
Gerçekten çok faydalı oldu. Çok güzel ve anlaşılır anlatmışsınız. Emeğinize sağlık. Hemen abone oldum.
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
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.
cok cok sag oluk. super bir ders
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 :)
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 ☺️
çok teşekkürler hocam emeğinize sağlık
Saolasın Selçuk.
Elinize Emeğinize sağlık. Çok faydalı oldu.
Harikaydı, çok teşekkürler.
Teşekkürler Gürcan hocam. Emeğinize sağlık :)
Sonunda bu kadar güzel bir yapıyı anlaya bildim flex iyiydi bu dahada iyi geldi çok teşekkürler
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
Çok teşekkürler. Derslerinizi seviyoruz..
Grid efsane hoca efsane sobanın üstüne koydum 20 tane kestane.
Hocam çok teşekkür ederim
Ağzınıza sağlık başarılar
Rica ederim Serkan, selamlar, sevgiler..
Teşekkürler. Epey faydalı bir ders oldu.
Hocam emeğinize ağzınıza yüreğinize sağlik
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
Hocam ağzınıza sağlık. Teşekkürler. Çok faydalı oldu.
Mükemmel anlatım. Teşekkürler.
Tesekkurler hocam
iyi ki varsınız hocam
teşekkürler hocam
Teşekkürler, emeğinize sağlık hocam..
teşekkürler
Emeğinize sağlık Hocam
elasiz cox tesekkur edirem
çok güzel anlatmışsınız hocam. Çok teşekkür ederim :)
İyi ki varsınız
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?
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:)
Hocam grid leri yan yana getirmek istiyorum nasıl yapabiliriz
hocam video 6 yıl önce hmtl 5 geldi güncel sayılır mı bu video
Reis eline ağzına sağlık
Hocam table yapısının gelişmiş hali gibi öğrenmem kolay oldu çünkü table da baya uğraşmıştım lisede :D
Gridi kabul etmiyor. İnvolid property value diyor. Kolon yapamadim bir türlü
grid ve flexbox ın farkını sorabilirrmiyim
çok güzel google sorusu :)
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;
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;}
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 bu serinin devamı gelicektir inşallah
Bu ders seri değil temel grid yapısına giriş, bundan sonrası çalışmaca.
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
E posta adresinizi alabilir miyim ?
Hocam ses kalitesini biraz daha geliştirmelisiniz. Videoda sanki klavye kullanımı gibi bir ses var başlangıçta.
İ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.
Teşekkürler hocam
teşekkürler