CSS ile Mobil Uyumlu Responsive Web Sitesi Yapımı (Flexbox Tasarım)
HTML-код
- Опубликовано: 29 мар 2020
- Bu dersimizde 0'dan başlayarak mobil uyumlu bir site nasıl yapılır göreceksiniz. Bilgisayar, tablet ve ceptelefonu için nasıl yapıldığı anlatılmıştır.
Hem CSS site şablonunun nasıl yapılacağını,hemde yapılan web sitesinin nasıl mobil uyumlu hale getirileceğini anlatıldı.
Tasarım kodlanırken eski düzen ,position ve float kodları yerine yeni ve daha mobil dostu flexbox tasarım kodları kullanıldı. İyi Seyirler.
Responsive uyumlu olarak kodlanan web sitemizde, tarayıcıların sığdırma özelliğini devre dışı bırakmak ve mobil görünüm sorunu yaşamamak için aşağıdaki kodu ◀️head▶️ etiketleri arasına eklemeyi unutmayın arkadaşlar.
◀️meta name="viewport" content="width=device-width, initial-scale=1"▶️
👇👇Ayrıca Tasarıma geçmeden önce Flex yapısının nasıl kullanıldığı hakkında bilgi alabilceğiniz. Flexbox tasarım giriş dersini izleyebilirsiniz.👇👇
• CSS Flexbox modeli, Fl...
Derste kullanılan fotoları aşağıdan indirebilirsiniz.
drive.google.com/open?id=1Tcj...
👇👇Font Awesome Stil Dosyaları👇👇
drive.google.com/drive/folder...
![MAF Teeski - Whole Thing (feat. VonOff1700) [Official Music Video]](http://i.ytimg.com/vi/SHWEj-ndz6g/mqdefault.jpg)
hocam ömrümün son 50 dakikası kaldığını bilsem bu videoyu açar izlerim o kadar iyi anlatmışsınız teşekkür ederim
Beğenmene sevindim ama o nasıl yorum ya, Allah gecinden versin☺️
Arkadaşlardan birisi demiş ya ömrümün son 50 dakikası kalsa açar izlerim diye hakikaten o değerde bir video. Bu yorumu okuyan başka arkadaş varsa tereddüt ediyorsa hiç düşünmeden izlesin. Çok şey katar. Hocam size teşekkür ne kadar etsek azdır. Allah razı olsun
henüz yeni bir öğrenciyim ve transition gibi güzel ve kolay kodları paylaşmanız çok hoşuma gitti ben bu videoyu 3 defa daha izlerim :D harika
Hocam gerçekten çok sağol gerçekten. İlerde çok güzel bir site yaparsam sizin sayenizde olacak, Allah razı olsun hocam gerçekten.
Anlatımınız çok sade ve anlaşılır. Elinize sağlık hocam, teşekkür ederim.
merhaba, bu güzel içerik için çok teşekkürler, anlatımınız sade ve açıklayıcı.
Güzel, eğitici, kısa ve öz bir video olmuş. Emeğinize sağlık, başarılarınızın devamını dilerim.
Eline ağzına sağlık. Dinlediği en başarılı anlatımlardan bir tanesi (Adım adım). abone oldum .....
şu sabahın köründe Allah cc. tuttuğunu altın etsin :)
Hocam emeğine sağlık. Kanalında ilk seyrettiğim video oldu ve çok beğendim. Yeni başladığım için çok faydasını göreceğimden eminim.
MÜTHİŞ BİR ANLATIM emeğinize sağlık
Çok teşekkürler çok başarılı anlatınız sizin sayenizde bir kaç bilgi daha edindim . Başarılarınızın devamını dilerim 👏🏻
Çok başarılı bir anlatım. Ellerinize, ağzınıza, emeğinize sağlık.
Hocam Allah sizden razı olsun cok güzel anlatmışsınız odevi sizden bakarak yaptım
Sade anlatımınız benim için çok faydalı oldu, teşekkürler, saygılar.
Eline sağlık hocam çok güzel bir video olmuş.
Merhaba videonuzu baştan sona izledim , çok çok teşekkür ederim sayenizde oldukça fazla şey öğrendim.Emekliyim ve hobi olarak hiç bir ticari kaygım olmadan web programcılığını öğrenmeye çalışıyorum.Bildiğim ama yapamadıklarımı nasıl yapabileceğimi gördüm sayenizde.Sizinle birlikte aynı projeyi bende yazdım, buna benzer ama görünüm ve içerik olarak farklı , birde çok sayfalı bir proje geliştirmeyi düşünüyorum ve hatta JS+Node JS öğrenebilirsem veri tabanlı bir proje geliştirmek istiyorum.Tekrar emekleriniz için çok teşekkür ederim hakkınızı helal ediniz , görüşmek üzere iyi çalışmalar...
hocam ciddiyim mükemmel olmuş normalde Flex kullanmayı ve responsive o kadar becermem şimdi anladım teşekkürler
Mükemmel anlatım tasarım derslerie devam lütfen
izlediğim en iyi video, elinize sağlık, yan tarafta sayfanın anlık değişmesi müthiş fikir
Teşekkürler, Adobe Dreamweaver 2019 özelliği. Tavsiye ederim
Hocam tebrikler, çok yararlı oldu benim için.
Ellerinize sağlık.
Bir web site tasarladım umarım sıfırdan yapmak yerine üzerinde oynama yaparak responsive hale getirebilirim. :)
Teşekkürler, sıfırdan yapmanıza gerek yok responsive hale getirebilirsin.
Eline koluna sağlık mantığını şimdi anladım mantığını bu flex mevzusunun işin gücün rastgelsin
çok tatlı ve öğretici olmuş teşekkürler
Çok teşekkür emeğinize sağlık.
Çok teşekkürler. Böyle tasarımları çoğaltarak paylaşırsanız öğrenmemize yardımcı olursunuz. Elinize sağlık 👍🏽
Rica ederim, beğenmenize sevindim. Grid sistemi ile galeri ve web sitesi yapımı videolarını da ekleyeceğim.
bilisim nedir? Çok iyi olur 👌🏻
eline emeğine bileğine sağlık mükemmel bir video olmuş..
Super .tessekurler
Anlatım tarzınız çok iyi. Daha fazla kişiye ulaşabilmek adına Udemy gibi platformlara da video eklemenizi tavsiye ederim.
Teşekkürler, beğenmenize sevindim.Daha öncede tavsiye edilmişti. Simdilik buradayiz😊
abi kesinlikle katılıyorum. Bildiğim konuları bile anlatsanız dinlerim. İnanılmaz güzel ve nazik bir üslup.
Çok güzel anlatım için teşekkürler..aynısı yaptım sizinle beraber hızınıza yetişmek zor..
Ben teşekkür ederim, begenmenize sevindim. 1 saati gecmesini istemedim ama hizli oldugu ilk defa soylendi.👍👏
iyi anlatmışsınız hocam.Azərbaycan salamlar.
Teşekkürler. Can Azerbaycan a selamlar.
Tekrar merhaba , ikinci bir sayfayı da dahil ettim ama bu arada orta_alan > orta > icerik teki p içerisine birinde iki kat fazla yazı olduğunda yukseklği artıyor ve yükselik verip overflow:hidden desem de komple icerik alanında bozulmalar oluyor.tabi o kadar da bilgim yok bilemedim ne yapabilirim...
Acaba menunu mobil kisminda focus vererek yapa bilirmiyiz?
super
selam öncelikle hocam benim sorum farklı ben html ve css yaptığım projeyi kendi bilğisayarımda sorunsuz açıyorum lakin bir siteye veya bir başkasıyla paylaşımlarda ya farklı görünüyor yada sadece html görünüyo bir yardımcı olurmusunuz sorun nereden kaynaklı ilgi alakanıza tşk ediyor acil cevap bekliyorum saygılarımla
hocam emeğin için teşekkürler.ben bu siteyi etys de satmak istesem çzel wordpress mobil duyarlı web sitesi tasarımı olaraktan satabilirmiyim
telefon görünümüde 44:52 cursor pointer gerekli mi?
iyi video
hocam php ile nasıl kodsuz site yazabiliriz ?
hocam galeri yazıyorum ama yazdıgım başlık menude kalıyor galeriyede fotograf yüklesem de gözükmüyor nedendir
Elinize sağlık çok güzel olmuş ama hazır yazılmış indirilmeye hazır bir biçimi de var mı ?
Teşekkürler, Derslerin izle-uygula şeklinde olmasının daha yararlı olacağını düşünüyorum. Belki ilerleyen gunlerde github uzerinden paylaşabiliriz.
Kodları bizimle paylaşma şansınız yokmu?
hocam classlari inlizce verseydiniz daha iyi olurdu
bu sitenin hazır kodlarını verme şansınız varmı
hem hatalarımızı kontrol ederiz
Hocam merhabalar. Flexbox ile ilgili ayrı bir video yayınlama şansınız var mı acaba sadece flexbox üzerine. Çok sade ve çok akıcı anlatıyorsunuz. Biliyorum youtube da bir sürü vide var fakat hepsi anlat geç tarzında sizden dinlemeyi isterim. Teşekkürler ağzınıza sağlık.
Teşekkürler, çok mantıklı. Siteden önce hazırlık için olabilir. Ekleyeceğim👍
@@bilisimnedir2898 Asıl ben teşekkür ederim
@@gamezuko Sade Flexbox dersi eklendi👍
@@bilisimnedir2898 çok teşekkürler hocam
Hocam size nasıl ulaşabilirim acaba bir iletişim kaynağı verirseniz çok sevinirim teşekkürler
abi siz bu fotograflari nerden buluyorsunuz. izleyicilerdende bilenler varsa yaza bilirmi.
bu arada abi cok iyisiniziz cok iyi ders anlatiyorsunuz.
TEşekkürler, google görsellerden bulabilirsin. PNG (arkaplan saydam) olanlar bulunmayabilir, onlarıda photoshop vb. programlarla çok kolay arkaplan saydam yapabilirsin.
Cok saolun sayenizde flex olayini cozdum.Hocam Grid sistemin flexden farki ne >?Sizce hangisini yapalim site yaparken
İkiside kullanilabilir, grid sistemi daha yeni bir sistem ve bootstrap tarzı kolay mobil kodlayabiliyorsunuz. Bununla ilgili videolar ekleyeceğim.
@@bilisimnedir2898 Cok saolun Hocam cok yardimci oluyorsunuz
reis eline sağlık ama bir şey sorucam ben media max width i kullanıyorum elimle küçülttüğümde işe yarıyor ancak google ın otomatik boyutlandırıcısına soktuğumda işe yaramıyor
Açıklama kisminda bir meta etiketi var. Onu head basliklari arasina eklersen sorun cozulecektir. Videoda atlamışım. Küçük büyük isaretlerini elle ekle youtube izin vermedigi icin aciklamalarda ikonu koymuştum.
hocam vh kısmına baya bir takıldım, vh ekran görünür alanının yüzde 1`ne denk geliyor, siz 40 vh verdiniz peki neden 40vh verdiğiniz alan ekranın yüzde 40`nı kaplamadı diye baya bir araştırma yaptım, sonra anladım vh alan kapsatmıyor, sadece bir ölçülendirme birimi olarak ekran görünür kısmı yüzde 1`ni alıyor ve verilen alana pixel olarak uyguluyor, yani bir alana 40vh vermek ekran görünür alanının yüzde 40`ı kadar pixel boyut atıyormuş sadece :D
Araştırman tek kaynağa bağlı kalmaman cok güzel, eskiden tek tip monitörler de piksel olarak yapardık, sonra göreceli % ile tasarladık. Responsive tasarımlarla yeni ölçüler geldi. Aslında aynı sonucu bulmuşsun, alanın %40 ile, aynı alanın %40 ına gelen piksel boyutu atmasi ayni sonucu verir 🙂.
hocam herşey için teşekkürler fakat sizin gibi style yan sekmede açıp devam ediyorum ama ekran hep boş ama bu style olayını direk html kısmında yazınca ekranda yaptıklarım geliyor anlamadım ne olduğunu yardım rica ediyorum
Harici Css ekleme kodunuzda hata var muhtemelen. , stil.css dosyası herhangi bir klasörün içinde değilse bu şekilde,yani index.html ila aynı dizindeyse. Mesela css adında bir klasörün içindeyse eklerken şeklinde eklemelisin.
hocam galeri resmini hmtl bölümünde koymamız gerekmez mı böylr çalışmıyor bende
html bölümünde ekliyoruz zaten. Stilini css dosyasında düzenliyoruz
Okullarda responsive öğretecek lerine flex box öğretseler ne kaybederler acaba
Yeni müfredatta flex yapısı var ama maalesef cok yuzeysel.
Elinize ve anlatımınıza Sağlık, boş konuşmalar yerine anlaşılır bir eğitim videosu hazırladığınız için ayrıca teşşekürler. Fakat saçma belki ama Ne zaman "margin" nezaman "padding" vermem gerekir tam anlayamadım. İkisinide uyguluyorum ve bir fark göremiyorum. Cehaletim için özür.
Teşekkürler. Margin dış boşluk, padding icbosluk verir. Sadece bunlari anlatan videolar izleyebilirsin.
@@bilisimnedir2898 Çok teşekkür ederim, ilgi ve alakanıza. Çalışmalarınızda başarılarınızın devamını canı gönülden dilerim.
Elinize sağlık güzel akıcı bir anlatım olmuş ama işin en önemli kısımlarından biri olan mobil kısımda açılır menü kısmını anlatmamışsınız.
Teşekkürler, responsive açılır menü anlatımları kanalda mevcut. Bunlardan ekleyenler olmuştu.
@@bilisimnedir2898 Evet diğer videolar arasında rastladım teşekkür ederim.
ben html ve csste çoğu şeyi öğrendim fakat yine de eksiklerim var ve bana web tasarım işinden bir teklif geldi acaba yapabilir miyim kendimi daha iyi nasıl geliştirebilirim. bu arada çok güzel video olmuş emeğinize sağlık
Bence yapabilirsin eğer temel edindiysen bunu bir işe başlayarak daha da ileri taşıyabilirsin emin ol bir iş, en kapsamlı şekilde iş yerinde öğrenilir.
Teşekkürler, tabiiki yapabilirsin. Bir cok kaynak video var, farkli videolarda izlemeni tavsiye ederim. Hepsinden birsey öğrenebilirsin. İngilizcen varsa yabanci videolarida izlemen faydali olacaktır.
hocam yönetim panelini nasıl yapacağız
Yönetim paneli icin kodlama yapmalisin, asp veya php ile.
Hocam konu dışı ama aklıma takılan bir soru var. bir web sayfasını Responsive tasarımda yapmak istiyorsak; reset css mi, normalize css mi yoksa bootstrap4 mü kullanmalıyız? ya da bu üçü başka işlemler mi yapıyor?
Reset ve normalize tarayicilar arasi uyumsuzluklari daha dogrusu yorum farklarini kaldirmak icin kullaniliyor. Bootstrap ise baska bir dünya, framework. Hazir css kod yapilari responsive yapmak icin, gerci grid sistemi ile bunuda cok rahat yapabiliyoruz artik.
@@bilisimnedir2898 anladım hocam çok teşekkür ederim.
Kaynak kodunu paylaşabilir misiniz hocam?
Maalesef kod paylaşmıyorum.😕
Kral Web tasarım ve programlama yeri sağ tarafta çıkıyor aşağı inmiyor
Flex-dirextion:column; deneyin kapsayan dive. Sütun olarak görür ve alt alta gösterir
Hocam elinize sağlık.bir şey sorabilir miyim.sayfanın içinde bulunan mesela ürünler butonuna tıklayınca bu sayfada kalarak nasıl açıyoruz,yani İndex sayfası dışındaki sayfaları nasıl link vereceğiz.ilk sayfa dışındaki sayfaları nasıl yapacağımızı bir türlü anlayamıyorum.
Bunun iç n php yada asp bilmen gerekiyor. Sayfanin orta alanina hangi buton tiklandiysa ondan gelen $GET degerine gore istenilen sayfa o alana include ediliyor.
@@bilisimnedir2898 hocam cevabınız için teşekkür ederim.Yani html ve css kodlarıyla bu işi halledemem.Yada tablonun içinde yaparsam öyle çağırabilirim değilmi?Yani Web sayfalarındaki linklere tıklanınca hep aynı sayfada kalıyor olması html dışında bir kod ile yapılıyor?Saçma sorularsa kusuruma bakmayın.
@@esmadogan7202 Basit bir sayfa sie html ilede yapilir ama acemi işi olur. Anasyafanin sadece ortasi degisik olan kopyalarinin oldugunu düşünün ,her buton bir sayfayı acar bu sekilde orta alan degismis gibi olur. Verilerin veritababindan geldigini dusunursek, evet programlama olmadan olmaz.
@@bilisimnedir2898 hocam gerçekten teşekkür ederim .Acemi işine bile razıyım çünkü anlamıyorum .Profesyonel yapmak için benim sayfalarımın hep php olması gerekiyor doğrumu anladım.O zaman .html ile biten tasarımlarımın bir önemi yok değilmi?
@@esmadogan7202 evet artik html ile biten web sayfasi bulmazsiniz. Html tasarim icin kullaniyoruz, php yada asp icinde. Onsuzda olmaz yani
Hocam benim bi sorum olacaktı bu kodları kullanarak notpad den çalıştırma imkanımız varmı html uzantılı yapsak olurmu
evet çalıştırabilirsiniz
Evet çalıştırabilirsiniz, uzantısını html yaparak. Ücretsiz notepad++ programını da kullanabilirsin.
hocam tarayıcıyı yenilemeden nasıl kendi kendine yeniliyor editörle alaalı bişeymi ben vsc kullanıyorum.
Evet editörle alakalı, Dreamweaver 2019 özelliği. Css dosyasını acmadan html sayfasından css e bolgesel erisimde yapiliyor. Bunun gibi bircok yeniligi var tavsiye ederim.
@@bilisimnedir2898 teşekkür ederim hocam hocam.
bu arada araştırdım başka bir yolda: kullandığımız editöre live server eklentisi ekleyip dosyayı live server la açınca aynı etkiyi alabiliyoruz tabi ctrl+s yapmak lazım.
hocam html ve css dosyası aynı klasörün içinde harici biyerde değil ama olmuyor maalesef çözemedim lütfen beni aydınlatın yapamıyorum ve hiçbir şekilde ilerleyemiyorum
Css dosyasının adini ve ekleme kodlarını gonderirmisin.
@@bilisimnedir2898 hocam mail adresi verebilir misiniz bu sorunu çözelim lütfen çok rica ediyorum
@media only screen and (max-widht:992px){
.orta_alan{ flex-wrap:wrap; }
.orta{width: 200%; }
}
kodu calısmıyor hocam nasıl düzeltcem
width yazımındaki t ve h harfleri hatalı yazılmış. Burdan kopyalayabilirsin.
@media only screen and (max-width:992px)
@@bilisimnedir2898 çok teşekkür ederim :)
acaba mobilde menuyu nasıl yapıcaz bunu hakkında vıdeo cekıcek mısınız
Kanalda responsive menu örnekleri var, onları eklemeyi deneyebilirsiin. Bu tasarıma ekleme videosuda sıraya alındı.👍
hocam merhbalar bu orta alanı ne yaptıysam yanyana getiremedim alt alta duruyor nasıl düzeltebiliriz saygılarım ile
Kanalda flex yapi ile ilgili giris dersi var onu izleyebilirsin, yardimci olacaktir.
cok cok teşekkür ederim oldu
hocam merhabalar bu sosyal ağlara dosyadan çağırıyoruz ya o dosyayı nasıl yapcaz link olarak koydum resim olarak koydum yine gelmıyorbaşka yerden bulup yapıstırdım busefer link olarak altta gözukuyor sizin gibi resim gözüküp uzerine tıklayınca acılmıyor bunu nasıl cozebilirim saygılarım ile.🤔🙈
Merhabalar elinize sağlık harika olmuş buna responsive tasarımı nasıl yapabilirim ben bunu geliştirerek yapıyorum ve slider ekledim harika tasarım ama responsive yapamadım teşekkürler emeğinize sağlık :):)):):)):)):
Teşekkürler, resim galerisini de responsive yapmak için genişliğini göreceli vermelisiniz. width:80%; gibi.
@@bilisimnedir2898 Ben sizin diğer videolarınızı izledim ama menu de görsellik anlamda responsive oluyor js kodunu çalıştırmadım orta alan responsive oldu footer responsive olmadı
js kullanilmayan menü var kanalda birde onu deneyin.
ben bunun bütün sayfalarını yapacam çok sevaba girdiniz öğrendim ama footerda responsive yapamadım keşke parçalı çekseydiniz daha iyi olurdu.çok akıcıydı.Bana bunun dosyalarını atabilir misiniz?ben buna giriş ve kayıt formu yaptım abi. ama footer responsive olmadı.İlginiz için teşekkür ederim.footer responsive kodlarını almam lazım özelden veya gmailden atabilir misiniz?
Merhabalar. Oncelikle anlatiminiz icin tesekkur ederim. 27.44sn"den otesine gecemedim cunku bahsettiginiz dosyalari nasil temin edecegimi bilmiyorum. yardimci olabilirseniz cok sevinirim. Tesekkurler.
Merhabalar, rica ederim. Gerekli Font Awesome dosyalarını açıklama kısmına ekledim, Font awesome sitesinden de indirilebilir. Kolay gelsin.
@@bilisimnedir2898 Cok tesekkur ediyorum...
Lorem10 100 1000
Ve TAB basarsan hocam kendi verecek Kelimeleri
Teşekkürler bunuda öğrenmiş olduk, derslerde kullanırım👍👏
Önce mobilden tasarıma başlayıp sonra desktopa doğru geçmek daha kolay ve pratik değil mi?
Tercih senin👍
@@bilisimnedir2898 Peki, teşekkürler.
Hocam elinize sağlık ben uygulamayı yaptım gayet başarılı oldu ama önceki videodan izleyerek menüyü de ekledim tek sorunum mobil ekrana geçince menü sola gizleniyor menüye basarak sağa kaydırıyorum ama 100% olarak doldurmuyor. pc modunda nasıl ise o genişlikte butonlar geliyor ve kötü görünüyor. hazarburak19@gmail.com bana mail atabilirseniz eğer size hazırladığım şablonu göndermek isterim çözümü konusunda destek olursanız çok mutlu olurum? İki ayrı videodan birleştirerek yaptığım için sanırım yanlış biyere yazdım kodu ama nereye çözemiyorum. çünkü siz birinde html kısmına css eklediniz diğerinde ayrı css eklediniz o arada hata yapmış olabilirim. Teşekkür ederim şimdiden...
Teşekkürler,Hangi menüyü eklemeye çalıştınız. Bu şekilde kopyala yapıştır yerine sıfırdan kendiniz yazarsanız sorun daha az çıkacaktır. Çünkü birinde logo var,hızalamalar karışabilir.Bu site için kanalda bulunanlardan daha farklı bir menü tasarımı ekleyecektim,ama bunuda içeren bir ders ekleyebilirim. İyi çalışmalar.
@@bilisimnedir2898 Ben copy paste olarak gitmedim zaten kendime göre düzenleyerek gittim www.gercode.com/deneme rica etsem şu linke girip mobil şeklinde daraltıp menüyü açarmısınız orda görüceksiniz menü butonları aşağı doğru solda kalıyor ortalanıp ekran genişliği boyunca doldurmuyor.
@@denizgezer5614.menu ul li{text-align: center; } yaptiktan sonra li & ul etiketlerinin arkaplan rengini duzenlersen olacaktir. Linkin saginada gelsen uzerine gelme efekti veriyor. 👍
@@bilisimnedir2898 Teşekkür ederim...
background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("#");
bu kod bende çalışmıyo image siyah olmuyo
videonun 10.dakikasında backroundu sizin yaptığınız gibi yapıyorum fakat gelmiyor yardımcı olur musunuz? @bilisimnedir?