Bootstrap'i En iyi Nereden Öğrenebilirim?

Question

Arkadaşlar selamun aleyküm. Bootstrap öğrenmek istiyorum, ama iyi öğrenmek istiyorum, XD'de falan çizilmiş herhangi bir template'i kolayca dökebilmeliyim.
Eğitimin ücretsiz olması 1. önceliğim.

Udemy'de şu kurslarım var: https://prnt.sc/q2ux9w

Siz nereden öğrendiniz, lütfen tam anlamıyla bootstrap'i öğrenmiş, her şeyi sorunsuz dökebilen arkadaşlar öneri verirse çok sevinirim, temel düzeyde dökmekten bahsetmiyorum. Ortanın üzerinde seviyede öğrenmeliyim.

İngilizce Türkçe farketmez.
Teşekkürler.

Aktimur · Answer

En iyisini istiyorsan öğrenme (grid harici)

caylakgirisimci · Answer

Aktimur adlı üyeden alıntı:						mesajı görüntüle									En iyisini istiyorsan öğrenme (grid harici) 		Ne için hocam?

Aktimur · Answer

caylakgirisimci adlı üyeden alıntı:						mesajı görüntüle									Ne için hocam? 		Bootstrap'ı kullanım kolaylığı açısından mı tercih edeceksiniz. Finalde, + Responsive tasarım çıkacak diye o kadar kod karmaşasına gerek olmadığını düşünüyorum. Coursera'da görmüştüm sanırım güzel eğitimler vardı.Kontrol edebilirsiniz. Başvuru yapmak istediğiniz firma şart mı koştu?

caylakgirisimci · Answer

Aktimur adlı üyeden alıntı:						mesajı görüntüle									Bootstrap'ı kullanım kolaylığı açısından mı tercih edeceksiniz. 		Hocam genelde bildiğim kadarıyla firmalar bootstrap kullanıyor, hem kullanım kolaylığı hemde bir standart olması amacıyla, örneğin sen işe giriyorsun bootstrap kullanıyorsun,sen çıkıyorsun adamlar ilan açarken bootstrap bilen diyor, bu sayede senden sonra gelen adam bir standart üzere devam ediyor, diğer türlü normalizer miydi neydi onu mu kullandın, yoksa başka bootstrap alternatifi mi kullandın yoksa hiçbir şey kullanmadın da css:flexbox mu kullandın ne kullandın zorluk oluyor belli bir şey olmuyor ya.
O yüzden bootstrap tercih etmiştim.
Web alanında iş ararken benim anladığım kadarıyla Türkiye'de bootstrap konuşuyor biraz.
Henüz css flexbox eğitimlerini bitirdim, birkaç gündür tasarım döküyorum ama responsive olmuyor, ekran küçülünce ne biliyim menü getirmek falan biraz zor geldi bir de komünitisi yok ya. Bootstrapde mobil uyumlu falan yapmak biraz daha kolay sanırım.

Ek olarak örnek veriyorum, herhangi bir kurumsal firma tasarımı xd'de sketch'de önüme geldiğinde en kısa sürede ve en responsive şekilde yapabilecek yolun bu olduğunu anladım ben, ha değilse önerilerinize açığım tabi...

Aktimur · Answer

caylakgirisimci adlı üyeden alıntı:						mesajı görüntüle									Hocam genelde bildiğim kadarıyla firmalar bootstrap kullanıyor, hem kullanım kolaylığı hemde bir standart olması amacıyla, örneğin sen işe giriyorsun bootstrap kullanıyorsun,sen çıkıyorsun adamlar ilan açarken bootstrap bilen diyor, bu sayede senden sonra gelen adam bir standart üzere devam ediyor, diğer türlü normalizer miydi neydi onu mu kullandın, yoksa başka bootstrap alternatifi mi kullandın yoksa hiçbir şey kullanmadın da css:flexbox mu kullandın ne kullandın zorluk oluyor belli bir şey olmuyor ya.
O yüzden bootstrap tercih etmiştim.
Web alanında iş ararken benim anladığım kadarıyla Türkiye'de bootstrap konuşuyor biraz.
Henüz css flexbox eğitimlerini bitirdim, birkaç gündür tasarım döküyorum ama responsive olmuyor, ekran küçülünce ne biliyim menü getirmek falan biraz zor geldi bir de komünitisi yok ya. Bootstrapde mobil uyumlu falan yapmak biraz daha kolay sanırım.

Ek olarak örnek veriyorum, herhangi bir kurumsal firma tasarımı xd'de sketch'de önüme geldiğinde en kısa sürede ve en responsive şekilde yapabilecek yolun bu olduğunu anladım ben, ha değilse önerilerinize açığım tabi... 		Haklısınız. Ben pek sıcak bakmıyorum sanırım. PHP ve JS'de  freamwork kullanırım ama bana css kısmında mantıklı gelmiyor. İşimi daha da zora sokuyor.

caylakgirisimci · Answer

Aktimur adlı üyeden alıntı:						mesajı görüntüle									Haklısınız. Ben pek sıcak bakmıyorum sanırım. PHP ve JS'de freamwork kullanırım ama bana css kısmında mantıklı gelmiyor. İşimi daha da zora sokuyor. 		Hocam siz nasıl çözüyorsunuz frontend'i ?

Aktimur · Answer

caylakgirisimci adlı üyeden alıntı:						mesajı görüntüle									Hocam siz nasıl çözüyorsunuz frontend'i ? 		Tailwindcss veya kendim yazıyorum. Kendi yazmam bana daha kontrol edilebilir geliyor.

caylakgirisimci · Answer

Aktimur adlı üyeden alıntı:						mesajı görüntüle									Tailwindcss veya kendim yazıyorum. Kendi yazmam bana daha kontrol edilebilir geliyor. 		Her istediğinizi rahatlıkla dökebiliyor musunuz hocam? ben en çok navbar'da sıkıntı çekiyorum, açılır menüler, açılır menülerin başına ikon koyup menü açılınca ikonun değişmesi gibi şeyler falan beni biraz zorluyor da. Mesela herhangi bir scripti ne kadar sürede döküyorsunuz? 
bir de tailwind eğitimi önerilerinize de açığım teşekkür ederim

Tonks · Answer

Bootstrap için kurs bence tamamen mantıksız. CSS ne biliyorsan Bootstrap'i de öğrenirsin. Bootstrap 4 flex yapısı üzerine bi grid sistemi. SASS ile oluşturulmuş ve SASS'ı derleyerek kendi column adetini, genişliklerini vs. belirleyebiliyorsun ama ben hiç gerek duymadım.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://fatihhayrioglu.com/yenilenmis-flex-modulu/
https://www.youtube.com/watch?v=_s15i3MoAyE

Önce bu yazıları izle, dene gör flex neymiş, sonra son attığım videoya bak iyice pekiştir. Sonra Bootstrap'in kendi sitesinden grid sistemine bak.

https://getbootstrap.com/docs/4.4/layout/grid/

Geri kalan her şey son derece basit. Components ve Utiltieslar var, ben çoğunu kullanmıyorum bile.

-----

Grid sistemi üzerine konuşmam gerekirse; tamamıyla sayfayı bölmek üzerine olduğunu söyleyebilirim. Atıyorum .col-lg-4 class'ını kullandığında, oluşturduğun div ile bir üst div'in içinden %33'ünü bölmüş olursun. Bu alana ister reklam alanı yok, ister yazı sana kalmış. Eğer .col-lg-4 verdiğin div'e .col-md-6 dersen 768 - 991px arasında bu element bir üst elementin yarısını kaplar.

Eğer burada sana yazdıklarım herhangi bir şekilde kafanı karıştırdıysa hiç önemi yok  Verdiğim linkteki dersleri kendin deneyerek çözeceksin.

caylakgirisimci · Answer

Tonks adlı üyeden alıntı:						mesajı görüntüle									Bootstrap için kurs bence tamamen mantıksız. CSS ne biliyorsan Bootstrap'i de öğrenirsin. Bootstrap 4 flex yapısı üzerine bi grid sistemi. SASS ile oluşturulmuş ve SASS'ı derleyerek kendi column adetini, genişliklerini vs. belirleyebiliyorsun ama ben hiç gerek duymadım.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://fatihhayrioglu.com/yenilenmis-flex-modulu/
https://www.youtube.com/watch?v=_s15i3MoAyE

Önce bu yazıları izle, dene gör flex neymiş, sonra son attığım videoya bak iyice pekiştir. Sonra Bootstrap'in kendi sitesinden grid sistemine bak.

https://getbootstrap.com/docs/4.4/layout/grid/

Geri kalan her şey son derece basit. Components ve Utiltieslar var, ben çoğunu kullanmıyorum bile.

-----

Grid sistemi üzerine konuşmam gerekirse; tamamıyla sayfayı bölmek üzerine olduğunu söyleyebilirim. Atıyorum .col-lg-4 class'ını kullandığında, oluşturduğun div ile bir üst div'in içinden %33'ünü bölmüş olursun. Bu alana ister reklam alanı yok, ister yazı sana kalmış. Eğer .col-lg-4 verdiğin div'e .col-md-6 dersen 768 - 991px arasında bu element bir üst elementin yarısını kaplar.

Eğer burada sana yazdıklarım herhangi bir şekilde kafanı karıştırdıysa hiç önemi yok  Verdiğim linkteki dersleri kendin deneyerek çözeceksin. 		Hocam teşekkür ederim inceleyeceğim hemen, ben kafama takılan birkaç şeyi açayım müsadenizle;
Şimdi ben fullstack web dev. olmaya çalışıyorum fakat şöyle bir durum var, backend'i katmıyorum orası sonraki iş.
Flexbox'a baktım, baya baktım hatta, prototürk'ün flex kullanarak yaptığı 3 tane döküm var, onları izleyerek bende döktüm falan, yani biraz yapabiliyorum ama tam responsive olmuyor, beceremediğim kısımlar var, bunları çalışarak, tekrar tekrar pratik yaparak pekiştirmeye çalışıyorum
Ama bootstrap'de sanki bu iş biraz daha kolay gibi, misal tabi bu kesin değil ama anladığım kadarıyla belli nav nesneleri var, bunları koyunca ekran küçülünce otomatik nav falan değişiyor, javascript falan yazmaya gerek kalmıyor gibi gördüm ben, onun dışında öteki arkadaşa yazdığım gibi popülerlik açısından da biraz önem veriyorum bootstrap'e.
Col row olaylarını biliyorum az buz, daha önce dökümantasyonundan çalışmıştım biraz ama daha reallife problems tarzı, böyle iş gelmiş de onu dökmeye çalışıyormuşum gibi öğrenmeye çalışıyorum ki karşıma problemler çıksın onları çözeyim.
Dediğim gibi en çok navbarlarda takılıyorum, bir de resimlerde örneğin bir resmi koyduk, o resimlerin ekran küçülünce alta kayması, otomatik scale olması yada tamamen öyle durup horizontal scrollbar açması gibi problemlerle çok karşılaşıyorum malesef :/

Tonks · Answer

caylakgirisimci adlı üyeden alıntı:						mesajı görüntüle									Hocam teşekkür ederim inceleyeceğim hemen, ben kafama takılan birkaç şeyi açayım müsadenizle;
Şimdi ben fullstack web dev. olmaya çalışıyorum fakat şöyle bir durum var, backend'i katmıyorum orası sonraki iş.
Flexbox'a baktım, baya baktım hatta, prototürk'ün flex kullanarak yaptığı 3 tane döküm var, onları izleyerek bende döktüm falan, yani biraz yapabiliyorum ama tam responsive olmuyor, beceremediğim kısımlar var, bunları çalışarak, tekrar tekrar pratik yaparak pekiştirmeye çalışıyorum
Ama bootstrap'de sanki bu iş biraz daha kolay gibi, misal tabi bu kesin değil ama anladığım kadarıyla belli nav nesneleri var, bunları koyunca ekran küçülünce otomatik nav falan değişiyor, javascript falan yazmaya gerek kalmıyor gibi gördüm ben, onun dışında öteki arkadaşa yazdığım gibi popülerlik açısından da biraz önem veriyorum bootstrap'e.
Col row olaylarını biliyorum az buz, daha önce dökümantasyonundan çalışmıştım biraz ama daha reallife problems tarzı, böyle iş gelmiş de onu dökmeye çalışıyormuşum gibi öğrenmeye çalışıyorum ki karşıma problemler çıksın onları çözeyim.
Dediğim gibi en çok navbarlarda takılıyorum, bir de resimlerde örneğin bir resmi koyduk, o resimlerin ekran küçülünce alta kayması, otomatik scale olması yada tamamen öyle durup horizontal scrollbar açması gibi problemlerle çok karşılaşıyorum malesef :/ 		Navbarı falan unut onlar Component sen Grid sistemine bak. Responsive'i ayarlayan Grid, Navbar'ı kullanmasanda olur ben nav'ı Tab(Sekme) kullanmadıkça, kullanmıyorum. Resimleri responsive yapmak için img-fluid class'ını ekle. Bir üst divin genişliğine göre resmi boyutlandırır.

caylakgirisimci · Answer

Tonks adlı üyeden alıntı:						mesajı görüntüle									Navbarı falan unut onlar Component sen Grid sistemine bak. Responsive'i ayarlayan Grid, Navbar'ı kullanmasanda olur ben nav'ı Tab(Sekme) kullanmadıkça, kullanmıyorum. Resimleri responsive yapmak için img-fluid class'ını ekle. Bir üst divin genişliğine göre resmi boyutlandırır. 		çok sağolun hocam,bu arada son olarak sizin tailwinds hakkında düşünceniz nedir acaba, farklarına bakıp avantajlı olanı seçmeye çalışıyorum ama bilemedim pek. ikisi de grid sonuçta sanırım, gridi öğrendikten sonra tercihe göre mi takılayım yoksa

Tonks · Answer

caylakgirisimci adlı üyeden alıntı:						mesajı görüntüle									çok sağolun hocam,bu arada son olarak sizin tailwinds hakkında düşünceniz nedir acaba, farklarına bakıp avantajlı olanı seçmeye çalışıyorum ama bilemedim pek. ikisi de grid sonuçta sanırım, gridi öğrendikten sonra tercihe göre mi takılayım yoksa 		Tailwind'i daha gelişmiş buluyorum ama ciddi manada bi projede kullanmadım, hep test amaçlı kaldı benim için. Bootstrap'i öğrenmenin zararı olmaz, öğrentikten sonrada Tailwind'e bakabilirsin.

https://www.youtube.com/watch?v=UBOj6rqRUME

caylakgirisimci · Answer

Tonks adlı üyeden alıntı:						mesajı görüntüle									Navbarı falan unut onlar Component sen Grid sistemine bak. Responsive'i ayarlayan Grid, Navbar'ı kullanmasanda olur ben nav'ı Tab(Sekme) kullanmadıkça, kullanmıyorum. Resimleri responsive yapmak için img-fluid class'ını ekle. Bir üst divin genişliğine göre resmi boyutlandırır. 		Hocam rahatsız ediyorum, dropdown menüleri nasıl yapıyorsunuz? hazır bootstrap componenti mi kullanıyorsunuz? baştan mı yazıyorsunuz?
Aynı soru düz menü için de geçerli?

Tonks · Answer

caylakgirisimci adlı üyeden alıntı:						mesajı görüntüle									Hocam rahatsız ediyorum, dropdown menüleri nasıl yapıyorsunuz? hazır bootstrap componenti mi kullanıyorsunuz? baştan mı yazıyorsunuz?
Aynı soru düz menü için de geçerli? 		Kendim yazıyorum :hover ile bootstrap kullanmıyorum.