Basit Web Sitesi Yapımı – HTML ve CSS ile Basit Yemek Sitesi Yapımı

Arkadaşlar merhaba, bu videoda birlikte HTML ve CSS kullanarak basit bir yemek sitesi yapacağız. Yeni başlayan arkadaşlar için faydalı bir video olacağını düşünüyorum. Kolay gelsin.
Kaynak Kodlar ► Katıl üyelerine özel
Daha Fazlası ► https://linktr.ee/gorkemliyazilim
▼ Tüm Ücretsiz Eğitimlerin Bağlantıları Aşağıda ▼

🎥 Ücretsiz Kurslar ► https://www.youtube.com/playlist?list=PL6huaSWRtPK_Pteru75vX_PlsYv5DNoFt
🎥 HTML Dersleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK9qsB6XM5s3Uc0Tts8fV5X4
🎥 CSS Dersleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK84OyNxcIWv-c6o3Z04Dy2K
🎥 CSS Örnekleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK_1l2PiLgvLDHD0Opa6VY1q
🎥 JavaScript Dersleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK_iPvsJDjPD_haOaGt2ZT1N
🎥 JavaScript Örnekleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK-4GNNnXjS3l-Rw1X0Skvo8
🎥 Bootstrap Dersleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK9AAM1kZnB1rWe-vvpf5Au4
🎥 Bootstrap Örnekleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK8E-TL_qlBsNQ_Iw8YNwiFL
🎥 C# Dersleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK_239NEgrD2zdfZDvm_SeX3
🎥 C# Örnekleri ► https://www.youtube.com/playlist?list=PL6huaSWRtPK_8rNlbaphsLl2J6iaFmIx7
arkadaşlar videoya başlamadan önce Bu videoda ne tarz bir proje yapacağız buna bir göz atalım Bu videoda Arkadaşlar bir yemek sitesi geliştireceğiz yukarıda bir menümüz olacak bu şekilde altında yemek arayabilmek için güzel bir arama kutumuz hover ile renk değiştirme özelliklerini göreceksiniz hizalamalı Tabii ki yine göreceksiniz burada güzel bir Hero alanımız arka planda bir resim nasıl eklenir üst ü Yazılar butonlar nasıl eklenir bunları yine göreceksiniz altında indirimli yemeklerimiz burada mevcut eski fiyatı yaptık bakın yeni fiyatı yaptık bu şekilde işlemleri de göreceksiniz Arkadaşlar dikkat ettiyseniz tüm her şey Nizami yani resimlerin boyutu birebir her biriyle aynı yazılar keza aynı hizada bunlara da dikkat ediyoruz burada bir altında popüler yemekler var burada da arkadaşlar popüler yemekleri listele iyoruz ve popüler Etiketi de hemen yukarıda koyduk biraz alta indiğimizde tüm yemekleri de burada listele diyoruz her yemekte yemeğimizin bir resmi başlığı açıklaması fiyatı ve sipariş ver butonu yer alıyor Bu şekilde tüm yemekleri buraya listel ettik altta da footer alanımızı da oluşturuyoruz ve web sayfamızı bitiriyoruz aynı zamanda respons bir yapıya da sahip Yani siz bunu şöyle bir telefona geçirdiğinizde telefondan açtığınızda da gayet düzgün gözükecek bakın yani sadece bilgisayara göre yapmadık aynı zamanda telefonda da gayet düzgün gözüken bir site birlikte kodluyoruz Arkadaşlar bu videoya geçmeden önce temel bir html bilginizin ve CSS bilginizin olduğunu varsayıyorum arkadaşlar ona göre anlatıyorum videoyu Eğer yoksa Eğer html bilmiyorsanız CSS bilmiyorsanız YouTube kanalımda Zaten bunlar ücretsiz bir şekilde mevcut Önce onları izleyebilirsiniz Hatta hemen göstereyim YouTube’a girelim youtube.com buradan Görkemli yazılıma Giriş yapalım şimdi buradan giriş yaptık dostlarım Selamlar şu şu videoları falan kapatalım buradan oynatma listelerine gelin arkadaşlar bakın burada html ders var 22 video Naz Hanım ve Ser Bunun tamamını izlediğinizde html ile ilgili bir sorununuz kalmayacak videolarda kısa kısa bakın 5 dakika 2 dakika 3 dakika 2 dakika 5 dakika Hani öyle Aman Aman uzun videolar da yok kısa bir şekilde bir günde hemen birkaç saatte bitirebileceğiniz bir yapı önce html’ İzleyin eğer bilmiyorsanız daha sonra bakın burada CSS dersleri var burada 26 video bulunuyor bunları da bitirebilirsiniz Arkadaşlar bunu bitirdikten sonra artık videoya geçiş yapabilirsiniz gayet rahat bir şekilde bu videoyu kodlayabiliriz şunu da söyleyeyim Bu video E yani buradaki CSS derslerinin daha da gelişmişi var şimdi buradakiler toplasanız 3-4 saatlik bir video yapar Ben bunun yaklaşık 7 saatliği de ekledim yine ücretsiz bir şekilde tabii buradan kurslara gelin bakın 6,5 saatlik 7 saate yakın bir CSS kursu var burada yine tüm bölümleri bakın position overflow of gibi tüm böyle bölümleri parça parça ayırdım ilgili bölümden de başlayıp izleyebilirsiniz Yani bu videoyu uygulayabilmek için temel bir html ve CSS bilgisine ihtiyacınız var Eğer bunları bilmiyorsanız yine ücretsiz bir şekilde benim kanalımdan öğrenebilirsiniz Eğer Hazırsanız Haydi başlayalım Evet projeyi incelediğimiz göre artık html dosyamız oluşturmaya başlayalım arkadaşlar ilk etapta html dosyamızı oluşturacağız bir sonraki etapta da CSS dosyamızı oluşturacağız ve projemizi artık tamamlayacağız şimdi Eee ben yemek sitesi diye bir klasör oluşturdum masaüstünde bunu da visual Studio Code ile açtım buna bir html dosyası oluşturacağım New file dedim veya Şuradaki boşluğa sağ tıklayıp New file da diyebilirim İsmi index.htm olsun Tamamdır html dosyamı oluşturdum varsayılan dokümanı oluşturabilmek için ünlem enter yapıyorum bu şekilde de kodlarım gelmiş oldu şimdi title olarak title olarak Ne verebiliriz buna yemek sitesi diyelim basit yemek sitesi böyle bir e isim verelim Bunu Tabii değiştirebilirsiniz daha sonra hemen şimdiden yolumuzu yapalım ve şuraya CSS dosyamızı verelim şöyle link dedikten sonra bakın burada link 2 nokta üst üste CSS diye bir şey çıkıyor bunu buradan seçiyorum ve direkt olduğu gibi bırakıyorum style.css Birazdan oluşturacağım evet bu şekilde yapım başlangı başlangıç için Tamamdır Arkadaşlar bir de bunu açalım Tabii E bir browserda bir tarayıcıda biz bunu görüntüleye aynı zamanda buna bir de ikon ekleyelim Yani WEB sayfalarının üstünde gözüken e küçük ikonlar vardır ya onlardan da ekleyelim şimdi sitemizi sağ tıklayıp Open with Live Server ile E açalım ve yan ekrana getirelim Bu arada kendi eklentilerim sizlere göstereyim indirmek istediğiniz olursa bu 5 eklentiyi kullanıyorum html CSS support Live Server night All benim Temam prettier ve vs Code icons bunları kullanıyorum Daha detaylı eklentiler için YouTube kanalımda bir eklenti videosu mevcut yaklaşık yarım saat uzunluğunda eee tüm popüler eklentileri neredeyse anlatıyorum orada detaylı bir şekilde şimdi sitemizi açtık basit yemek sitesi buraya gelmiş şuraya bakın mouse’a bakın Şuraya bir ikon koymak istiyorum Bunun için ne yapabiliriz bunun için şöyle gidelim Nereye gidelim mesela flat ikona gidelim flaticon.com öyle gidelim burada bir arama yapalım Örneğin diye bir arama yapıyorum bakalım neler çıkacak buradaki ikonlar gayet güzel bu aşama için kullanabileceğimiz ikonlar Buradan bir tane seçelim Örneğin ben bunu seçeyim şuradan alttan png’ye tıklıyorum buradan free download diyerek bunu indireceğim Bunu nereye kaydedeceğim arkadaşlar hemen yemek siteme geliyorum klasörü Buraya yeni bir tane klasör oluşturacağım ismine ımg diyorum burada indireceğim resmi buradaki ımg klasörü içerisine kaydedeceğim Evet indirdim ve bakın ımg altında favicon png ismiyle kaydettim Siz de farklı bir isim de olabilir buradaki resmin ismini değiştirebilirsiniz şimdi kapatabilirim buraları da kapattım Tamamdır Şimdi bunu ekleyelim yani Buradaki favicon bizim yemek sitesi logosu olarak şuraya ekleyelim Nasıl yapacağız yine link diyelim link deyip İki nokta üst üste koyduktan sonra bakın burada favicon yazıyor buna enter lalım Direkt benim için bu şekilde bir yapı bir kod bloğu getirecek buna geliyorum Ne yapmıştık HF kısmına yolumuzu vereceğiz ımg altındaki favicon n png kaydettiğim zaman bakın ikonum buraya geldi Hani ben başlangıç için böyle bir ikon koyuyorum siz isterseniz bunu değiştirebilirsiniz tabii ki arkadaşlar Tamamdır şu an her şey yolunda gibi gözüküyor Şimdi şöyle bir işlem yapalım artık e kodlarımızı yazmaya başlayalım Yukarıdaki yapıları oluşturduk değil mi title’ mızı verdik E işte resmimizi ikonum koyduk artık kodları yazmaya başlayalım Şimdi ne yapacağım birinci aşamada şöyle çize çize göstereyim benim tüm sayfam Burası İsa ilk başta yukarıdan aşağı doğru gideceğim yukarıda şöyle bir header kısmı yapalım yani burada bir başlığımız olsun başlık Burada da menüler olsun menü 1 menü 2 menü 3 gibi burada da menülerimiz menü başlıkları olsun Evet bunu yapalım şimdi kapatalım bunin içerisine geldim bunin içerisindeyim şimdi header oluşturacağım dedim Eğer bir önceki basit web sitesi yapma videosunu izlediyseniz orada buketleri daha önce kullanmıştık Eğer izlemediyseniz önce o videoyu izleyin arkadaşlar ondan sonra buraya gelebilirsiniz daha mantıklı olacaktır şöyle header diye bir etiket koyacağım Yukarıdaki menüleri Bu etiketin içerisinde tutacağım Tabii başlığımı da bir tane başlık ekleyelim şöyle H1 etiketini koydum başlık ne olsun Örneğin e lezzetli yemekler böyle bir başlık vereyim Siz istediğiniz başlığı tabii bilirsiniz Peki şimdi menümü oluştur bunları bir ul içerisinde oluşturabilirim Hani ul içerisinde ller vardı ya bu şekilde oluşturabilirim ama daha da düzgün kod yazmak için ben bunları da bir kapsayıcı etiket içerisine alacağım Bu da Now olacak bu Now da navigation danan geliyor hani yönlendirme anlamına geliyor buradaki menülerimiz ne olacak birer yönlendirme olacak yani menüler yazacak mesela menülere tıkladığımızda menülere gidecek bir yönlendirme ana sayfa yazacak Ana sayfaya tıkladığımda Ana sayfaya gidecek bakın bir yönlendirme bu tarz yönlendirme e işlemlerini navın altında yapmak daha da mantıklı olacaktır şimdi ul li yapımı oluşturabilirim bir liste tarzında olacak bu yapılarımız bir şey olmayacak Örneğin ben Eee şöyle düşünelim burada ana sayfa yazıyor diye düşünün ana sayfam ben bu Ana sayfaya tıkladığımda başka bir sayfaya gitmesi için ne yapmam gerekiyor benim bu ana sayfayı a etiketi ile kapsamamaktadır a etiketi dedim Graf kısmında nereye gideceksek oraya Örneğin işte hakkımızda değil mi n html işte index.htm nereye gideceksek orayı belirleyeceğiz Ben şu an için herhangi bir yere gitmesin istemiyorum Bu şekilde boş bırakıyorum Peki A’nın içerisine Ne diyelim gelelim Örneğin ilk başta ana sayfa diyelim şöyle kaydettiğim zaman bakın yapım otomatik olarak buraya geldi Peki bunu kopyalayın şöyle ana sayfayı da şöyle yazsak daha iyi şöyle geldim kopyaladım ya da esenle çevirelim şöyle bundan kaç tane yapalım şöyle bir 34 tane yapalım ikincisine Örneğin menüler diyelim üçüncüsüne hakkımızda dördüncüsü de iletişim diyelim Hani bunların hepsini tek tek yapmayacağız amaama bu videonun sonunda Eğer istiyorsanız hepsini tek tek yapabilir duruma geleceksiniz şimdi bu şekilde olabilir Arkadaşlar bu e yapımızı header mızı oluşturabiliriz bu şekilde şimdi buna herhangi bir Class falan tanımlamadır gördüğünüz gibi Herhangi bir classı ıd’si yok çünkü bunlar zaten Unique yani Uni Demek bu da şöyle yazılır u n i q unik demek zaten benzersiz demek e bu header bir tane daha olmayacağı için benim buna bir Class falan eklememe gerek yok ama daha iyi çalışabilmek için isterseniz classlar ekleyebilirsiniz Şimdi bir tane Class eklemeden yapayım Bir sonraki yapacağım e birazdan yazacağım kodları da classlar ile yaparız aradaki farkı görürsünüz şimdi menümüzü oluşturduk menüden sonra menünün altına şöyle gelelim şöyle yine çizelim Burası tüm sayfamız şurası header mız değil mi şimdi şöyle bir yere de Search bar yapmak istiyorum Yani bir arama kutusu yapmak istiyorum şöyle bir yuvarlak arama kutusu olur Şurada da bir buton olur veya butonu alta da koyabiliriz fark etmez Bu şekilde bir arama kutusu yapmak istiyorum Peki bunun için header altına geliyorum header’ altına bir tane div oluşturalım Arkadaşlar bu div bu sefer bir Class verelim Bu seferki Kımız ne olsun Hani arama kutusu diye de yazabiliriz ama E yani bu videoyu izlediğinize göre yeni yeni web web siteleri geliştirmeye başlıyorsunuz E bu işte yeni iseniz de bu işte İngilizcenin önemi çok büyük Bunu söyleyebilirim haliyle Biz de en azından isimlerini ID isimlerini Şimdi burada gözükenler ana sayfa menüler bunları İngilizce yazmamıza gerek yok Bunlar Çünkü bir Türkçe kelimeler siteyi Türkçe olarak gösteriyor ama arka planda yazdığımız şeyler yani şu arama kutusu kullanıcıya gözükmüyor o zaman bunun İngilizce olabilir Türkçe olmasına gerek yok ingilizce olması daha da bunun Global yapacaktır zaten o yüzden biz arama kutusu değil de örneğin search searcher Tamamdır Search container içerisine geldim Bir input oluşturuyorum arama kısmı için typ text olabilir Bir de place Holder verelim Buna da yemek ara diyelim şöyle Hani yemek ara tamamdır altına bir tane buton oluşturalım bunun type hani şu an için kullanmayacağız ama maksat Han böyle hazır bulunsun diye yapıyorum bu type’ vermek zorunda değilsiniz buton verebiliriz submit verebiliriz fark etmez submit olsun Örneğin Buna da ara diyelim şöyle Evet burada da Search kımızı oluşturmuş olduk bunları da CSS ile müdahale edip daha güzel bir hale getireceğiz şimdi bakın iki farklı alan Aslında oluşturduk birkaç dakika için içerisinde şöyle yine tamamını çizelim birincisi header ikincisi arama kutusu üçüncüsü şöyle bir Hero istiyorum bunlara web geliştirmede Hero denir Arkadaşlar bu herolar da tanıtıcı mesajlar gibi düşünebilirsiniz web sitenin E şöyle büyük bir alanını kaplar içerisinde de genelde yazılar ve butonlar olur tanıtma amaçlı bir yapıdır Bu herolar bunları da web sitelerinde sık sık kullandıkları için ben de bu örnekte tekrar göstermek istedim şimdi bir tane Hero oluşturalım dediğim gibi bunu da türkçeleştirme gerek yok Hero dedim hemen alta indim bu Hero da ne olsun Örneğin bir tane başlık olsun başlığımız lezzetli yemeklerin tek adresi diyelim Örneğin hemen altına bir tane paragraf koyalım lezzetli ya bunlara ne yazabiliriz şu an hani öylesine yazıyorum ama buradaki yazıları kendinize göre düzenleyebilirsiniz lezzetli yemekler size bir tık uzakta bu şekilde de bir paragrafımı olsun hemen altında da bir tane butonum olsun bunu da a ile yapabiliriz şöyle geldim Burayı da yemekleri keşfet diyelim şimdi bu A etiketini ben bir buton olarak kullanacağım Niye Çünkü tıkladığımda bir yere gitmesini istiyorum hani şu an için bir yere gitmeyecek onu yapmayacağız Ama siz bu projeyi geliştirmek İstediğiniz zaman elinizde hazır olarak bulunsun Peki ben bu A etiketini buton olarak göstermek için ne yapmalıyım buna bir tane Class Vermeliyim ki ona da örneğin buton diyelim bir tane Class vereyim ki diğer a etiketlerinden ayrılsın bakın Şuradaki ayrılsın yoksa bunların hepsi A etiketi olduğu için hepsi birden butona dönüşür Ben a etiketine değil buton kına CSS yazacağım haliyle tek buradaki a etiketi dönüşecek butona Evet arkadaşlar şimdi bu hero’yu da e tamamladık şimdi bari Yemekler kısmına gelelim yemekler kısmı bunları da bu arada açıklama satırıyla şey yapmama gerek var mı bilmiyorum ama bence yok zaten her birinin arasında düzenli boşluklar bıraktık neyin ne olduğu belli yani Şimdi arkadaşlar yemekler kısmına gelelim yemeklerde ü farklı şey düşünüyorum Nasıl yani Şöyle gelelim şurada yemekler olacak ya yemekleri üç kategoride düşünüyorum birincisi indirimli yemekler ikincisi Eee ne yemekleri olsun işte indirimli popüler yemekler olsun üçüncüsü de tüm yemekler Hani ne var ne yok Her şey burada listelenecek olsun Tabii bunların burada yazılar yazacak işte indirimli yemekler popüler yemekler tüm yemekler diye burada başlıkları olacak arkadaşlar şimdi ilk başta o zaman indirim indirimli yemeklerle başlayalım gelelim hemen bu sefer bir div de oluşturabilirim ama daha anlamlı olması için ve yine de farklı bir etiket kullanmak için section adında bir etiket kullanacağım section bu section zaten bölüm demek parça demek arkadaşlar bölüm parça gibi bir anlamı var Türkçeye çevirdiğimizde bu etiket ile de ben bu yemekleri parça parça ayıracağım Az önce sizlere çizdiğim gibi şimdi ilk başta indirimli yemekleri yapalım bunu da bu section da indirimli yemekler olduğunu belirtmek için bir Class verelim Hani indirimli popüler tüm yemekler bunları ayırmak gerekiyor ya klar ayırabiliriz Buna da indirimli falan diyebilirsiniz veya İngilizce olarak ne diyelim Eee Örneğin promotion diyelim promosyon gibi bir şey e diyebiliriz buna Hani buradaki Klas isimlendirmeleri de değiştirebilirsiniz ben şu anlık aklıma geleni yazıyorum İngilizce olarak Şimdi bir tane başlığımız olsun H2 diyelim Bu öteki kadar büyük olmasın içerisine de indirimli yemekler diyelim arkadaşlar Evet indirimli yemekleri buraya verdikten sonra altına bizim arkadaşlar e şeyleri vermemiz gerekiyor tek tek yemekleri vermemiz gerekiyor ama burada şöyle bir durum söz konusu Şimdi şöyle çizersem tekrar ş bir tane yemeğim olacak benim hani şu indirimli yemekler Burası tamam mı büyük büyük çizeyim şurası indirimli yemekler zaten yazdık şuraya ben buraya şöyle 3 tane e yemek koyacağım bu yemeklerin Neyi olacak bir tane resmi olacak değil mi Bir tane başlığı olacak şuraya başlık başlık Başka ne olur bir tane açıklaması olur Şöyle yemeğin nasıl yapıldığına dahil açıklamam Başka ne Olur tabii fiyatı olur Şöyle bir yere fiyat diyelim Örneğin 10 Başka ne olur Bir de sipariş var olur buton olur yani sipariş Sipariş Bu şekilde bir işlem yaptırtmak bu şekilde olacak bu her birinde olacak tabii ki arkadaşlar buradan buna buradan buna şöyle buradaki yapım bu İkisinde de olacak Toplam 3 tane ne olacak bunlardan şimdi düşündüğünüz zaman burada bir resim var 1 burada bir başlık var 2 burada bir açıklama var 3 burada bir fiyat var 4 burada bir buton var sipariş ver diye bu da 5 5 tane farklı etiket olacak Burada ben bu 5 tane etiketi alt alta işte div değil mi 1 div 2 div 3 div 4 div kaç tane vardı 5 5 div bu şekilde alt alta yazarsam Hem bir karmaşa olur hem de istediğim gibi CSS özelliklerini aktaramamak bir tane divin içerisinde birleştireceğim bu sayede daha Derli toplu bir görüntü yakalamış olacağım o sebeple geliyorum altına bir tane div oluşturuyorum şimdi Bu ne olacak benim e bir tane yemeğim olacak buna da örneğin Class menü Ne diyelim menü item diyelim hani buna food da diyebilirsiniz food item falan fark etmez istediğiniz ismi verebilirsiniz şimdi bunların içerisinde ne olacak bir tane ımg olacak değil mi onun dışında bir tane başlık olacak Örneğin ilk yemek ne olsun E bir tane şuraya yapalım Örneğin İskender bir tane paragraf olacak İskender dediğimiz şey nedir yoğurt ve tereyağı tereyağı ile soslanmış E dönerdin döner üzerine yapılan bir yemek Hani lezzetli diyelim çok lezzetli çünkü lezzetli bir yemek diyelim şöyle noktayı da koyalım bu şekilde bir açıklama da belirttik hemen altına paragrafın altına yani fiyatını belirleyelim fiyat için şöyle bir şey yapabiliriz Şu an aklıma geldi Örneğin E bir eski fiyat olsun Bir de yeni fiyat olsun mesela eski fiyatı 30 T yeni fiyatı Hani bunlar indirimli ya indirimli olduğu için ör 20 ama eski fiyatın üstünü şöyle silsin çizsin yani 20 gözüksün şu yapıyı oluşturmak istiyorum ben nasıl yapacağım geldim bir tane span oluşturdum spanın içerisine Örneğin şu anki fiyatı yazayım şu an 20 diyeyim sallıyorum fiyatları 20 T İskender yok tabii 2024 Martın sonuna yaklaşıyoruz şimdi 20 dedim Ben bunun yanına ne dedim bir 30 yazayım ama bu 30 TL’nin üstü silinsin üstünde bir çizgi olsun o zaman ben bunu ne yapabilirim buradaki 30 t’yi kestim bir tane etiket vardı html derslerinde anlatmıştım izlemeyenler Oraya bakabilir YouTube’da var del diyorum del delen Gelir Bu Da delden Gelir silmek anlamına gelir ben buraya 30 t’yi verirsem bakın 30’nin üstünü sildim Şimdi şu arada bir tane boşluk var bakın büyüteyim şöyle Şu arada bir tane boşluk var Ben bu boşluğu arttırmak istiyorum bu boşluğu arttırmak için şuraya şöyle boşluk boşluk boşluk bırakmamın herhangi bir faydası yok burada html’de boşluk bırakabilmek için önemli bir etiket var şöyle bir işaret nbsp bunu yaptığınız zaman bakın bir tane Boşluk bıraktı gördünüz mü Bir tane daha yapayım kopyaladım yapıştırdım kaydettim bakın aradaki fark iyice açılıyor Ben html’de boşluk bırakmak İstediğim zaman buradaki etiketi kullanıyorum Peki bunu da öğrenmemiz iyi oldu şimdi Neyimiz Kaldı resmimizi koyduk resim şu an yok birazdan indireceğim İskender’i koyduk yani başlığımızı paragrafımı fiyatımız Bir de buton koyalım böyle buton Buna da Eee sipariş ver diyelim buradaki butonun da tasarımını yapabilmek için bir Class verelim Örneğin sipariş ver Nedir order Button Olsun bu da hani sipariş ver butonu olarak bunu da adlandırabiliriz şimdi Bakın arkadaşlar burada bir menü item oluşturdum Ben bundan Yan yana 3 tane istiyorum demiştim ya 3 taneyi bakın kopyalı yapıştır ile yaptım geri alayım hızlı oldu biraz bakın Şuradaki menu emı kopyaladım bunu Yani kopyaladım buraya geldim Bir tane daha yapıştırdım Aşağı indim bir tane daha yapıştırdım 3 tane buraya yapıştırdım ya artık ben bunu birden fazla yapıyorsam benim bu listeyi kapsayacak Bir elemana ihtiyacım var demektir Ne demek bu şöyle açalım şimdi ben ü tane Yapı oluşturdum birincisi değil mi bu birincisini oluşturduğumda Herhangi bir sorun yok Ben bunu tek başına kullanabilirim ama ben ikincisini ve üçüncüsünü oluşturduğumda artık bunları kaplayacak kapsayacak Yeni Bir elemana ihtiyaç duyarım Bakın bu ikinci bu 3üncü bunları kapsayacak şu dışarıdaki elemana ihtiyaç duyuyorum Neden Çünkü bunların üçünü Ben 6 al değil de yan yana sıralamak isteyebilirim veya daha farklı bir e CSS uygulamak isteyebilirim o zaman da mecburen bir tane kapsayıcı Yani bir tane büyük elemana ihtiyacım var Bunları şu an Ben anlatırken Hani bildiğim için direkt karar verebiliyorum Ama sizler yeni öğreniyorsun pratik yapa yapa öğreneceksiniz yani İlk başta bu kaps kapsayıcı yı koymadan 3 tane yan yana koyacaksınız ha diyeceksiniz bu olmadı o zaman şöyle mi yapsak diyeceksiniz ve doğru alanı bulacaksınız Arkadaşlar bunlar tamamen pratik oturacak şeyler Şimdi ben ctl Z ile geri alıyorum bakın şurada bir tane menü itemim vardı bir tane yemeğim vardı ben bunu kestim sildim Buradan kestim ama bakın Yani tekrardan yapıştırabilirim İstediğim zaman bunları artık ben bir liste içerisinde tutacağım Buna da örneğin menü items diyelim böle Tabii Class olarak bunu verdikten sonra içerisine menü emı koyuyorum Çünkü bu menü iteman 3 tane olacak yani Birden [Müzik] fazla Evet 3 taneyi ben buraya getirdim Şu an için alt alta geliyorlar ama bunları biz CSS ile arkadaşlar ne yapacağız yan yana getireceğiz şimdi buradaki resimleri de dolduralım arkadaşlar buradaki resimler için ben size E videonun indirilebilir kaynakları kısmında aşağıda bir indirme bağlantısı verdim github üzerinden veya Google Drive da koymuş olabilirim aşağıdaki bağlantıdan indirin arkadaşlar resimleri niye izin indirmesini söylemiyorum yani ekstradan hem uğraşırsınız resimleri bulmakla hem de ben buradaki resimleri belli bir formata göre ayarladım yani buradaki resimlerin çoğu 400’e Pardon 300’e 200 boyutunda her biri ben bunları özel olarak ayarladım sizin internetten indireceğiniz bir resim E bir tanesi Örneğin 100’e 150 olabilirken [Müzik] boyutu Bunlar genişlik ve yükseklik bir tanesi 500’e Örneğin 300 olabilir yani boyutları birbirinden farklı olabilir ama benim yaptığım ve indirilebilir kaynaklar kısmında paylaştığım resimlerin her birinin boyutu eşit Yani 300’e 200 arkadaşlar 300’e 200 müydü 180 miydi öyle bir şey ayarlamıştım ben o yüzden aşağıda bıraktığım linkten Siz de bur resimleri indirin şimdi buradaki e Yemekler için şu 3 tane yemeği bir bitirelim birincisi mesela İskender olsun ikincisi ne olsun şöyle ikincisine Adana kebap diyelim Adana kebabın da bir açıklamasını yazalım Adana kebap nedir zırhta çekilen şöyle ince kıyılmış dana etiyle Aslında kuzu karışık oluyor galiba Ama yapılan E yanında da işte közlenmiş sebzelerle servis edilen nefis bir kebap çeşidi bu şekilde Adana’nın da e fiyatını açıklamasını yazmış olabiliriz fiyatını 35’den 2’ye indirmiş olalım bir tane daha yemek koyalım bu Bu da ne olsun Örneğin lahmacun olsun biraz böyle kebap salonuna çevirdik buradaki indirimli yemekleri ama Siz istediğinizi verebilirsiniz Tabii Lahmacuna Ne diyelim ince hamur üstüne dana kıyması Başka ne olur e soğan değil mi ve baharatlarla baharatlarda yapılan eee yapılan nedir şimdi Pizza türü falan diyeceğim ayıp olacak pizza gibi değil yapılan yemek çeşidi Böyle diyelim Bu şekilde de lahmacun umuz kalsın fiyatı da 15’den 10 t’ye düşmüş olsun arkadaşlar şimdi ne yapacağım Buradaki resimleri önce projeme dahil edeceğim daha sonra arkadaşlar Şuradaki iskender Adana kebap ve lahmacun resimlerini şuralara ekleyeceğim Şimdi öncelikle resimleri bir dahil edeyim Şimdi ben buraya arkadaşlar bakın bir sürü E resim koydum Adana kebap baklava Beyran çorbası bulgur pilavı gibi bir sürü koydum bunları şimdi burada kullanacağız birincisi neydi ımg içerisinde değil mi İskender jpg bakın geldim ikincisi ımg içerisinde neydi Adan kebap jpy üçüncüsü yine ıgn içerisinde lahmacun jpg bakın 3 tane resmim de buraya gelmiş oldu burada diğer resimleri de ben ekledim bir daha bir daha uğraşmayalım diye şimdi buradaki Neyi bitirdik indirimli yemekleri bitirdik buradaki indirimli yemekler bittiği için buradaki section Geliyorum şu an 35 satırda bende buradaki Oka tıklıyorum ve bunu şöyle kapatıyorum Bakın tekrar tıklarsam açılır kodlar buradaki kodu artık gizliyorum ki diğer kodları [Müzik] Yani olabilir Bunun için de ne yapalım şöyle kalemimizi çıkartalım [Müzik] burada istediğim şey yine 3 tane yemek olacak yan yana yine aynı isim işte şuraya şöyle resim isimler yazılar falan gelecek buton istediğim ekstra bir şey var yukarıya popüler olduğunu belirleyen bir e kutu koymak istiyorum Şurada da popüler yazsın Bu şekilde bir yapı oluşturmak istiyorum şimdi promotion yaptık Yani indirimli yemekleri yaptık o yüzden bir tane daha section oluşturuyorum Buna da Class olarak ne diyelim e farklı farklı isimler verilebilir ama hani mesela şu an feature diyeyim buna Hani isimler tamamen değişebilir biliyorsunuz artık söylememe gerek yok Burayı da popüler yemekler diyelim popüler yemeklerimiz nerede Hemen alta geldiler popüler yemekler dedikten sonra Yukarıda işin mantığını anlatmıştım birden fazla Yapı yan yana gelecekse benim Bunu bir konteyner la Yani bir kapsayıcı ile sarmam gerekiyordu Bu kapsayıcı da neydi menü items menü items içerisine Ben şimdi yine menü itemlar mı oluşturacağım arkadaşlar neyim olacak bir tane ımg olacak içerisine bir tane yukarıda H3 mü kullanmıştık H2 mi H3 kullanmışız Burada da H3 kullanabiliriz Yemeğin ismi ne olsun Örneğin içli köfte olsun altına bir tane paragraf Buna da E ne diyelim bulgurun içine kıyma konularak hazırlanan e kızartması da olur Bunun yağlı bir şekilde olanı da oluyor kızartma diyelim biz kızartılarak servis edilen bir lezzet Tamamdır açıklamamız da yazdık Hemen şöyle alta inelim bu sefer fiyatını belirleyelim span bunda bir eski fiyat olmayacak çünkü indirimde değiller ya direkt normal fiyatını verebilirim Örneğin tanesi 10 olsun bu şekilde fiyatı verdikten sonra bunu yaptıktan sonra önemli bir nokta hani önce buton oluşturalım daha sonra onu oluştururuz buton Cl ne vermiştik yukarıda order butt vermiş içerisine de sipariş ver diyebiliriz Peki şimdi şimdi önemli noktaya geldik önemli nokta Neydi arkadaşlar yukarıya Yani şunu düşünürsek [Müzik] hani şunu öyle resimden itibaren şunu alalım şunu şöyle bir parça olarak düşünürsek şöyle yukarıya bir yazı yazdırmak istiyorum ve buraya işte önerilen falan yazsın [Müzik] önerilen veya işte Ne diyelim popüler falan da yazdır tutabiliriz şu şekilde bir kutu olacak Yani sağ üst köşede bunun için ne yapabiliriz bunun için bir span oluştururuz ve Örneğin popüler deriz buna popüler dedikten sonra bunu yine ayırmak için bunu css’de kullanacağız bir Tag klı verebiliriz arkadaşlar Evet bu şekilde bunu ayarladık CSS kısmında bunları Tabii ki detaylıca ayarlayacağız içli köfte için ıgn altındaki içli köfte diyelim Tamamdır geldi Başka ne yapalım Böyle kopyalayın şunu iki tane daha yaptım Bir e sonraki yemeğimiz ne olsun Örneğin şöyle yandan da bakıyorum imam bayıldı olsun Örneğin bir sonraki yemeğimiz buraya da imam bayıldı diyelim Şuradaki resimlerden bakıp Hani buluyorum Birkaç tanesini bunların hepsini kullanacağız Tabii İmam bayıldın içerisine ne girer biber ve domatesle doldurulmuş Eee zeytin yağlı Olur tabii zeytin yağlı zeytin yağla pişirilen Ne diyelim bir patlıcan veya bir sebze yemeği diyelim şöyle fiyatı da e 18 olsun sipariş ver ve popüler bunda da olacak tabii bir sonraki Örneğin yukarıya İmam balı dediysek Buna da karnı yarık diyelim şöyle karnı yarık bu karnı yarık da yine patlıcandan oluyor Patlıcanın ortadan ikiye e kesilip ayrılıp içine kıyma ile doldurulan değil mi kıyma harcı doldurulmasıyla E kıyma harcı doldurulmasıyla yapılan bir yemek Bu da yapılan bir yemek bu şekilde karnı yarıkta geldi karnı yarığın resmi buydu tamam şu imam bayıldı Bu da içli köfte Tamamdır 3 tane daha resmimizi getirdik 3 tane daha yemeğimizi koyduk Bunlar da popüler yemekleri bunu kapattım Şimdi arkadaşlar bakın promotion yaptık Yani indirimli yemekleri yaptık onun dışında şeyleri popüler yemekleri de yaptık şimdi bundan sonra geriye kal şey tüm menüler yani tüm menü diyorum ama buna tüm yemekler de diyebilirsiniz tüm yemekleri buraya getireceğiz bunun için yine bir section oluşturuyorum bir Class vereceğim Buna da ne diyelim menü diyelim Hani tüm menü olacak ya içerisine H2 tüm menüler diyebiliriz tüm yemekler diyebiliriz fark etmez içerisine şimdi yine birden fazla eleman koyacağım için bir div oluşturuyorum ve class olarak menü items’ veriyorum arkadaşlar yukarıdakiler de Doğru yaptık değil mi Menü items verdik buna bakalım Evet vermişiz Tamam menu items’ verdikten sonra burada neyimiz olacak bu diğerlerine göre daha basit olacak Yine bir menü eee bir menü item olacak içerisinde bir İMG değil mi altında bir H3 başlık Örneğin bu da kuru fasulye olsun altında bir paragraf işte Kuru fasulye ne olur haşlanıyor kuru fasulyenin e haşlanarak pişirilmesiyle mi Ne diyelim ya buna kur fosil haşlanarak pişirilmesiyle salça falan da konuyor galiba oluşturulan bir yemek diyelim buna fark etmez Ne diyeceğimiz Şurayı da ımg altından kuru fasulye jpgyi verelim buraya geldi paragrafın altına bir span koyalım yine fiyatı olsun Örneğin 18 olsun Bu da bir de buton koyalım bu buton da sipariş ver butonu olsun ile yine order Button verelim şimdi yapacağımız şeyler Arkadaşlar artık birbirini tekrar eden yapılar zaten sadece html dersi bile 40 dakika olmuş E tabii tane tane anlatmaya çalıştığım için bu kadar uzun olması normal Arkadaşlar şimdi yapacağımız işlem Şuradaki menü item var ya bunları kopyalayıp böyle alt alta getirip artık şurada yanlarda yazmadığımız Örneğin hamsi pilav fırında patates etli karnıbahar bulgur pilavı Beyran bunları baklava falan daha yazmadık yukarıya yukarıdakilerden farklı olacak yazmadıkları bu şekilde buraları doldurarak kopyala yapıştırı ile ilerleyeceğiz Hani bunları videodan sonra ben yapacağım videoyu kesip hani şu an bir tane daha yapayım menü emı kopyaladım ikinci yemek olarak ne verebilirim Şöyle mesela buna ne diyelim e Pide diyelim şöyle Buradan da resimlerden pideyi Tabii ki de bulacağız Pide nasıl olur e üzerine bucuk değil mi peynir kıyma veya evet kuşbaşı eklenir Hatta kuşbaşı et konulan açık veya kapalı açık veya kapalı hamur hamur diyelim mi Hamurlu bir nedir yemek midir bir tür yemektir yemek diyelim şöyle Evet buraya da bunu bu şekilde getirmiş olduk pidenin fiyatı 25 olsun sipariş ver Burada da yazsın bir tane daha yapayım hadi ondan sonrakileri videoyu durdurup yapacağım tamamlayacağım Şimdi pide yerine Örneğin ne koyalım baklava koyalım buraya da geldim baklava dedim Baklavanın açıklamasını ne yapabiliriz e fıstık değil mi cevizi falan da oluyor da fıstık ve şekerle e hazırlanan fıstık Hatta şöyle diyelim fıstık ve şekerle şöyle fıstık virgül şekerle ve ince [Müzik] hamurla yufkayla daha doğru olur ince yufkayla hazırlanan E bir tatlı çeşidi Tamamdır fiyatı 25 değil de örneğin 15l olsun burada da yine sipariş ver yazsın Evet bu şekilde Şimdi burada kaç tane Yemek varsa yukarıdakilerden farklı olarak tabii Onları yapacağız Arkadaşlar ben onları bir yapayım Hemen geleyim videoyu durdurayım Evet arkadaşlar ben buradaki tüm yemekleri artık internetten de biraz baka baka bu şekilde yazdım buraya getirdim yani işte kuru fasulyem pilav bunları videoda yapmıştık Gerçi yaprak sarma içili köftte buradaki yazıları artık bir şekilde doldurdum belki yanlış yazılar olabilir eksik olabilir Zaten amacımız buradaki yemek tariflerinin doğru olması değil Şimdi bunları buraya ekledikten sonra arkadaşlar inşallah yanlış da eklemişim bayağı Baktım ama şimdi kaç tane yemeğimiz var fotoğrafları sayalım 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 burada kaç tane var 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 burada birkaç tane yanlış yapmışız galiba arkadaşlar ya da Şunları da mı Saydım yoksa Faik onları falan Vallah bir bakayım ben şunları bir kontrol edeyim de hani bunlarda yanlışlık olmasın Tamamdır Şimdi doğrusunu yaptım arkadaşlar e şurada popüler yemeklerimiz vardı ya bizim nerede şu popüler yemekler içli köfte İmam balı ve karnı yarı yapmıştık 3 tane daha ekledim ben Beyran çorbası fırında patates ve mevsim Salat olarak 3 tane daha popülere ekledim bu şekilde artık buradaki yemek listesini tamamlamış olduk Şimdi Şuradaki html’ Deek şu sectionlar yine kapatalım Menüyü de kapattım evet bu şekilde e kalacak işlemlerimiz Şimdi arkadaşlar Neyimiz Kaldı E vallahi bir footer mız kaldı Aslında Şuradaki hero’ya Nerede bu Hero yani Şuradaki yapıya bir arka plan rengi ekleyeceğim arka plan resmi daha doğrusu şurada Onu da buldum internetten shiro background diye kaydettim bunu şuraya ekleyeceğim arka plan olarak Ama bunu css’de yaparız Tabii şu anlık kalsın şimdi geldim eee bir footer kaldı dediğim gibi foter da yapalım foter Buna bir de Class verelim footer olsun içerisine bir tane paragraf halinde Ne diyelim 2024 lezzetli yemekler web sitesi Bir de kendi YouTube kanalımı Koyayım şöyle aile görkemli yazılım diyelim buraya da geleyim Target blink yeni sekmede açsın bu şekilde olabilir Tabii bu görkemli yazılımın hemen YouTube’dan linkini [Müzik] alalım buraya geldim şöyle görkemli yazılım dedim hemen buradan geldim kanalın linkini aldım şöyle kanalın linkini aldım buraya yapıştırdım do Tamamdır tıkladığım zaman dost oraya atacak peki Buraya e bakın şurası footer yani karıştırmayın buraya bir de copyright işareti koyalım Bunun için de yine html’de yapabileceğimiz şöyle copy işareti var Bakın şu işaret bunu yapabiliriz arkadaşlar Bu işaretle de FI artık tamamlamış olalım artık buradaki CSS kısımlarını halledeceğiz bir Onlar kaldı Onun dışında yaklaşık 456 dakika oldu hatta 47 47 dakikaya doğru giriyoruz 47 dakikalık uzun bir html içeriği oldu ama güzel de oldu arkadaşlar şimdi bir sonraki bölümde artık CSS kısmına geçiş yapacağız Evet arkadaşlar geldik zurnanın zart dediği yere şimdi CSS kısmın da yazıp Bu web sitemizi de güzelce tamamlayacağız bitireceğiz şimdi İMG klasörünü kapatalım buraya geldim style.css diye bir tane dosya oluşturdum bu Style css’i dahil etmeyi unutmayın Yoksa CSS kodlarınızı mu çalışmıyor mu diye bodyi seçtim ve arka planına kırmızı bir renk ataması yaptım Evet çalışıyor Herhangi bir sorun yok Her şeyi silebilirim Öncelikle reset CSS ile başlayacağım arkadaşlar reset CSS nedir şimdi bizim html’de oluşturduğumuz her bir etiket Örneğin bakın burada H1 burada H1 burada menu item listeli falan var ya burada resim burada buton bunların her birinin html’de daha doğrusu Browser sayesinde oluşturulan bazı CSS özellikleri var buna şöyle sağ tıklayalım seçip incele diyelim bakın buraya gelirsek H1 burada işte Display Block font size 2em margin falan olduğunu görüyorsunuz Ben bunların hepsini sıfırlamak istiyorum yani burada yazan her şey değil de işime yarayacak olan şeyleri tüm elemanlarda yani H1 de resimde inputa Şuradaki a etiketlerinde listelerde resimlerde işime yarayacak her yerde belli başlı özelliklerin sıfırlanmasını istiyorsam Yıldız ile seçim yaparım Yıldız Tüm elemanlar demek yani başlık resim buton yazı paragraf her şey aklınıza gelecek tüm html yapılarını seçecektir bunların hepsini seç marginin sıfırla pingini sıfırla yani dış boşluk ve iç boşluk varsa bunları kapat dediğimde bakın sayfam tamamen boşluksuz bir hale geldi artık aradaki boşlukları ben kendim ayarlayacağım Bunun dışında Bu boşlukları düzgün [Müzik] ayarlayabilmek Bu ne demek Bu aslında biraz uzun bir konu Ama şöyle Kısaca anlatayım Hani çok üstünde durayım ki daha yapacağımız bir sürü şey var Örneğin Burası bir kutu ben buna bir E ne diyelim işte 20 piksel Şöyle 20 pikel margin vermek istiyorsam ne olacaktır veya padding verelim fark etmez Hadi padding olsun peding olduğunda ne olacak bu kutum Örneğin 100 pikel ya 20 pikel verdiğimde bu artık 120 pikel olacak büyüyecek gereksiz bir büyüyecek Ama ben buna bo size Border box Dersem ne yapacak yüzü koruyacak yani 100z olarak kalacak içerisindeki alandan birazcık kısıtlama yapacak yani biraz daha içerisine doğru göçecek bu tarz Hani boyutlandırma işlemlerinde box sizing in önemi büyük Arkadaşlar bunu da tüm elemanlara uygulamak gerekiyor Eğer anlamadıysanız CSS eğitimime bunu detaylıca anlattım yine böyle çize çize oraya bakabilirsiniz Peki tüm elemanları seçip Birkaç işlem uyguladık şimdi bodyi seçelim body bodye bir font Family verelim Bunu internetten de İndirebiliriz Ama ben şöyle Ne vereyim Arel vereyim bir arka plan rengi vereyim şöyle ben bu renkleri daha önceden buldum Arkadaşlar bu arada bir arka plan rengi bir yazı rengi şöyle 333 bunların Nereden buldum Google’a Color Hunt yazın şöyle Color Hunt buraya gidin burada bakın birbiriyle uyumlu bir sürü renk var buradan seçebilirsiniz şu yandaki menüleri kullanarak Örneğin Dark koy Dark temalarda renkler bulabilirsiniz burada popülere tıklayabilirsiniz işte senenin en popüler renkleri bunlarm bu siteye göre Tabii işte tüm zamanların en popülerleri bunlarm buradan birkaç tane renk kendinize bulabilirsiniz Ben video uzun olmasın diye kendime birkaç tane renk buldum onları kullanacağım Şimdi bodye de bir font tanımlaması yaptım yazı tipi bir arka plan ve yazı rengi verdim Şimdi yukarıda header ile başlayalım E bunu daha düzgün yapabilmek için şurada Style var ya bunu tutuyorum şöyle aşağı doğru getiriyorum sayfamın yarısını kaplasın bakın yukarıda header var yani html’ im aşağıda CSS im olacak Tamamdır geldim header mı seçtim arkadaşlar header seçtikten sonra buna da bir arka plan rengi verelim şöyle e365 1D bu şekilde turuncu bir renk verelim Arkadaşlar bu arada yeri gelmişken söyleyeyim Benim mesela renklerde çok sevdiğim bir eklenti var o da şu işe yarıyor Örneğin şu an bu bir turuncu renk Ya bu yazının tamamını turuncuya boyuyor Yani bunun turuncu olduğunu daha net görmüş oluyorsunuz bu eklentiyi de kuralım ismi Color highlights diye bir şey olması lazım şu bu eklentiyi kuralım kapattım bakın tüm Yazım artık turuncuya dönmüş oldu burada hani bu da renkleri daha seçmenizi sağlıyor bana göre Peki Color olarak yazı rengi olarak şöyle beyaz bir şeyler verelim Bunun dışında bir pedding verelim ne olsun yukarıdan aşağıdan 20 piksel soldan sağdan verilmeye gerek yok Bir de yazıları Tex al ile cerl alım ortaya gelsin şimdi Şuradaki başlık ile menüler arasında birazcık boşluğa gerek var header’ altındaki H1 seç margin bottom 10 pikel ver şöyle veya 20 yok 10 piksel iyi aralarında ufak bir boşluk bıraktır alım Peki şimdi Aslında şurada menülerin yanında şu ul tipleri olması gerekiyordu Bunlar dışarıya kaçtı herhalde Ben bunları Her ihtimale karşı navın altındaki uli seçti yapıyorum yani yanında noktalar vardı ya onları kapatmış olalım Aynı zamanda altındaki ulin altındaki seçtim Buna da bir Display ne verelim ğin inl blok verelim arkadaşlar buradaki lerin her birine ve sağdan verelim 20 pel boşluk [Müzik] verelim L blok yaptığım zaman Bunlar yan yana gelir ama arada boşluk olması için şöyle bir margin uygularım peki başka ne verebilirim Şuradaki ağları seçeyim navın altında ulin altında lin altında a’yı seç Color olarak beyaz yapalım Bir de altındaki yazıyı kaldıralım yani çizgiyi kaldıralım bunu da n yapalım text decoration bu şekilde olabilir arkadaşlar Evet menümüz bu şekilde olabilir bunlara bir hover olduğunda navın altında ulin lin altındaki aya hav olduğunda Tex decoration underline yap bu şekilde bir hover özelliği katmış oluruz Tamamdır Şimdi header mızı bitirdik header bu kadar Başka neyimiz var şurada bakın bir searcher ız var yani Burası şimdi buraya etki edelim arkadaşlar burada ben sizlere birbirinden farklı seçim yöntemleri göstermek istiyorum Bunları tek tek göreceğiz Şimdi öncelikle Search konteynerı bir seçelim buna ne diyelim Örneğin maksimum Wi kaç olsun işte 800 pikel olsun değil mi margin olarak neler köşeden verelim Örneğin 30 pikel yukarıdan aşağıdan sağdan soldan oto olsun şöyle Hatta Buradan da şuna bir 40 piksel versem biraz daha fazla olmuş olur buna bir Display Flex vereceğim yan yana gelsin Just Center item cer diyelim şöyle tamamen ortalık bunu olur da taşma olursa rapini wrap yapalım Olmaz ama her ihtimale karşı kendimizi hazırlayalım Şimdi arkadaşlar buradaki şu input kısmına değineceğim yani şurada Yemek ara kısmı var ya bunu seçeceğim ama bunu nasıl seçeceğiz şöyle yapabiliriz Search container altındaki input deyip Ben bunu seçebilirim background Red diyeyim bakın seçtim Ama burada daha farklı bir seçme yöntemi sizlere göstermek istiyorum Hani bunu da bilin mantığıyla anlatıyorum bunu da görün nasıl seçeceğim Şimdi benim burada birden fazla input’ um olsaydı Örneğin bu da ne olsun email olsun bakın ikisini birden seçti Şuna da email diyelim bakın Hem yemek arayı seçti hem email’i seçti ben bunları nasıl ayırabilirim işte kass veririm o klı seçerim ayırabilirim ama bunun dışında bir seçme yöntemi daha var inputa geliyorum yanına şöyle köşeli parantezleri açtım bir tane özellik vereceğim şimdi buradan herhangi bir özelliği al alalım Örneğin type ben buraya gelip type eş text dersem bakın gidip sadece type text olanı seçecek yani yemek arayı seçecektir email’i seçmedi aynı şekil type eş email dersem Bakın bu sefer emaili seçecek Bu şekilde bir seçme olayı da sizlere göstermek istedim buradan type text olanı seçiyorum hani buna gerek yoktu ama dediğim gibi bunu da bilin bunu da görün diye anlattım arkadaşlar Pekala Tabii bu inputa arka plan rengi Red vermeyeceğiz ne yapacağız bir peding verelim 20 pikel Örneğin her taraftan bir verelim 70 yüde olsun şöyle büyük bir alan kaplasın Border radius ne olsun şöyle 30 piksel versem her taraftan çok olur Bunun yerine şöyle ııa 0 Bir de 30 piksel yapsam bakın Sadece sol ve sağ kısmı yani soldaki kısmı yaptılar sol ve sağ derken soldan yukarı ve aşağı kısmı e 30’ar piksel yuvarl attılar sağdakiler duruyor Pekala şimdi başka ne yapalım Border radyus verdik Örneğin bir de Border verelim şu çizgiyi kapatalım değil mi outline da kapatalım Arkadaşlar bir font size verelim Örneğin 18 pikel olsun Biraz büyük olsun Bir de box Shadow verelim sı Örneğin 2 pel Bu da 5 pel olsun şöyle ne verelim Evet bu şekilde verebiliriz veya şunu şöyle de yapabiliriz rgba 00 0.1 Hani bu şekilde de kullanabilirsiniz hangisini kullanmak istiyorsanız o size kalmış Pekala şimdi butonu seçelim Search container altındaki butonu seçtim seçtikten sonra butona bir peding verelim üstten alttan 20 sağdan soldan 30 piksel olsun konteyner ile Hani birleşik olsunlar yani buna da yine box Shadow verelim Yukarıdaki aynısı olsun şöyle Bunun dışında arkadaşlar Buna da falan vermeyelim gerek yok background Color FF 5733 diye bir renk verdim turuncu bir renk b out veriyorum L uçsun gitsin Arkadaşlar bunun dışında Border radius verelim yine 0a 30 pikel 30 pikel 0 diyelim Bu sefer de tam tersi kısmı yuvarlatılmış olsun F si verelim 18 pikel Hani tamamen aynı olsun Color olarak fff verelim Bir de ne verelim C olarak Poter verelim arkadaşlar buna bir hover da ekleyebiliriz şöyle Ne diyelim sech coner altındaki butona hover olunduğunda git background Örneğin f3d yap daha farklı bir renk yapsın Bu şekilde bunu sağlayabiliriz işte bunlara transition falan da verebiliriz Hani geçiş efekti onu da verelim hadi 300s diyorum Bu da 300 milisaniye sonra bu işlemi gerçekleştirecek daha Yumuşak bir geçiş sağlanmış oldu evet süper oldu bence Burası da yazımızı yazalım gayet iyi oldu bence bundan sonra altında neyimiz var şurası yani Burası da neydi arkadaşlar Hero kısmı Peki bu hero’yu e nasıl yapabiliriz bu Hero için şurada bir arka plan ataması yapacaktık şöyle Hero background umuz burada bunu atacağız gelelim hero’yu seçtim hero’yu seçtikten sonra şunu da aşağı indirelim Hero background image arka plana atama yap Nasıl URL ile git emgin altındaki Hero backgroundu buraya Ata Peki arka plan atadık sonra background size Cover olsun bunun dışında Arkadaşlar bir background repeat özelliği vereceğim Gerçi bunun repeat le çok işi yok onun yerine buna position verebiliriz background position Tabii Örneğin Center diyelim buna Evet gayet iyi oldu şimdi küçük durduğuna bakmayın buradaki yazıları büyüttükçe haliyle Bu da büyüyecek Peki bir renk verelim Color fff Onun dışında text align Center diyelim Bir de pedding verelim Örneğin 50 piksel Eee ve 0 piksel az mı oldu 50 değil 100 yapsak çok mu olur Yook Bence 100 gayet iyi oldu arkadaşlar Peki e Şuradaki yapılara değinelim yazılara hero’nun altındaki H1 seç font size ne verelim Örneğin 30 piksel daha büyükmüş olsun 40 40 piksel olabilir Bir de margin Button verelim 20 piksel şöyle arada bir boşluk olsun arkadaşlar paragrafı seçelim hero’nun altındaki paragrafı seç Buna da font size 20 pikel verelim şöyle 25 yok 20 olsun hadi buna da margin bom 30 pikel verebiliriz Arkadaşlar şimdi Şuradaki Class butonu seçelim ve buna bir CSS uygulayalım CL buton Buton ne olur bir Display inl blok olsun Onun dışında şöyle bir background verelim FF 33 şöyle turuncu bir arka plan olsun col fff heading yukarıdan aşağıdan 15 soldan sağdan 30 piksel gayet iyi text decoration yapalım yazının altı çizili gitsin Border radius 4 pikel versem fena değil bir de transition 300 MS All diyelim geçişleri yumuşat alım buna bir hover ekleyelim şöyle butona Power olunduğunda background colorı git ff3 d00 yap yani Çok aman aman bir şey değil şunu değiştirelim bakalım biraz daha şöyle gel bunu çalıştıramadık buton ha Tabii şundan dolayı ben de diyorum niye çok fazla olmadım şurada eski renk kodumuzu geri verelim Neydi o buradan birisiydi Tamam FF 3D Evet bu Fena değil Fena değil Tamamdır heru da yaptık bakın yaptıkça Ne kadar güzel oluyor bir şu alt kısma bakın Bir de şu yukarıya bakın yani CSS gücü inanılmaz toplam bakın 100 CSS yazdık veya yazmadık ama katkı inanılmaz fazla oldu arkadaşlar şimdi şöyle bir şey yapalım Burada şu butonlar var ya sipariş ver butonu bunlara da bir etki edelim bunun için şuradan bir tane section açsak bu order Button gelelim şuraya order Button seçtim Buna da ne verelim dis blok verelim Örneğin margin 0 oto diyelim ortal dansın bulunduğu yerde Bunun dışında margin T 10 pikel verelim yukarıdakine ezmesi için buna bir important verebiliriz arkadaşlar background Color f57 33 rengimizi Buna da tanımlayalım col fff yapalım peding yukarıdan aşağıdan 10 soldan sağdan 20 pikel bir peding verelim gayet ii oldu Tex decoration bunun yok o yüzden onu kaldırmam da gerek yok haliyle Border radius 5 piksel verelim veya 4 verebiliriz fark etmez biraz aşağı ineyim başka başka Border kapatalım n outline şöyle n yapıyorum daha sonra bir de curs Poter ekleyelim buna olunduğunda Yukarıdaki gibi bir işlem uygulayalım bunun için şuraya virgül koydum bir de order buttona hover olunduğunda Aynı işlemi yapsın Tabii buna da bir geçiş ekleyelim transition 300ms ol şöyle Gayet düzgün bir işlem burada gerçekleştirmiş olduk Arkadaşlar şimdi şimdi şimdi geldik buradaki yemekler kısmımı yemeklerde şöyle bir durum olacak bizim neyimiz vardı bakın promotion işte featured bir de menü Bu üçünü de seçelim şöyle gelelim promotion neyimiz var bir de menü bunları seçelim Arkadaşlar şimdi ben siteme belirli bir genişlik vereceğim maksimum Bu da 1200 piksel olacak daha fazlasını istemiyorum margin verelim yukarıdan aşağıdan 20 soldan sağdan Auto olsun Bir de position verelim relative diye Hani bunu da kullanabiliriz şimdi E buradan promotion classlara tek tek verdikten sonra bunların altındaki şunu kopyaladım bunların altındaki H1 H1 ve H 1’i seçiyorum arkadaşlar bunlara da ne verelim margin Button verelim 20 pikel bu ne Hani neye şu an tekabül ediyor Bu şunu söyle silersem Şu an için bir tarafa işlem uygulamadı niye uygulamadı Tabii bunlar H2 ya şöyle H1 kullanmamıştı burada evet Bakın bu aradaki boşluktan bahsediyorum resim ile yazı arasındaki bunları vermediğim zaman bakın bitişik oluyor Tamamdır bunu da verdiğimize göre Arkadaşlar şimdi bakın dikkat edin promotion içerisinde menu items diye bir şey Varın içerisinde menu items diye bir şey var menünün içerisinde menü item diye bir şey var Bunları ben rastgele oluşturmadım tek taşla 3 Kuş vuralım diye oluşturdum şimdi buraya geliyorum menü items diyorum buna vereceğim özellikler Örneğin Display frx justify content Space between vereyim şöyle bu özellikler ne oluyor Arkadaşlar bir de Flex vereyim taşarsam her birine uygulanmış oluyor Ben bunları şöyle büyüte bakın yan yana geliyorlar bunları daha ayarlayacağız Merak etmeyin şöyle koydum Şimdi bu menü items lın içerisinde de her birinde menü item var Bunlar da yine Tabii ki tesadüf değil Dostlar şimdi geldim menü emı seçtim buna bir Wi vereceğim Wii şu şekilde vereceğim calculator fonksiyonunu çağıracağım buraya 33 n33 olacak yüzde ama bundan çıkartacağım Neyi 20 pikseli şimdi buradaki hesap nasıl yapılıyor bunu görelim şimdi bu calculator dediğimiz şey hesaplama Hesap makinesinden geliyor zaten ben ne istiyorum bir satırda 1 2 3 tane resim olsun yani 3 tane yemek olsun istiyorum haliyle Ben bunu yani Şurayı 100lük olarak düşünürsek vitin 3’e bölsem 33.3 33 33 öyle bir şey çıkacak ben bundan 20 çıkartıyorum ki bakın şunu çıkartmaz bunu şöyle direkt 33 versem şöyle bir şey versem bu responsive yapıda ve benim şuradan şöyle büyütürsen benim vereceğim ileride merging ve pedlere göre daha sıkıntılı bir durum olacak Örneğin ben şuna bir peding 20 piksel versem şöyle bir de ne verelim margin mesela 20 verelim bakın direkt açtı Ama şunu Örneğin BIM yapabilirim Hani bu tarz taşmalar da önlemek için ben bunu calculator içerisinde yazıyorum sen git şöyle 33.3 3’ünü al ama bundan bir 20 pikel çıkar diyorum bu şekilde bana genişliği buluyor arkadaşlar Peki şimdi geldim şuna bir arka plan rengi verelim background Color fff bir Border radius verelim 5 piksel bir box Shadow verelim 0a 2 piksel 5 piksele rgba yukarıda vermiştik onun aynısını veriyorum şöyle Bu şekilde bir işlem uyguladım margin Batım 20 piksel Bir de pedding verdik 20 piksel Buna da bir position relative vereceğim arkadaşlar Çünkü bunların bir kısmında yukarıya şöyle popüler tagı hiz [Müzik] alayağmur olduğunda birazcık büyücek Ama şunu 03 yapalım daha küçük büyüsün şimdi resimlerde biraz sıkıntı var Bunu da şöyle menü emın içerisindeki imgi seç Veni % 10000 yap dersem bulunduğu yere tamamen ne olacaktır oturacaktır bir Border radius 5 pikel verelim buna birazcık yuvarlatılmış arasında bir ne olsun Boşluk olsun şöyle 10 piksel verebilirim Tamamdır Şu an gayet işler yolunda gidiyor arkadaşlar imgi seçtikten sonra Şuradaki H3 ve paragrafı da seçelim geldim menü emın içerisindeki H3 seç margin bom 10 pikel uygulam gayet iyi bir de buna menu item altındaki paragrafı da seçip Buna da bir işlem uygulat biliriz arkadaşlar gayet iyi oldu şunları şöyle 15 yapsak 15’te çok mu Bence çok da değil Okey Bence bu şekilde kalabilir şimdi bunları verdikten sonra benim burada bir span vardı ondan önce genel olarak span vara bir etiket uygulayalım menü emın spanın seç Display Block ver font wetin Bolt ver Bir de colorı Green yap Bakın bu tamamen tüm yazıları şöyle şey yapacak arkadaşlar yeşil Ben burada şöyle bir şey istiyorum Benim eski Yazım vardı ya burada yani eski Yazım dediğim şu eski fiyatım bu kırmızı olsun Yeni fiyatım 20 olsun bunu istiyorum o zaman Nasıl yapacağım Bu eski fiyatı Ben delde tutmuştum indiriml ilerde Neredesin del bunu seçelim deli seçtim Ne yapalım Color Red yapalım Bir de E ne yapalım opacity 0.7 yapalım şöyle kalsın Hani bu şekilde eski fiyatı silip yeni fiyatı buraya koymuşuz gibi olsun daha da güzel olacak Şuradaki 15’i 13 falan yapalım birazcık daha yakınlaşınca iyi gidiyoruz şu anlık Şuradaki tagı seçelim tagımız nerede promotion kapat şu popüler yani Şuradaki popüler tagını seçelim geldim tagı seç buna background Color şöyle FF şöyle bir renk uygulayalım fena değil colın F yapalım Ping 5 Pele 10 pikel Border piksel olsun Tamamdır buradaki Color niye etkilenmedi ve bir position Absolute versem buradaki colorı da şöyle bir important yapsam Evet bu şekilde etkilenmiş oldu arkadaşlar bir font size vereyim çok büyük Bu 12 piksel olsun şöyle küçük bir şey olabilir Bir de bunun dışında ttan 0 Ran 0 diyelim bakın şöyle sağ üste gelmiş oldu ama ben biraz daha yukarı çıkmasını istiyorum o yüzden 0 değil de -5 piksele örneğin -5 piksel bu şekilde olabilir hatta ttan -5 değil de -10 bile yapılabilir Bence bu şekilde şunu biraz şey yapalım öyle çok büyük oldu bu şekilde Bence kalabilir arkadaşlar şurada Ben popüler yapılara ayrı bir şey uygulamış mıydım diye bakıyorum da galiba uygulamadım neyse o önemli değil zaten Tasarımın çoğunu bitirdik Arkadaşlar şimdi şöyle bir şey yapalım buradan foter seçelim Bir de fım vardı bizim bakın en altta bunu seçtik background şöyle E36 diye bir renk verelim şöyle ardından fff olsun Tex Center heading yukarıdan aşağıdan 20 Şöyle 20 pik 0 peliz % 10000 olsun bu şekilde olabilir bu da bunun altındaki altındaki a’yı seç F yap Evet bu şek tık da yine YouTube’u açacaktır ben hani ses çıkmasın diye hemen kapatıyorum onu Peki şimdi Aslında yapımızı bitirdik şöyle büyütelim gayet güzel bir site ortaya Bence çıkardık Arkadaşlar bunun responsive yapısını yapalım şöyle sağ tıkla incele diyelim buradan şöyle hle device diyelim bakın küçük telefona falan geldiğimde tasarım bozuluyor Buna da ufaktan bir dokunalım Arkadaşlar bunun için şöyle bir şey yapacağım [Müzik] şöyle buradan geldim bir medya sorgusu yazıyorum Media only screen and Örneğin maksimum işte 400 veya 480 piksele kadar olan cihazlarda menü Yalım menümüz tüm yazıları Center yapalım tamam şurada bir promotion vardı [Müzik] promotion bunların da yazılarını Center yapalım ardından menü ımız vardı ya bunların Wi 9 y yap margin de 15e yap diyelim Bu şekilde arklar y şunu vermesek Bakın bu şekilde yan yana gelecek ama ben buna 90 yüde dediğim için sayfanın 90’ını kaplıyor ben buna 100 dersem bakın sayfanın tamamını kaplayacak Ama ben buna 90 diyorum ki sağdan soldan ufaktan boşluk bıraksın 15’e 0 vererek de bunu tamamen ortalı arkadaşlar Evet telefon içinde gayet güzel bir görüntü elde etmiş olduk büyüttüğümüz bakın büyüyor küçülttüğümde küçülüyor gayet iyi bir Eee tasarım Ortaya çıkartmış olduk Evet son kez kurcalayan bir hatamız var mı indirimli yemeklerimiz burada popüler yemeklerimiz burada popüler etiketler hemen üstünde burada hover özelliklerimiz çalışıyor tüm yemeklerimiz de burada fım da en altta Gayet düzgün bir şekilde gözüküyor Evet arkadaşlar bu projenin de sonuna gelmiş olduk Umarım faydalı bir proje olmuştur sizler için

KAYNAK