CSS Grid ile Adım Adım Site Yapımı-1.Bölüm(Layout Oluşturma)
HTML-код
- Опубликовано: 30 сен 2024
- CSS Grid metodu ile baştan sona bir haber sitesinin tasarımı anlatılmıştır.
Örnek dosya linki aşağıdadır.
github.com/web...
www.dropbox.co...
www.dropbox.co...
![Cody Johnson - I'm Gonna Love You (with Carrie Underwood) [Official Music Video]](http://i.ytimg.com/vi/yy9PuYMU29g/mqdefault.jpg)
2019 da kim diye bilirdiki karantinde can sıkıntısından html css e başalacayım ve sizin videolarınız bana yardımcı olucak (: çok teşekkür edereim
Birde ücretli eğitim mi veriyorsunuz sınıfta? Şaka mısınız siz Brad Traversy'ın kursunda yapılan örneği tekrar yapmışsınız eğitimcinin azcık onuru gururu olur ayıp ayıp
Böyle saçma sapan yorumlara muhatap olmamak adına aylardır sayfaya bakmıyor ve video yüklemiyordum aslında. Direk silip görmezden gelebilirdim ama ibret olsun diye dursun istiyorum bu arada. İnsanların onurunu gururunu ağzına almak bu kadar kolay işte neymiş efendim başka bir eğitmenin yaptığı örneği tekrarlamışım bir de bunu dersimde anlatmışım ne büyük kabahat! Bir matematik öğretmeninin sınıfta başkasının hazırladığı bir kitaptan test çözmesi, bir fizik öğretmeninin öğrencilerine Tesla'nın,Einstein'ın formüllerinden örnekler vermesi falan o kadar absürt ve kabul edilemez hatta onursuzca şeyler ki bütün bu öğretmenlere hiçbir yeterlilik ve vasfımız ve hatta adımız sanımız bile belli olmadan sallayalım. Yüzlerce güzel şey içerisinde birşey oluyor ve işte insan diyor ki sonra değmez,boşver değmez. Gerçekten değmiyor emeklere yazık...
hocam videolarınız çok çok verimli ellerinize,emeğinize sağlık.lütfen videolara devam edin.teşekkürler,saygılar.
Yiğit merhaba. Öncelikle yorumun ve nezaketin için ben de sana teşekkür ederim. Fırsat buldukça video paylaşmaya çalışıyorum,umarım faydalı oluyordur. Bu sıralar JavaScript videoları paylaşıyorum daha ağırlıklı olarak ama talebe göre diğer konularda da içerik üretebiliriz. Gecikmiş cevap için kusura bakma,görüşmek üzere...
Kesnlikle çok iyi. Grid sistemini anlamıştım fakat uygulama konusunda sıkıtı yaşıyordum. Bu ders ilaç gibi geldi. Teşekkürler.
Enes bey merhaba. Faydalı olabildiyse ne mutlu. Düşünceleriniz için teşekkür ederim, yeni videolarda görüşmek üzere...
Harikasınız hocam
Harikasınız hocam
hocam video çekimine devam edin lütfen
Birde sizce php nasıl bir dil. Php ile mi yoksa Java gibi diller ile mi devam edilmeli
Baştan sona bir sitenin tasarımı için kullanılan yapılara "stack", hem önyüz(frontend) hem de sunucu taraflı(backend) işlemlerini yapan yazılımcılara da "full-stack developer" denmektedir. Daha önce dediğim gibi PHP'nin içinde bulunduğu LAMP(Linux-Apache-MySql-Php) Stack çok yaygın olmakla birlikte baştan sona JavaScript kullanarak bir web sitesi geliştirmeyi sağlayan MERN(MongoDb,Express,React,Nodejs) Stack oldukça popüler hale gelmiştir günümüzde. Veritabanı için MongoDb,sunucu Framework için Express,frontend için React ve sunucu kodlama için Node.js kullanabilirsiniz.Burdan yola çıkarak kendinize bir yol haritası belirleyebilirsiniz.
Sınava az kala izlemeyen de ne bilim
Hocam merhabalar bu site yapımı aşamasında hangi dilleri kullanıyorsunuz?
Merhaba Enes. Web sitelerinin yapımında birçok farklı dil ve teknoloji kullanılsa da temel direk olarak değişmeyen yegane şeyler HTML ve CSS'dir. CSS kullanımını daha kolay ve pratik hale getirdiğini iddaa eden Tailwind,Bootstrap gibi frameworkler web sitelerinin tasarımında yaygın olarak kullanılmaktadır.
Bunlarla birlikte siteleri etkilleşimli bir hale getirebilmek için kullanılan web programlama dilleri mevcuttur. Bunlar da sunucu taraflı ve istemci taraflı çalışanlar olarak ikiye ayrılır. JavaScript istemci taraflı dillerin en yaygın olarak kullanılanıdır ve bunun da kullanımını kolaylaştırdığını iddaa eden React,Vue,Angular gibi frameworkler piyasada sıkça kullanılmaktadır.
Sunucu taraflı işlemler için de JavaScript kullanmak Node.js teknolojisi sayesinde mümkün olabilmektedir. Bununla birlikte eskiden beri yaygın şekilde kullanım alanı olan PHP,Asp.net gibi dillerle birlikte sonradan popülerliği artmış Phyton,Ruby,Go gibi diller de mevcuttur.
Bunların dışında mobil programlama için yine ayrı programlama dilleri kullanılır,bunlara da örnek olarak Java,Kotlin,Swift,JavaScript(React Native) verilebilir.
Yine gözardı edilmemesi gereken bir konu da sitede kullanılacak veritabanı teknolojisidir. Sql ve NoSql olarak iki farklı modelde veritabanı kullanmak mümkündür bunlar için de MySql,SqlServer(Sql) ve MongoDB(NoSql) yapılar kullanılır.
Grafik tasarım konusuna daha hiç girmedim ona da girersek sanırım işin içinden çıkamayacağız :))
Özet olarak bir web sitesi tek bir ürün olarak ortaya çıksa da birçok farklı teknolojiyi içinde barındıran bir yapıdır. Bu işleri öğrenirken hepsiyle ilgili bir temel edinmeniz yararınıza olacaktır fakat profesyonel dünyada biri üzerinde uzmanlık geliştirmeniz daha verimli sonuçlar ortaya çıkaracaktır. Gerçi full-stack developer adı altında bunların hepsini bir kişinin yapması çoğu yerde artık beklenti haline gelen bir standart olmuştur fakat yine de durum yapyaltığım gibi. Umarım fikir edinmenizde faydası olmuştur.
Web uygulamaları geliştirme yolculuğunuzda başarılar dilerim...
@@WebMucidi Tamamdır hocam. Bu detaylı cevabınız için çok teşekkür ediyorum.☺👍
anlatım şekliniz efsane saygılar
Böyle düşünmeniz çok mutlu etti sağolun. Aslında videoların ses ve görüntü kalitesini arttırmak gerektiğinin farkındayım ,bununla birlikte sürelerin uzamasının da sıkıcı olabildiğinin farkındayım. Videoların çoğunu canlı ders anlatımı sırasında kaydettim ve sonrasında montajla çok fazla uğraşmayıp direk yayınladım. Böyle olumlu geri dönüşler aldıkça ilerisi için daha kaliteli yayınlar yapma motivasyonum artıyor. Tekrar görüşleriniz için teşekkür ederim...
Selamun aleykum ...Abi eger grid kullanmiyorsam...divleri nasil sutun seklinde dizebilirim?...cevaplarsaniz cok sevinirim
Aleyküm selam kardeşim. Kapsayıcı bir katman ya da body içerisindeki genişliği yüzde(%) cinsinden çocuk divlere dağıtıp float:left ile veya kullanıyorsun flex özelliğiyle yan yana getirebilirsin. Fakat değişken ölçü ve çözünürlüklerde sıkıntı çıkabilir tasarımda. Zaten tam da bu yüzden grid sisteminin kullanımı oldukça değerli. Sana önerim float veya position konumlandırmayla pek uğraşmadan flex veya grid sisteme tasarımlarını adapte etmen olacaktır.İKolaylıklar dilerim...
WebMucidi Tasarım Laboratuvarı eyw abi...Tesekkur ederim...Allah razi olsun senden
@@WebMucidi hocam daha fazla bu şekilde site tasarım örneklerine devam eder misiniz ? teşekkür ediyorum videolarınız için
Abi az bakarmısın biii Lütfen Çok Acilll
Ali merhaba. Maalesef yorumunu gözden kaçırmışım yeni farkettim. Yardımcı olabilecğim bir konuysa hala seve seve yardım etmek isterim. İyi çalışmalar dilerim...
Hocam yapıyosunuz bu isi 😊😊
Sağol Eyüp,burdan da mı buldun beni :))
İşin gücün rastgelsin hakkını helal et
Gayet güzel bir video olmuş, tebrik ederim.
Merhabalar,LaCasa de Papel tadında olmasa da adım adım bir planımız var ve bunları anlatmaya çalıştık :)) Beğenmenize sevindim,yeni videolarda buluşmak üzere...
Hocam sizin udemy dersiniz var mı
Olgu merhaba, olmasını çok isterim fakat Udemy üzerinde bir içeriğim yok . Belki ileride olur baştan sona kapsamlı bir ders içeriğimiz. Diğer soruna gelince PHP her ne kadar şu an kullanımda olan sitelerin çoğunda hala yaygın olarak kullanılsa da ileriye dönük olarak JavaScript ve onun türevlerini(React,Node.js) öğrenmek web yazılım trendlerine daha uygun gibi görünüyor. Java yine güçlü dillerden biri olmasına rağmen Python dilini öğrenme kolaylığı ve geniş kullanım alanı olması açısından bir alternatif olarak önerebilirim.
Hocam emeğinize sağlık çok güzel bir ders olmuş
Burak bey merhaba. Faydalı olabildiyse ne mutlu, çok teşekkür ederim.
Daha iyi anlatanı görmedim bravo hocaam👏👏👏
Elinize sağlık hocam mükemmel bir video olmuş
Hocam çok iyi anlatiyosunuz 👌