HTML – CSS İLE YEMEK (KAFE-RESTAURANT) SİTESİ YAPIMI (BASİT VE KONU ANLATIMLI )

Bu dersimiz de html ve css kullanarak bir web sitesi tasarımı yaptık.
.
.
instagram adresimiz:https://www.instagram.com/yazilimci_dayi/
Merhabalar arkadaşlar bugünkü dersimizde HDMI ve CS ile ekranda gördüğümüz web sitesini tasarlayacağız buradaki Ana tema Arkadaşlar bir yemek sitesi olabilir Bir sadece içecek satan bir kafe tarzında bir site olabilir veya esnaf lokantası tanıtır gibi işte yiyecek içecek tatlılar bunları bu şekilde yapabiliriz Yani ben yemek sitesi yapımı diye başlığı koyacağım ama

Siz burayı istediğiniz gibi değiştirebilirsiniz arkadaşlar yani buradan her türlü bu Dediklerime geçiş yapabilirsiniz Peki nasıl bir siteniz var üst tarafta menümüz var Arkadaşlar gördüğünüz gibi bu şekilde bir arka plan resmimiz üstünde bir buton Sizler burayı değiştirebilirsiniz işte sadece buton koymak yerine farklı işte şeyler yapabilirsiniz arka plan resmini değiştirip üzerine yazılar

Yazabilirsiniz Bu tamamen sizin elinizde Ben temel olarak burada yapacaklarımı göstereyim Şimdi bir de alt kısımda bu şekilde kart yapımını göreceğiz arkadaşlar satırı nasıl bu şekilde üçe böldük burada ayrı bir bölüm oluşturdum belki burayı 4’e bölersiniz İşte burayı 3’e bölersiniz vesaire Bu size kalmış burada satır aralarında nasıl ayarlayacağız işte Nasıl boşluk

Bırakacağız bunları nasıl bölüm oluşturacağız kartta nasıl oluşturacağız hepsini adım adım anlatacağım Bir de son olarak bu şekilde bir footer kısmımız var arkadaşlar sitemiz genel çerçevesiyle bu şekilde gördüğünüz gibi yapmak isteyen varsa önden Ben bir deneyeyim Hocam sizi izlemeden önce demek isteyen varsa onun için bir bu şekilde göstermiş olalım dediğim gibi bu

Siteyi yapacağız şimdi adım adım buna işte farklı şeyler eklemek buradaki şeyleri çıkarmak İşte bu hover olaylarını değiştirmek tamamen hepsi sizin elinizde Ben temel olarak buradaki mantığı vereyim iskeleti size anlatayım Siz buradan istediğiniz gibi işte ekleyin çıkarın Bu tamamen size kalmış ama bu bir şeyler eklerseniz arkadaşlar arkadaşlar sizin için daha iyi olur

Biraz siteyi değiştirirseniz sizin için daha iyi olur Çünkü işte bilmediğiniz bir şey yapmaya çalışın İşte şu kısmı flood left de buraya bir resim buraya bir yazı koymaya çalışın mesela kendinizi geliştirin böyle yani belli bir yere kadar Tamam beraber yapalım ama Belli bir yerden sonra videoyu bitirdikten sonra oturun kendinizi site

Üzerinde değişiklikler yapın Kendinizi bu şekilde geliştirin Arkadaşlar onu da söylemiş olalım Şimdi artık lafı uzatmadan kodlamamıza geçelim arkadaşlar ünlem tart dedik İskeletimizi çağırdık bir hdraları oluşturacağız burada bir linki etiketi oluşturalım Arkadaşlar bunun klasına da logo diyelim Bu sol tarafta menünün solunda olan logoları temsil ediyor arkadaşlar şimdi buraya bir ne oluşturalım bu nevimizin

Içinde u ile anordu listesi Bir de li yani liste elemanları bunun içinde de bir ağ etiketi linketi yani arkadaşlar burada işte menü diyebilirsiniz birinciye bunları da değiştirebilirsiniz arkadaşlar kendinize göre tasarlayın menü işte içecekler Burada da tatlılar desin tatlılar diyelim şöyle tatlılar Burada da içecekler diyelim Arkadaşlar şimdi ne yaptık liste elemanlarının

Içine link etiketlerini niye koyduk Çünkü buraya tıkladığımızda herhangi bir yere yönlendirmek için yani Şuradaki kısmı herhangi işte indeks nokta HDMI diye ana sayfadasınız Burada eğer indeks nokta HDMI içinde bir yere yönlendirecekseniz sayfa içinde işte bir ID verin örnek veriyorum ıd4 bu şekilde tıkladığı zaman sayfanın alt kısmına gitsin böyle ıd4 Ondan sonra

Farklı bir sayfaya yönlendireceksiniz işte içecekler sayfası var işte içecekler nokta eşdeğer mi buraya içecekler nokta işte mal yazacaksınız Arkadaşlar bu şekilde sizi yönlendirecek böyle kendinizi ekstra şeyler de deneyin yani benlik vermiyorum diye bir yere yönlendirmiyorum diye Siz de aynısını yapmayın arkadaşlar video bittikten sonra kendiniz de bu şekilde ben size

Böyle Ara ara elimden geldiğince hatırlatacağım değiştirmeniz yerleri bu şekilde oluşturup Bir çıktığımıza bakalım gördüğümüz gibi geldi bu şekilde karşımıza şimdi bakın kenarda boşluklar var o boşlukları bir alalım stil diyelim CSS yazacağımız yeri bir çağıralım ardından pelink sıfır margin 0 ve box cycing bak scising Border box diyelim Arkadaşlar şimdi o kenardaki boşluklar

Gördüğünüz gibi gitti şimdi bir header alanımızı çağıralım burada buradan ne yapacağız background arka plan rengi siyahtı burada bir background kabloları vereceğiz ardından bir de padding verelim yani puding Neydi o yazılarla bu arka plan rengi Siyahın arasındaki arayı açmak için arkadaşlar burada 20 piksele 25 piksel diyelim Alttan üstten 20

Piksel sağdan soldan 25 piksel Şimdi nev’e gelelim arkadaşlar nerede ne yapacağız Display inline Block diyelim ardından genişliğini verelim with Arkadaşlar burada bir yeni bir şey göreceğiz kalk diye bu peki ne işe yarar Hocam şöyle bir yazayım ilk önce hemen Ondan sonra ne işe yaradığını da anlatayım Şimdi burada Aslında with %100

Dediğimiz zaman bazen geniş genişliği tam oturtamadığı zaman sayfaya altta bir altta kalıyor biri üstte kalıyor yan yana hizalayamıyoruz şöyle örnek vereyim ekranı ikiye böldük mesela arkadaşlar kartlarımız var Sağlı sollu şimdi %50 bu %50 bu eğer biz buna işte bir şekilde fazlalık Ekstradan bir genişlik yükseklik verdik bir yerlerini büyüttük

Falan bunun genişliği %50-1 oldu bu ne oldu bu sefer bir alt satıra düşüyor burada Diyoruz ki işte örnek veriyorum Şuraya bir piksel olarak yüzde bir olarak düşünün Diyoruz ki %100’ünü kaplasın eksi %1 Yani bu %51 de olsa bu Yüzde birlik kısmı aradan at Hani satırı bozmasın gene ikiye bölsün bir alt

Satıra inmesin gibi düşünebilirsiniz açıklamasını kaynaklardan internette birçok kaynak var oradan eee şey yapabilirsiniz arkadaşlar bulabilirsiniz text Ela Right diyerek Sağ hizaladım şimdi nemin altındaki url’lere bir ulaşalım burada ne yapacağız list Still ne anlayacağız Arkadaşlar bu anordate yani sıra Siz sitedeki işte nokta noktaları falan o kenardaki onları kaldırmaya yarıyor bu

Kodumuz şimdi evin altındaki liste her bir liste elemanlarına gelelim Burada da Display inline blok diyelim arkadaşlar ardından bir de margin değeri verelim 10 piksele 25 piksel alttan üstten 10 piksel sağdan soldan 25 piksel şöyle bir şey yapalım gördüğünüz gibi bu şekilde bir görüntü aldı Şimdi bakın mesela böyle yazdık Siz işte anlamadığınız yer

Mi var şurada gelin kendinize kodlardan çıkarın arkadaşlar Mesela örnek veriyorum şu kısmı çıkarın şu şekilde bir bakın Ne yapıyor bu şekilde yan yana gelmişler yani şu Display inden blog işte bunları yan yana getirmiş İyi güzel işte backgroundalar ne yapmış arka planı siyah yapmış pedding şurada araya boşluk vermeyi sağlamış güzel bunları Zaten

Bile varsayılan boşlukları aldı sıfır sonra geldik bu kısma işte liste bu kenarlıklarını yok etti buradaki disiplüyle yeniden blokta ne yaptı bu şekilde Şuradaki liste elemanlarını yan yana getirmemizi sağladı ve bu görünümü elde ettik Ayriyeten menü yapımı vesaire bunların hepsini kanala video içerik olarak atacağım arkadaşlar hazırladım O yüzden çok detayı inmemeye çalışacağım

Yani menüde anlamadığınız bir yer olursa menü yapımı videosu kanalımızda olacak Çok yakında işte kartlar anlamadıysanız kart yapımı videomuz olacak bunları da ayrı ayrı anlamadığınız yerler olur diye bu videoları da ayrı ayrı çektim arkadaşlar hepsini yakında yükleyeceğim şimdi Nerede kaldık bir Mardin değerimizi de verdik devam edelim Şimdi logoya gelelim nokta logo

Burada ne yapacağız İlk öncelikli olarak arkadaşlar yazının rengini White diyelim yazılı rengini bir beyaz yapalım hop gördüğümüz gibi bu şekilde ondan sonra textecoration diyelim arkadaşlar altındaki çizgiyi yok edelim gördüğünüz gibi ardından font sweat Bolt diyelim arkadaşlar burada yazının kalınlığını ayarladık Biraz daha kalın görünmesini sağladık yazının ardından bir de

Fontsie 22 piksel yazıya bir fonsi bir yazı büyüklüğü verdik gördüğünüz gibi 22 piksel şimdi ne yaptık logoyu bu şekilde Hallettik bitti mi bitmedi arkadaşlar Nevin altındaki ulenin altındaki linin altındaki ağlaya geldik yani şu kısma geldik şimdi aynı şekilde onu da düzenleyeceğiz Çünkü ilk önce textecinden diyelim altındaki çizgileri

Alalım kaldır diyelim yazının rengini FF beyaz yapalım arkadaşlar bir feding değeri Verelim bu 15 piksele 25 piksel olsun Alttan üstten 15 piksel sağdan soldan 25 piksel arkadaşlar fonsi 22 piksel diyelim şimdi bir Nasıl gözüküyor ona bakalım bakın Ne dedik çizgiler gidecek dedik yazı beyaz olacak dedik gördüğümüz gibi bu şekilde bir görünümü

Elde ettik Bir de buna imlecim his ile üstüne geldiğinde meydana gelen değişikliklerimiz burada bir hovarovları ekleyelim bir background kalır arka plan rengi ekleyelim yani beyaz olsun yaz Rengi de siyah olsun Arkadaşlar kaydedelim gördüğünüz gibi bu şekilde bir görünüm elde etmiş olduk şimdi ne yapacağız Arkadaşlar şimdi menü genel anlamıyla burayı tamamladık şimdi HDMI

Header kısmını Hallettik şöyle burayı bir kapatalım bu header 1 kısımda şimdi main diyeceğiz Arkadaşlar bu mailimizi içine section diyeceğiz Buna da bir Class vereceğiz şu şekilde section 1 diyeceğiz Arkadaşlar bu klasada şimdi Peki hocam bu mail ne arkadaşlar bunların hep mantıksal bir etiket bunların hep bu şekilde ayırmanız gerekiyor direkt konteyner falan da

Diyebilirsiniz Ama artık ne yapıyorduk her yaptığımız site üzerine bir şeyler kattığımız için Şimdi burası bakın bir hedef kısmı Yani telaffuzda bir sıkıntı olabilir Kusura bakmayın buradaki ne evde bu header’ın içinde arkadaşlar Hacer ne bu en üst kısımda bulunan işte sayfanın bir logosu olur bir menüsü olur buranın bulunduğu kısım

Main kısmı da Arkadaşlar bir de en altta footer kısmı yapacağız footer hariç bu sayfa için söylüyorum geri kalan ana içeriklerin en kapsamlı olduğu yer Hepsi yani mainin içine yazılacak arkadaşlar Peki hocam seçti düşünelim yani main tam yani Şurayı komple kapladığını düşünün footer işte şurada aşağıda gözükmüyor main komple Burası olduğunu düşünün seçti

Işte kartların ikinci bölümü gibi düşünün seconlarda bölüm anlamına geliyor beyinde buradaki ana alan arkadaşlar bunu da kısaca bu şekilde söylemiş olalım burada ne yapacaktık Resmin üzerine bir tane buton vardı burada bir tane buton olduğu için bunu eklemiş olduk klasına da arkadaşlar btsn S1 diyelim yani ne demek S1 yani seçti

Buton Bunu kendinize göre de klaslar verebilirsiniz Bu Class isimlerinde Zamanla daha da iyileştireceğiz şu anda kafamız karışmasın diye bu şekilde yapıyoruz arkadaşlar iletişime geç gibi bir şey yazdık buraya kaydedelim gördüğünüz gibi butonumuz geldi şimdi hemen Ne yapalım artık Şuraya bir resim ekleyelim bir CSS kodlarını bir geçelim şöyle de bir şey

Diyeyim Arkadaşlar şöyle bir yorum satırı yapın Mesela deyin ki buraya işte Menü Burada işte menü kısmı olsun tamam mı buradaki işte menü altındaki resim kısmı bu şekilde böyle böyle kendinize yorum satırları yapın ha deyin ki İşte buna menü kısmı css’te bir hata yaptınız beni de olan bir hata bunu düzelteceksiniz Ne

Yapacaksınız En azından tarayacağınız aralığı biliyorsunuz yani komple bütün SS kodlarını taramayacaksınız O yüzden sırayla yazın böyle ve bu şekilde notlar yazın ki arkadaşlar sizin için bir şey olduğu zaman geri dönüşü kolay olsun Şimdi burada ne dedik section 1 dedik burada arkadaşlar buna Class olarak verdik buraya ID olarak da

Verebilirsiniz Aslında buraya ID versek daha iyi Peki hocam ID ile ID benzersiz şey arkadaşlar yani sadece buraya verilebiliyor Bu aile seçim bir ailesi Class birden fazla verilebiliyor Ee bu sexon bir tek bir tane olacağı için bir bölüm olacağı için buraya özel olduğu için o yüzden buna ID versek daha doğru

Olur arkadaşlar şimdi ne yapacağız section Biri buradan çağırdık şimdi CSS kodlarını yazmaya başlayalım background İmaj bir arka plan rengi vereceğiz buna lineli gradient bir renk geçişi ile yapacağız Arkadaşlar şu şekilde renkleri vereceğiz mesela bunu bilmiyorsanız Hemen internetten gireceksiniz Arkadaşlar bir ufak bir araştırma yapacaksınız 0,0,0.8 Bir de ikinci renk burada aynı

Şekilde yazacağız 0, virgül 0,0,0.8 Bu ikinci rengimiz sonra geldik Bir de buraya bir URL edeceğiz arka plan resmini yazacağız buraya bakalım doğru yaptık mı bir yerde bir yanlış yaptık şöyle bir yanlış yaptık Bir dakika devam edelim 81 resim gelecek Şimdi arkadaşlar background position diyelim arka plan resmini nereye sabitlesin üst kısmına bu şekilde

Belirttik ardından devam ediyoruz bir puding vereceğiz arkadaşlar pedingimiz 12 piksel olsun bir Hayde bir yükseklik verelim 850 piksel olsun bir genişlik verelim genişlikte yüzde yüzünü kaplasın Yani tamamen kaplasın backgroundayız diyelim yani resmi bozmadan en uygun şekilde tamamen bölümü oturdu gelmesi lazım Evet bir sıkıntı yok şu anda geldi arkadaşlar bu şekilde gördüğümüz gibi

Burada bir arka plan resmi araştırabilirsiniz arkadaşlar Bu gördüğünüz gibi arka planın Bu renk geçişleriyle çağırdım top dediğimiz kısım üst kısma doğru odakladı resmi üst kısmına doğru bir Hayde dedik yani yükseklik verdik genişlik %100 ekranı tamamını kaplasın dedik ardından Back science dediğimizde resmi bozmadan tamamen güzel bir şekilde ekrana oturtması için yaptığımız bir

Şeydi Arkadaşlar şimdi burada herhangi bir sıkıntı var mı Yok şimdi butonu buraya alalım Bir de butonu süsleyelim Şimdi ne yapacağız nokta btn S1 Action 1’deki gördüğümüz gibi şöyle arada bir kontrol edelim btns bir doğru şimdi gelelim buna bir şey yapmaya CSS vermeye arkadaşlar margin left diyelim margin left

Soldan bir değer verelim 37 %37 ardından margin top diyelim Bu da kaç olsun yüzde yirmi olsun arkadaşlar bu değeri verdikten sonra bir de background Color Verelim bu özel bir renk arkadaşlar yani e94560 şu şekilde bir renk bunu Color Hunt var arkadaşlar ya da priz CSS Color palet yazın birçok kaynak çıkar

Burada ücretsiz birçok renk paletlerini veriyor sadece şöyle şu kodu oradan kopyalamanız sizin için yeterli olur arkadaşlar kollarına da beyaz diyelim effe ardından bir padding Hatta şöyle bir kaydedelim çıktığımızda Bir bakalım gördüğümüz gibi bu şekilde şimdi bakın puding ne işe yarayacak Şu arka plan rengiyle bu hani kapladığı yer Maksim bu

Kadar pedingle bu kapladığı yere aşacağız biraz daha yani şu bitiş yeri bitim yeri ile bu iletişime geç kısmı arasında boşluk vermemizi vermemize yarayacak peding 25 piksele 20 piksel alttan üstten 25 sağdan soldan 20 piksel gördüğünüz gibi bu şekilde şimdi devam edelim bir fontsiez verelim font size 20 piksel olsun bir Border

Radius verelim kenarlık yuvarlak mı 6 piksel olsun Bu da Bir bakalım bir kaydedelim gördüğünüz gibi bu şekilde bir çıktığımız oldu burada bir de transition olayı ekleyelim nokta btn S1 Power olayı gerçekleştiğinde ne olacaktı kaldır rengi bilek olacak Arkadaşlar gördüğünüz gibi bu şekilde şimdi burada bir yerlerde bir yanlışlık yaptık büyük ihtimal

Niye Çünkü diğer Kindi bu şekilde değildi buton şey yapalım Bir de transsission ekleyelim burada Onu da bulacağız şimdi transition diyelim Color bir saniye şu şekilde Bunun leftünün değerini biraz daha arttırabiliriz şu şekilde kaç olsun mesela 47 olsun bu şekilde ama burada gene bir sıkıntı var bir kodu yanlış yazdık büyük ihtimalle hangi kodu

Yanlış yazdık acaba burada Yaptığım projeler var arkadaşlar Evet burada bir şey yanlış yazdık şimdi Ne yapalım şuradan sayfa kaynağını bir Görüntüle diyelim Biz de dediğim gibi yanlışlık yapabiliriz bölmeyelim videoyu bakalım yanlışı nerede yaptık Mesela şimdi bir hata aldığımız zaman şöyle ilerleyeceğiz Nerede yanlış var buton kısmında var değil mi şurada

Yanlışlık yok arkadaşlar Evet Şimdi şöyle keşfettim ondan asıl menüleri görmek için tıklayın yazmamışız biz buraya iletişime geç demişiz menüleri görmek için tıklayınız dediğimde aynısı olacak bizde de şimdi bu verdiğimiz değeri de geri alalım Mardin led 47 yazmayalım 37 yazalım eski haline çevirelim bunu gördüğünüz gibi bu şekilde Çünkü tuhaf geldi bana da yazdığımız

Içerikten dolayı imiş çünkü ben onu onun değerlerini o sayfaya göre ayarlamıştım buradaki yazıları değiştirince orada hata gibi geldi bize Aslında herhangi bir hata yapmış içeriği eksik yazmışız buraya da kesmeyeceğim arkadaşlar ama bir hata olsaydı nasıl yapacaktık buradan gelecektik mesela sayfa kaynağını Görüntüle diyelim yazdığımız kodları gelecektik Nerede hata vardı

Buton kısmında onun klasını bulacaktık buradan onu inceleyecektik arkadaşlar ve hata var sandım sadece yazıyı yanlış yazdım butonumuzda gördüğünüz gibi Herhangi bir sıkıntı olmadan çalışıyor şimdi ne yapacağız artık bir sonraki bölümümüze geçeceğiz section 2 diyeceğiz arkadaşlar şöyle yazalım section laviscon dedik buna bir ID verelim Burada section 2 diyelim arkadaşlar

Class deseniz de bir hata almazsınız ama Audi desek daha iyi olur şimdi buraya ne yapıyorduk kart kısmını oluşturacağız Arkadaşlar bu seçti burada ilk önce bir oluşturalım ve klasası kart olsun arkadaşlar bu kapsayıcı en kapsayıcı olan elemanımız bir resim ekledik burada şöyle SRC kısmını belirtelim iki nokta jipek ardından Ne yapalım devam edelim Aslında

Bunların hepsi birer kutu gibi düşünün Arkadaşlar şimdi değil diyoruz bir tane daha klasik konteyner oldu ve bir konteynerin içine bir tane H2 dedim otomatikman şöyle rastgele Metin atılsın ardından bir paragraf etiketi Loren burada 4 diyelim şu şekilde ona da bir atama yapsın Hatta Loren şöyle daha fazla olsun bu şekilde bakalım bir çıktığımızda

Gördüğümüz gibi resim Resmin altına bu şekilde gelmiş oldu şimdi bunu CSS kodları ile düzelteceğiz resmin orijinal boyutu olduğu için bu şekilde geldi ekranımıza şimdi devam edelim CSS kodlarını yazacağız Öncelikle Şuraya bir geldik şimdi ne yapacağız bundan bir 3 tane bir oluşturalım bunu css’de düzelteceğiz zaten bakın kopyalarken de doğru bir şekilde kopyalayın şöyle

Yanlış şey olursa hata alabilirsiniz sonra çok sıkıntı oluyor böyle kopyala yapıştır yaparken alınan hatalar gördüğünüz gibi bu şekilde alt alta geldi Şimdi bunları css’de bir düzenleyelim bakalım geldik buraya Şimdi şöyle bir yorum satır yapın kart kart deyin arkadaşlar buraya da yani kart olan kısmı burada düzenleyeceğiz şimdi öncelikli olarak bir section 2

Dedik section 2’yi bir çağırdık buradan display’e Flex diyeceğiz arkadaşlar Just Fire content Space ardından bir de bir Mardin değeri verelim 200 piksele 06 dan üstten 200 piksel yani bölüm 2 ile şurada arasında bir boşluk olsun alt tarafın ve üst tarafın arkadaşlar gördüğünüz gibi kaydettik şöyle bir yenileyelim burayı

Bu şekilde ekranımıza geldi Ne oldu bakın yan yana geldiler resim büyük olduğu için bu şekilde oldu şimdi resimleri falan da ayarlayacağız Yani bu Display özelliği Burada bunların yan yana gelmesini sağlıyor yani şu iki satır komutla bunları yan yana getirdik arkadaşlar şimdi devam edelim Biraz rahatsızım Kusura bakmayın arkadaşlar nokta kart

Dedik kart dediğimiz bir çağırdık dedik ki genişliğin %20’sini kaplasın şimdi düzelteceğiz o şey kısımları resmin genişlik kısmını Bir de box Shadow bir gölgelendirme ekleyelim 0 boşluk 5 piksel boşluk 9 piksel boşluk sıfır bir de bir renk değeri atacağız burada arkadaşlar 0,0,0,0,4 ve son olarak bir Border radyus diyeceğiz Yani bir kenarlık

Yuvarlatacağız alt piksel kaydedelim gördüğünüz gibi bakın Ne oldu bu şekilde ayarlamış olduk şimdi kartları ayarladık resimlere geldi Sıra şimdi onları da ayarlayacağız hiç sıkıntı yok şu şekilde dursun şimdi devam ediyoruz gördüğünüz gibi section 2 kısmını ayarladık yan yana getirdik sonra kartların genişliğini de ayarladık onları da yan yana getirdik

Gayet güzel şimdi burada bir kartlara bir hover olayı gerçekleştiğinde kartlara bir Hour olayı gerçekleştiğinde opositesi 0.7 olsun şöyle kaydedelim her biri karta geldiğinde şu şekilde olacak şimdi büyük olduğu için resimler ondan dolayı biraz sıkıntı oluyor Şimdi gelelim Ondan sonra ne yaptık Bir konteyner diyelim şurada.com cenner .com.tr içerik kısmına geldik arkadaşlar burada

Padding verelim pedding değeri verelim burada padding değerimiz 5 piksele 20 piksel olsun ve bu.com teener diyelim yani içerik kısmına geldik gene bu sefer içerik kısmındaki p paragraf etiketi için bir mağara verelim 15 piksele sıfır arkadaşlar alttan üstten 15 piksel sağdan soldan sıfır bu aralarındaki boşluk için kullanıyoruz bir İMG diyelim arkadaşlar

Resim için burada geldik resim için Border radius bir kenarlık yuvarlatacağız burada 6 piksele 6 piksel 00 bir kaydedelim Evet burada sorunumuz çözülmedi niye bir hatamız var galiba bir dakika Bir de şey yazalım şu P’nin şuraya ayarladık Arkadaşlar bu padding değerleriyle falan margin değerleri ile Şuradaki paragrafta Mardin’de şuradan

Alttan üstten bir boşluk falan bıraktık paddinglerle bunları ayarladık Bir de buraya fontsiez verelim yazılım büyüklüğü 19 piksel yazının büyüklüğünde ayarladık Ama bu resimlerde bir sıkıntı var şimdi bir saniye Display Flex dedik justify selamund margin değeri verdik bit 20 yüzde bir sıkıntı yok kenarlık verdik burada bir sıkıntı gözükmüyor şurada

Resimden dolayı bir şey var resme de dersek şöyle genişliğin %20’sini kapla diye yüzde yüzünü kapla deyince niye bu kadar genişletti Evet bu şekilde gördüğünüz gibi bunu yazmayı unutmuşuz gördüğünüz gibi gayet hoş durdu şimdi bunu yazmadık araya bu diğer kimlere yazarken de anlatamadık kaynadı neyin ne işe yaradı şuradan şu margin diye

Arkadaşlar paragrafa yazdık şu kısmı yazdık gördüğünüz gibi bu şekilde birbirinden ayrılmasını sağlıyor Kusura bakmayın o hata araya kaynamış orada o öyle olduğu için şuranın mantığını kısaca bir anlatayım pedding değeri de neydi konteyner içerik kısmı için bakın gördüğünüz gibi bu şekilde sıfıra sıfırdı buradaki peding değerleri de bunlar arasında şu kenarlar arasında bir

Boşluk vermemizi sağladı o pas diye biliyorsanız şu şekilde Hour olayı olduğunda yapmıştık paragrafın font sayısını büyüttük Herhangi bir sıkıntı yok şimdi şöyle yapacağız bir saniye Şurayı şöyle bir kopyalayalım arkadaşlar seçtim biri aynı şekilde şöyle gelelim aşağı kısma şuraya yapıştıralım şimdi şuraya Öncelikle bir dakika bir geri alalım Şurayı

Şöyle tam ekran yapalım ufak ekranı olduğu için sıkıntı oluyor şimdi Burası neydi section 2 idi şu section 2’yi alalım bu şekilde kopyalayalım tamam mı geldik buraya şuraya yapıştırdık en alt kısma geldik bakın section 2 Burası buraya seçin 3 yapalım şimdi section 3 oldu buraya da gelelim şey kısmına

CSS kısmına burada secon 3 diyelim buraya da aynı şekilde displayine Flex ardından justify content çıkıyor zaten bizim için justify around ve son olarak margin 200 piksele sıfır diyoruz arkadaşlar Evet gördüğünüz gibi Bakın bu şekilde bir görünüm aldı bunu da ayrı bir bölüm olarak düşüşe attım ayarladım arkadaşlar

Section 1 section 2 Burada da 83 3 bölümde Burası oldu Burayı da ayrı bölüm olarak ayarladım siz isterseniz buraya farklı şeyler de yapabilirsiniz yapabileyim diye bir bölümde 6 tane bölmedim yani Farklı bir şey eklemek isterseniz Kafanız karışır işte yükseklikler genişlikler bazen sıkıntı olabiliyor bir şeyler oluyor karışıyor sonra insanın içindeki bütün istek

Gidiyor Burada hata alınca uğraşmıyorsunuz yani insanla uğraşası gelmiyor Daha doğrusu o yüzden sizin için ben burayı ikiye böldüm burayı istediğiniz gibi kullanın Şimdi son olarak da artık şu main kısmını da bitirdik bakın dediğim gibi her şeyde videoda adım adım bir şeyler ekliyoruz bakın header kısmı main kısmı bunu da bitirdik

Şimdi bir footer kısmı ekleyeceğiz aşağıdaki En aşağı kısmı açıklamanın işte Instagram adresi herhangi bir işte YouTube adresi vesaire Sosyal medya adreslerinin bulunduğu işte adresin veya işte iş adresinin bulunduğu falan böyle kısaca iletişim bilgilerim bulundu kendini tanıtabilecek şeylerin bulunduğu yerde Water kısmı da ben buraya powered by yazılımcı da yazıyorum yani yazılımcı

Dayı tarafından desteklenmektedir gibi bir şey yazıyor burada Siz buraya ikonlar falan da ekleyebilirsiniz hepsini gösterdim ikonun nasıl ekleneceğini işte satırı nasıl böleceğiz 2’ye 3’e nasıl ayarlayacağız bunları görüyoruz Burayı da istediğiniz gibi düzenleyebilirsiniz bunu yazdık Şimdi gelelim şuraya CSS kısmına footer dedik buraya bir background kalır arka plan rengi verelim Black olsun

Ardından bir yazımızın rengini verelim beyaz olsun text Center dedim yazıyı yazımızı ortalayalım fontsie verelim Şöyle 20 piksel Bir de kaydedelim bakalım nasıl bir şey olacak Gayet güzel tabi Bakın şu aralarda biraz boşluk Olsun bunda ne ile yapıyorduk padding ile yapıyorduk Hemen onu da ekleyelim gelelim pedding Alttan üstten 20 piksel

Olsun sağdan soldan herhangi bir boşluk vermeyelim gördüğünüz gibi bu şekilde bakın biraz daha güzel oldu bakın buradaki değerler de zamanla o oturacak yani hocam Peki biz işte Niye 4 köşeden 20 piksel vermedik yani şimdi Bazen sadece Alttan üstten bir değer vermek gerekiyor Siz bunu gidip şu şekilde de işte paddingtap

Deyip 20 piksel deyip işte gene 20 piksel diyebilirsiniz bu böyle de olur bir hata almazsan ama şimdi iki satırda Yani bir satırda yapılabilecekken Niye iki satırda yapalım bunu da işte zamanla Yani bir anda olmaz bu buradaki şeyleri aradaki böyle açıkları Zamanla göreceğiz Zamanla olacak bir şey kaydedelim bakalım Evet

Gördüğünüz gibi alt tarafta bu şekilde oldu işte buraya dediğim gibi Kore ekleyebilirsiniz buradaki şeyleri değiştirebilirsiniz bunlar tamamen size kalmış Ben temelindeki her şeyi size elimden geldiğince anlatmaya çalıştım birkaç tane hata aldık Onda da videoyu kesmeyeceğim arkadaşlar doğal olalım biraz daha yani hata alır nasıl bir şeyle hani nasıl bir adım izlemeliyiz nelerle karşılaşıyoruz

Onları da görmüş oluruz hep birlikte yani Ben de hata alabilirim Ben de yanlışlık yapmış olabilirim Ben de profesyonel değilim yazdığım kodlarda Hani fazlalık olabilir Çok Yalın olmayabilir onu da söyleyeyim Ama dediğim gibi bir hata aldığınız zaman ilk öncelikli olarak örnek veriyorum Nerede hata aldın işte şurada almıştık değil mi

Bunu aldığın zaman ilk önce git bir HDMI koduna bir bak bak bakalım klasını doğru vermiş misin CS kısmında sonra döviz kısmına bak bakalım buradaki klaslara doğru şeyler yazmış mısın buradan bu şekilde kontrol et işte sonunu noktalı virgül koymuşsun falan bunları Kontrol et yani bununla bağlantılı olabilecek şeyleri kontrol et dediğim gibi bu şekilde

Sorunu çözmeye odaklanalım Bir de dediğim gibi CSS yazarken şöyle ayırın Arkadaşlar yorum satırları koyun işte burası menünün altındaki resim kısmı falan Burası kart kısmı falan bu şekilde ayırın Hani bir hata olduğu zaman direkt burası işte kart kısmıymış deyip hatayı buradan bir yerdendi zaten değil alanı bu şekilde daraltın Bu da bir taktiktir yani

Arkadaşlar Dediğim gibi şu anlık Yapacağım işte bu şekilde Şu an bir çalışan yeri var mı bakalım bir hata daha alırsak onu da düzeltiriz ama yok gibi duruyor Şu anlık böyle Video çekerken de hata almayı seviyorum Aslında biraz daha böyle mücadele etmek gerekiyor bazen her zaman her şey yolunda gitmeyebiliyor

Dediğim gibi bu şekilde Herhangi bir sorunuz olursa yorumlarda belirtin arkadaşlar fikirlerinizi önerilerinizi bana iletin Yani bir sorunuz olursa da hocam sorabilir miyim demeyin arkadaşlar direkt Yazın bazen geç dönüş yapıyor sorabilirsin diyorum bu sefer ya sizin sorunuz cevap bulmuş oluyor ya iş işten geçmiş oluyor falan o yüzden siz Direkt sorabilir miyim demeyin arkadaşlar

Direkt sorun aşağıda yorumlar kısmında ya da Instagram’da bir yerden sorun hesapları bırakıyorum zaten açıklamaya Benim diyeceklerim bu şekilde arkadaşlar izlediğiniz için teşekkür ederim herkese başarılar kolay gelsin değerli derslerimizde görüşmek üzere

KAYNAK