CSS ile Mobil Uyumlu Responsive Web Sitesi Yapımı (Flexbox Tasarım)
HTML-код
- Опубликовано: 7 сен 2024
- 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.c...
👇👇Font Awesome Stil Dosyaları👇👇
drive.google.c...
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
şu sabahın köründe Allah cc. tuttuğunu altın etsin :)
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
Anlatımınız çok sade ve anlaşılır. Elinize sağlık hocam, teşekkür ederim.
Hocam gerçekten çok sağol gerçekten. İlerde çok güzel bir site yaparsam sizin sayenizde olacak, Allah razı olsun hocam gerçekten.
Eline ağzına sağlık. Dinlediği en başarılı anlatımlardan bir tanesi (Adım adım). abone oldum .....
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 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 👌🏻
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
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.
Sade anlatımınız benim için çok faydalı oldu, teşekkürler, saygılar.
Çok başarılı bir anlatım. Ellerinize, ağzınıza, emeğinize sağlık.
Eline koluna sağlık mantığını şimdi anladım mantığını bu flex mevzusunun işin gücün rastgelsin
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
Mükemmel anlatım tasarım derslerie devam lütfen
Hocam Allah sizden razı olsun cok güzel anlatmışsınız odevi sizden bakarak yaptım
merhaba, bu güzel içerik için çok teşekkürler, anlatımınız sade ve açıklayıcı.
Ç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.👍👏
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.
Ç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 👏🏻
Eline sağlık hocam çok güzel bir video olmuş.
Super .tessekurler
eline emeğine bileğine sağlık mükemmel bir video olmuş..
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...
çok tatlı ve öğretici olmuş teşekkürler
Çok teşekkür emeğinize sağlık.
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.
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.
iyi anlatmışsınız hocam.Azərbaycan salamlar.
Teşekkürler. Can Azerbaycan a selamlar.
Acaba menunu mobil kisminda focus vererek yapa bilirmiyiz?
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
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 classlari inlizce verseydiniz daha iyi olurdu
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
hocam galeri yazıyorum ama yazdıgım başlık menude kalıyor galeriyede fotograf yüklesem de gözükmüyor nedendir
telefon görünümüde 44:52 cursor pointer gerekli mi?
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
super
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.
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 🙂.
iyi video
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
Okullarda responsive öğretecek lerine flex box öğretseler ne kaybederler acaba
Yeni müfredatta flex yapısı var ama maalesef cok yuzeysel.
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.
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.
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
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
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 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.
Ö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 php ile nasıl kodsuz site yazabiliriz ?
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?
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.
Hocam size nasıl ulaşabilirim acaba bir iletişim kaynağı verirseniz çok sevinirim teşekkürler
hocam yönetim panelini nasıl yapacağız
Yönetim paneli icin kodlama yapmalisin, asp veya php ile.
bu sitenin hazır kodlarını verme şansınız varmı
hem hatalarımızı kontrol ederiz
Lorem10 100 1000
Ve TAB basarsan hocam kendi verecek Kelimeleri
Teşekkürler bunuda öğrenmiş olduk, derslerde kullanırım👍👏
Kodları bizimle paylaşma şansınız yokmu?
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.
@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ı.👍
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
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
Kaynak kodunu paylaşabilir misiniz hocam?
Maalesef kod paylaşmıyorum.😕
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...
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...
videonun 10.dakikasında backroundu sizin yaptığınız gibi yapıyorum fakat gelmiyor yardımcı olur musunuz? @bilisimnedir?
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