Responsive Öğrenmek İçin Kaynaklar Nelerdir?

Merhaba, html ve css konusunda kendimi oldukça geliştirdim ve hala geliştirmeye devam ediyorum, düz arayüz tasarımı kodlayabiliyorum ama tasarımlarımı ayrıca responsive olarak yapmak istiyorum bunu nasıl sağlayabilirim bildiğiniz sağlam ders kaynakları vs. varmıdır sadece responsive için detaylı bilgi veren ?

Grafik konusunda uzun bir deneyimim var html/css yeterince var gerekli yerlerde internet ortamından ufak tefek konularda destek alıyorum, kendi arayüzümü çizip kodlamak istiyorum dizi film temaları yapıp 100% responsive şekilde wordpress entegre edip internette hem ücretli hem ücretsiz olarak paylaşmak istiyorum ayda 2 tema yapıp her ay 2 tema çıkarmak istiyorum biri ücretsiz biri ücretli bu işi bana sıfırdan öğretebilecek birisini ya da sağlam kaynak arıyorum nekadar iyi ve detaylı öğrenirsem okadar iyi işte seo uyumlu olsun adsense uyumu olsun vs. gibisinden bana kim destek cıkabilir ?

Bootstrap gibi frameworkler fazlasıyla işine yarayacaktır, videolu dersler falan fazlasıyla mevcut google amcada

Hocam bir kısa örnek vereyim.

Normal Ekranlara Göre
.kapsul{width:1000px;}

Tablet Ekranlarına Göre
@media (max-width:767px)
{
.kapsul{width:600px;}
}


şeklinde bir şey yazdım. Anlayacağını umut ediyorum.

ontedi Hocam anladım fakat mesela neye göre ayarlıcaz mesela diyelim max-width : 767px demişsiniz ya 768 px olunca o kutu 1000 px mi olacak yine ekrana sığmayacak yani bana tablo gibi birşey lazım şöyle izah edeyim

max-width : 1000 'de sayfa boyutu 960px olsun
max-width : 767 'de 650px olsun

gibi gibi işte bunları tek tek yapabilmek için onların boyutlarını mobil platformların boyutlarını vs. öğrenmem lazım bunun gibi birşey gerekli mesela ekrana sığmadı alt satıra alması için ne yapmalıyım ? Tam böyle düzgün bir kaynak bulsam ya da birisi responsive kodlarken video çekse çok güzel olur Abdullah Mara adlı bir kişinin youtubede video serisi vardı bununla ilgili videolarını kaldırmış mesaj attım açmayacakmış yanlışlık varmış yeniden çekicem falan dedi, onu bekleyene kadar biraz ilerlemem lazım eğer müsaitseniz skype den bir akşam ufak tefek yardım ederek anlatabilir misiniz ? Yaptığım bir kodlama var onu mesela responsive yapalım yalnızca bir bölümünü yapsak gerisini zaten anlarım diye düşünüyorum :)

skype : berkayztr

yardımınız içinde ayrıca teşekkür ederim

fikridayi Hocam bootstrap kullanmak istemiyorum nedenini bilmiyorum bir türlü ısınamadım ona herkes öyle yapıyor yani kodlarımın içinde bootstrap olmasın 100% kendim birşeyler yapayım istiyorum tasarımdan kodlamasına entegresine vs. herşeyi ile kontrol etmek yapmak istiyorum bootstrap ın grid sistemini kullanarak birşeyler yapmak istemiyorum o css kodlarının içinde col-xs tarzında kodlar nedense rahatsızlık veriyor yeniden yazmak keyif ve zevk veriyor, eğer mantığını anlarsam kendi grid sistemimi hazırlayabilirim, bootstrap tarzında bana daha uygun ve istediğim şekilde birşeyler hazırlayıp onu kullanabilirim diye düşünüyorum :) Yorumunuz için teşekkürler


@media (max-width:767px)
{
.kapsul{width:600px;}
}

yaptığın zaman kapsul genişliği bu sefer 600px olacaktır. 1000px olmayacak.


hocam bootstrap'ın çok büyük espirisi yok. Hatta temizleyip kendimce yeniden isimlendirdim yeni projede.

mantık şu: varsayılan 1070px genişliği 12 parça düşün

Örnek1:

Burada menü felan var (Kapsulun 3/12'lik alanı)

Burada sayfa içeriği var (Kapsulun 9/12'lik alanı)

Emin ol ki çok fazla bileceğin şey yok

Örnek2:

Burada menü felan var (Kapsulun 5/12'lik alanı)

Burada sayfa içeriği var (Kapsulun 7/12'lik alanı)

ontedi Hocam biliyorum bootstrap mevzusuna baktım birazcık fakat bakın div class = "col-md-5" yazan yer beni sarmıyor yani hoşuma gitmiyor oraların px şeyinide tek tek ben girmek istiyorum anlatabiliyor muyum ? Yani hiçbir bootstrap grid sistem vs. altında kalmadan tamamen kendim yazarak responsive oluşturmak istiyorum kolaya kaçmak değil biraz daha uğraşarak yapmak istiyorum anlatabildim mi bilmiyorum

Hocam, yapacağın şey emin ol ki onun ötesinde olmayacak

Bunun yerine

Bunu yazmış olacaksın.

ontedi Anladım hocam yalnız bu şekilde yapmak yerine media komutlarıyla kendim öğrenip yapmak istiyorum yani o şekilde öğrenmiş olayım bootstrap ile de yaparım problem değil şuanda bir site yaptım mesela onu responsive yapmak istiyorum diyelim nasıl yapıcam yani oturup bootstrap ile siteyi baştan yazmak istemiyorum onu responsive çevirmek istiyorum falan filan :)

Hocam skype ekleyebilirseniz müsait olunca ufak tefek ince bilgiler verirseniz çok sevinirim dediğim kodladığım siteyi beraber sadece 1-2 bölümünü responsive yapsak yeter ben tam anlamıyla öyle anlyabileceğimi düşünüyorum birisinden yardım alarak

Hocam, emin ol ki vakit bulamıyorum. Bazen yeri geliyor haftanın 7 günü çalışıyorum.

Buradan sor, öğrenmen en fazla 1-2 gününü alır. Hele ki CSS.

Bu videoda responsive'i kısa ve anlayacağınız bir şekilde anlatmıştım. Bir göz gezdirebilirsiniz.

http://youtu.be/Og0wXIbKfAc