HTML, CSS ve JavaScript ile Adım Adım Responsive Web Site Yapımı | ScrollReveal.js Kütüphanesi
HTML-код
- Опубликовано: 7 фев 2025
- Merhaba Kod Severler, videonun içeriği uzun olduğu için ilgili alanları daha kolay bulmanız amacıyla bölümlerin zamanlarını aşağıda belirttim.
Header Bölümü : 04.20 - 39.50
About Bölümü : 40.44 - 01.00.35
Portfolio Bölümü : 01.00.35 - 01.13.14
Menu Bölümü : 01.13.14 - 01.15.04
Contact Bölümü : 01.15.04 - 01.28.38
Footer Bölümü : 01.28.38 - 01.41.20
Responsive Yapımı : 01.41.20 - 02.07.13
ScrollReveal.js Kütüphanesi : 02.07.13 - 02.19.08
İlgili sitelerin linkleri :
scrollrevealjs...
www.npmjs.com
unsplash.com
fontawesome.com
Merhabalar, iconlara kadar her şeyi eksiksiz yapmama rağmen iconlardan yüzünden ilerleyemiyorum. Seçtiğim iconlar yerine boş kutu çıkıyor. Ne yapmam gerekiyor acaba ?
Merhaba,
iconlar sürekli güncellendiği için aynı iconları kullanmak zorunda değilsin aslında. Onun yerine farklı iconlar seçebilirsin. Ama iconları hangi siteden alacağına bağlı bu durum. Eğer font awesome'dan almak istiyorsan cdn js e girmen gerekiyor( Senin için link bırakıyorum cdnjs.com => buraya direk font awesome şeklinde aratarak link etiketi içerisinde html sayfana dahil edebilirsin. Head tagları içerisinde :)
Ayrıca kullanabileceğin birkaç site de bırakıyorum.
1. boxicons.com
2. ionic.io/ionicons
3. mui.com/material-ui/material-icons/
4. fontawesome.com
Ve tabii ki de google üzerinden de iconlar araştırabilirsin. Mesela bazı tasarımcılar figmada kendi tasarladığı ve hep kullanılan iconları ücretsiz indirmeni sağlıyor. Tabi ilk olarak figmaya üye olman gerekiyor ve figma ücretsiz. Figmadan hem svg hem de png formatında indirmene izin veriyor.
Ama dediğim gibi kullandığın eklentinin güncelliğini takip etmeni öneririm. Eğer örnek için yapıyorsan ona benzer iconlar kullabilirsin. Umarım yardımcı olabilmişimdir :)
Bu linki direk head tagları içerisine koyarsan artık iconları projene dahil edebilirsin. Tabi bu video geçen sene çekildiği için fontawesome.com bu siteye girip yeni iconlar almanı tavsiye ederim :)
@@YldzDikme Çok teşekkür ederim sayenizde sorunumu çözdüm :')
@@akhanatoon Çok sevindim :)
@@YldzDikme Bende de aynı sorunlar oluştu yukarıda bahsettiğiniz her şeyi uyguladım ama hala kutucuklar var.sanırım kütüphaneyi okumuyor head taglerinin içerisine yazmama rağmen,sorunla ilgili yeni bir şey fark ettim eğer html dosyamı style.css dosyam olmadan çalıştırırsam iconlar görünüyor ama css dosyamla birlikte çalıştırdığımda görünmüyor.
Gerçekten çok teşekkür ederim inanılmaz faydalı olmuş. Bir sürü yeni şey öğrendim sayenizde. Sadece ufak bir geri bildirim verecek olursam ekran boyutu biraz ufak kalmış, monitörün içine girdim birkaç defa. Onun dışında gerçekten yararlı olmuş dediğim gibi videolarınızın devamını bekliyorum.
Çok güzel anlatım olmuş, sayenizde bilmediğim birçok şey öğrendim. Takipteyim videoların devamının gelmesi dileğiyle
35 Yasimda frontend devolopment a merak sali[ yaklasik 1 aydir bu tarz videolar ilek kendimi sizin sayenizde egitiyorum.Gercekten cok basarili tertemiz anlatim ve cok sey kattiniz bana .Tesekkurler
Kendi görsellerim ve sizin öğrettiğiniz dinamikleştirme ile sayfamı oluşturdum. Teşekkür etmek için yorum yapmak istedim. Sorun yaşamadan hazır hale getirdim. Başarılarının devamını diliyorum =)
varsa kodları atabilir misin
tek kelimeyle harikaydı ben çoğu şeyi not aldım, güzel ve açıklayıcı bir şekilde anlatmışsınız sizi bu nedenle tebrik ediyorum. açıklama kısmına linkleri de eklemişsiniz bu benim çok hoşuma gitti söylemeden geçmek istemedim. Başarılarınızın devamını diliyorum :)) iyi çalışmalar..
Emeğiniz için teşekkürler. Açık ve anlaşılır bir dil ile anlatmışsınız. hiç sıkılmadan izledim👏👏👏
teşekkür ederim çok yardımcı oldunuz.Böyle videolar gelirse çok sevinirim,kanalınızı izlemedeyim 👍👍👍👍👍
Süper bir video olmuş👍👍👍. Devamını bekleriz
Elinize emeğinize sağlık. Çok faydalı bir içerik olmuş özellikle yeni başlayanlar için oldukça verimli bir proje. Küçük bir eleştirim olacak nacizane kendi fikrim tabi. Video, oldukça küçük görünüyor bazen bazı kodları seçmekte oldukça zorlandım. Ekran kaydı programınızı değiştirebilirseniz çok daha efsane içerikler oluşabilir. Başarılarınızın devamını dilerim sevgiler.
Hocam videoyu tek kelimeyle anlatmak gerekirse mukemmel otesi, gercekten cok sey ogrendim sayenizde cok mukemmel anlatiminiz var
cok cok cok coktesekkur ederim
Emekleriniz için çok teşekkür ederim Yııldız Hanım.
Teşekürler baya baya efsane birşey oldu bu tasarim teşekurler bence devam etmeli böyle seri kaliteli video fazla bulmak olmuyor böylesin.
Çok güzel video olmuş, helal olsun! Hemcins meslektaşlarımı görünce de bir ayrı mutlu oluyorum 🥰
Başarılarınızın devamını dilerim 💜
kesinlikle katılıyorum :)
Yıldız çok teşekkürler, videondan yararlanarak çok güzel bir landing page tasarladım. Javascripte daha çok yer verdiğin videoları da heyecanla bekliyorum.
Kadınların web tasarım konusundaki hakimiyetlerine hayranım ya ağzına sağlık.
RUclips'un en underrated sayfası olabilir. İnanılmaz iyi içerikler var fakat beğeni ve abone sayısı hakettiğinin altında
Cok güzel bir video olmus. Devamini bekleriz.
ellerinize saglik , cok guzel oldu , gercekten cok yardimci oldu ve cok sey oyrendim
Mükemmel bir kaynak emeğiniz için çok teşekkürler Yıldız hanım...
Gerçekten çok teşekkür ederim inanılmaz faydalı olmuş.
YARARLI ELLERİNİZE SAĞLIK
o kadar harika anlatmıssınız kiii. elinize emeğinize sağlık
çok şey öğrendim sizden güzel olmuş ayrıca elinize sağlık.
Gerçekten çok güzel anlatıyorsunuz 2 saat boyunca sıkılmadan sizi dinledim
cok yardimci oldun ellerine saglik saatlardi ugrasiyorum hamburger menuyu bir turlu yapamiyordum.sonunda yapdim tesekkurler
hocam gerçekten çok teşekkür ederim keşke serinin devamı gelebilse emeğinize elinize sağlık
Gerçekten emeğinize sağlık,çok iyi olduuu
Harika bir eğitim olmuş, eline sağlık 🤗
baya açıklayıcı ve net bir video olmuş herhangi bir kalan yer yok ellerinize sağlık "hello word"
Merhabalar, emeğinize sağlık çok çok başarılı bir video olmuş.👍🏻
Cok güzel yaptiniz emeginize saglik. Darisi basima diyelim.
anlatimi ve aciklamalari cok faydali tesekkurler
elinize sağlık gerçekten öğretici
Border la yapılan logo çok yaratıcı olmuş gerçekten çok hoşuma gitti. basit ama çok etkili. :) videolarda çok eğitici keşke devamı gelse.
dosyalara ulaşa biliyormusunuz siz acaba
çok güzel olmuş site tebrikler
bacım teşekkürler devamı gelsin böyle videoların faydalı işler bunlar, yalnız lütfen ekranı biraz büyük tut çok küçük çözünürlükle almışsın videoyu
Harika bir dersti çok teşekkürler. Videonun çözünürlüğünden dolayı gözleri biraz zorladım :) Bir de fotoğrafları paylaşabilseydiniz çok daha iyi olurdu zaman kaybetmezdik. Videoların devamını bekliyoruz 🙃
2:04:20 tablet ve telefon moduna geçince alttan cıkan transition ve transform iptal olması gerek bence. telefonda mouse ile üzerine gelme durumu olmayacagından gereksiz..
2:19:00 mobilde contact lar alttan üstten değilde sağdan soldan gelse daha iyi olur.
ama site genel olarak güzel. eline saglık.
Abla daha sadece 5 dk sını izledim cidden cok guzel şeyler ogrencegime eminim
harikaydı. tesekkürler
Merhaba ,sizden güzel şeyler öğreniyorum , elinize emeğinize sağlık, çok teşekkür ederim. Tek bir isteğim olurdu githup ta yada burada kullandığınız resimleri dosya olarak paylaşsaydınız çok iyi olurdu.
sayfanın tasarımı gerçekten çok güzel olmuş resimler falan çok güzel
merhaba 1.10:44 'te 8 li resim üzerinde yaptığınız gibi yapıyorum ama ikonlarım çıkmıyor sadece kare kutu çıkıyor yardımcı olabilirmisiniz?(halletim)
Elinize sağlık, çok yaralı olmuş. Acaba açıklama kısmındaki zamanları düzeltebilir misiniz? İki nokta yerine nokta koymuşsunuz da
Yıldız Hanım merhaba elinize emeğinize sağlık çok faydalı oldu fakat; ekran boyutu çok küçük çok zorlanılıyor okurken. Bir dahakine ekranı büyük tutarsanız çok daha iyi olacağını düşünüyorum. Bir sonraki çalışmalarınızı merakla bekliyorum
Merhaba guzel bir calisma, cok tesekkur ederim bir sorum olacak coffe resmini dediginiz gibi kodlari aynen yazdim ama hala sadece header kisminda duruyor asla tum sayfayi kaplamiyor, sorun ne olabilir ?
cox guzel ve basa dusulen tesekurler
merhaba 1:54:27 de içine yazdığımız etiketler bende çalışmıyor. İkona basma işlemi gerçekleşmiyor her şey çıkıyor ama kapat aç yapamıyorum menü barını. Acaba menuItems ismini aynı versem sıkıntı olmaz herhalde demiştiniz isimden mi sıkıntı yaşıyorum yoksa başka nasıl çözebilirim :(
Çok güzel ve yararlı video emeğinize sağlık , videonun boyutu biraz küçük olmuş okumakta zorlandım açıkcası kodları paylaşma imkanınız var mı aceba ? sevgilerle.
Başarılı bir video olmuş keşke incelememiz için kaynak kodlarını verseydiniz.
Emekleriniz icin tesekkur ederim. Fakat bizim de ayni siteyi yaratmamiz icin gerekli olan gorselleri bizlerle paylasmamissiniz paylasma sansiniz var mi?
Teşekkürler
Ne olur her hafta bi video yukle sen güzel anlatıyorsun iyi öğreniyordum
Anlamadigim sey background imageyi neden header e verdiniz body de olmasi gerekmiyor mu
Emeğinize sağlık keşke site kodlarını da bizimle paylaşsaydınız. Paylaşırsanız çok memnun oluruz
Yıldız hanım kodları yükleyecek misiniz acaba? Bazı yerlerde yanlışım olduğundan dolayı nerede olduğunu sürekli bakamıyorum . Yardımcı olur musunuz? Teşekkürler şimdiden.
Merhabalar ekrandaki kahve fotografı küçük küçük arkası beyaz olan fotoğrafı nerden buldunuz acaba ?
Contact kısmı sizinki gibi bir satırda olmadı ,bir kolon şeklinde oldu çözümü nedir
Beyler rez alın hatun harbi harbi CSS öğretiyor👏👏💥 bu arada frontend ci kızlar genelde güzel olur ne hikmetse😅
Margin ve padding etiketini sizin gibi yapmama rağmen kod çalışmadı yazılar sayfanın sol tarafına yapışık duruyo napmam lazım
1:04:00 display: flex; yaptığımda benim fotoğraflarım yanyana gelmedi
Merhaba Yıldız Hanım,
Öncelikle elinize sağlık, oldukça faydalı bir içerik hazırlamışsınız, teşekkürler. Bir sorum olacaktı, sizinle birlikte aynı yapıda bir sayfa oluşturdum ancak site içi örneğin anasayfadayken sağ üstteki discover ya da contact kısmına tıklayınca aşağıdaki ilgili kısma nasıl geçiş yapabileceğimi bulamıyorum. Pekçok video izledim site içi html bağlantısı hakkında ancak sizin yapmış olduğunuz şekilde aşağı doğru akan bir web sayfası örneği bulamadığımdan sorunu çözemedim. Yardımcı olursanız çok sevinirim.
Merhaba sorunuza başka yerlerde cevap bulamadıysanız diye yazıyorum.. HTML 'de oluşturduğunuz section'lara (section id="about") verdiğiniz id'leri a etiketinin href'ine yazmalısınız.(
Merhabalar,
en sonda yaptığınız scrollreveal bende çalışmadı scriptini ekledim classları verdim scriptini yazdım ama bir türlü siteye entegre edemedim .Yardımcı olursanz sevinirim
mrhb yildız hanim emeginize sağlık cook güzel olmuş mert can Akdoğan arkadşın durumun nun aynı sını bende karşılaştım font awesame deki linki head tağların içine atmama rağmen kutu şeklinde cıktı ne yapmalıyim
Yine çok faydalı bir video olmuş. Teşekkürler Yıldız Hanım.
Pov: Birazcık Javascrfipt öğrenmeye gelmişsindir ama javascript yoktur
2 şeyi unutmussunuz yada bilerek yapmadınız bilmiyorumda birincisi navbarı sayfa basına sabıtlemıssınız 2. ise bootstrap mantıgıyla bir site yapıyorsak eğer scroolspy özelliginide kullanmamız gerekiyor dedıgım gıbı neden yapmadıgınızı bılmıyorum belkıde kendınız bılerek yapmadınız ama geri kalan kısmı cok guzel ve acıklayıcı bır sekılde anlatmısınız elınıze emegınıze saglık
hocam bu iconlar bende de sorun çkardı portfolio bölümündeki nasıl halledebilirim herşey eksiksiz yapılı
Yıldız çok teşekkürler yine çok basarılı bi video. Video kodlarını githuba yükleyip bizimle paylaşmayı düşünmez miydin
Videoyu beğenmenize çok sevindim, teşekkür ederim. Bu videolar eski projelerim olduğu için kaynak kodları bulamıyorum. Bundan sonraki yükleyeceğim videoların kaynak kodlarını github hesabımda paylaşacağım ve bu konuya daha çok dikkat edeceğim.
abla bunun kodunu atarmısın
merhaba videoda kullandığınız iconlar sanırım video geçen yıl çekildiği için güncelleme yemiş kullandığın iconların şu an güncel halini nerden bulabilirim yeni aldığım bir projeyi yapmak için soruyorum ve sürekli açık kaynak kodlardan güncellemem mi gerekiyor yayınladıktan sonra projeyi teşekkürler şimdiden hocam emeğinize sağlık
all.css için yol belirtme olayı bende olmadı yardımcı olabilecek var mı ?
Kodlarınızı okumak çok zor. Maalesef bu yüzden devam edemedim . Emeğiniz için teşekkürler..
merhabalar header kısmındaki butona uyguladığım after özelliği çalışmıyor kodlara sizden kontrol ettim hepsi doğru ne yapmalıyım??
Merhabalar ben kodları doğru yazmama rağmen ilkinde after ikinci olarak da hover kodlarım çalışmıyor maalesef. Efektleri aktif edemiyorum sizce neden olabilir?
hocam merhablar iyi günler dilerim resimlerin linkini atarmısnız drvie olarak rica etsem
bazı yerleri biraz daha acıklayıcı anlatsaydın daha iyi olurdu ama yiende teşekurler
slm hocam
Dizi örüntusu nasıl yapılır
dizi = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16 ]
yukardaki dizi referans alarak dizinin newDizi = [ 1, 4, 8, 12, 16 ] ci elemanlarını başka bir dizi ye nasıl aktarırım.
yada nasıl bir if kullanmalıyımki 1,4,8,12,16 ci elemanlarını ayıklasın yada yeni bir diziye aktarsın.
Merhaba hocam. Sayfa içi bağlantısında istediğimiz alana direk iniyor bu işlemi nasıl yavaşlatabiliriz. Şöyle anlatayım head kısmında bulunan hakkımda kısmını sayfa içerisindeki alana yönelttim. Ve bu işlemi yapınca direk iniyor. Ben slider şeklinde inmesini istiyorum. JavaScript kodu mu yazmam gerekiyor.
Fas fa efektleri Web sitesinde kare olarak gözüküyor sorunu çözemedim head etiketi içerisinde dosyanın konumunuda belirttim fakat bir türlü düzeltemem bu sorunu nasıl çözebilirim
Aynı sorun bendede var anlamadım bir türlü
css sayfasındaki *not::after daki font family kısmını çıkarıp aşağıdaki gibi düzenlediğiniz takdirde sorun çözülecektir.
*:not([class^="fa"]) {
font-family: 'Poppins', sans-serif !important;
}
@@ozgurdenizguler4507 *:not([class^="fa"]) {
font-family: 'Poppins','Herr Von Muellerhoff' sans-serif !important;
} bilgilendirme için teşekkürler, diğer yazı tipini de eklemeliyiz.
@@nadirekasap4283 rica ederim ekleme için teşekkürler iyi çalışmalarr :))
@@ozgurdenizguler4507 yorumunu okudum şimdi 1 saattir üzerinde uğraşıyordum çok teşekkür ederim, ek olarak scrollreveal kodlarında da sıkıntı yaşıyorum. o 8 tane fotoğrafta geç yüklenme oldu fakat diğerlerinde sağdan soldan gelme olayını yapamadım. bu konuda bir fikriniz var mı ?
Merhabalar,
XXXX COFFEE başlıklı H2 baslık attım sitemin sol ust sayfasına, XXXX degerimi alt cızgılı kırmızı, COFFEE yazımı da yeşil renkli yaptım, fakat yesil renkle yazdıgım başlık yazısını daha ufak yapmak istiyorum ve altından da kırmızı aalt cızgı dewam etmesini istiyorum.. Nasıl yapabilirim yardımcı olur musunuz? Tesekurler
Merhaba hazır kodları alabilme şansım var mı ?
elinize sağlık, drivedan dosyaları paylaşabilir misnz :) iyi kodlamalar
Selamm. Bu videoyu ixleyerek aynisini yaptim bionluk gibi sitelerde satabilit miyim sizce buna benzer bi web sitesi yaparak ?
iletişim kısmına tıkladığında sayfayı aşa indircek kod ne peki
Teşekkürler ama bunda Javascript kodu göremedim?
Bir şey sorabilir miyim ? normalde yazdığım html css kodlarına chromedan açıp baktığımda sitelerde kasma olmaz ama bu sitede kasma ve donma oluyor neyden kaynaklı olabilir acaba ?
Nedeni görsellerin boyutudur. Yüksek pixelli görseller sitede kasmaya yol açar. Bu yüzden görseller sıkıştırılarak kullanılır veya daha az yer kaplayan svg dosyaları kullanılır.
imagecompressor.com bu tarz siteler kullanabilirsiniz görsellerinizi sıkıştırmak için.
elinize saglık güzel olmus. baştan sona 1 yonetım panelli giyim sitesi parakende veya toptan satıs olarak yapabılırmısınız ?
Pıroje aldım visuel stüdyo code de giyim sitesi yapma djjxbxbx hiç kimse yapmamış artık bunu yapicam fotoları değiştiricem
hocam mvc ile ilgili e ticaret sitesi yapabilirmisiniz.
merhabalar. bu localhostta yapılan bı şey. Dinamik bir web sayfayı yada google den arattıgımız zaman bu yaptıgımız sayfa çıkacak mı ?
filezilla ile servera atıp hosting alıp domain alırsan aratınca cikar
biz okumayalım diye mi ekranı küçük yaptınız
kaynak dosyalarını paylaşabilir misiniz ?
ya şu siteleri oluşturup yapıyoruz peki neden link telden girince açılmıyor sadece oluşturduğum bilgisayarda açılıyor
Çünkü bilgisayarda localhostta çalışıyorsunuz. Bunu telefonda da gösterebilmek için sunucuya atmanız gerekiyor.
@@YldzDikme iki şey sorcam ben yeni başladım bu yüzden pek bilmiypm localhost ne demek ve sunucuya nasıl atabilirim
Lütfen yardım eder misiniz bir sürü video izledim hiçbirinde notepadde yapabilceğimm bi seçenek yoktu
@@YldzDikme yıldız kolay gelsin . Bu videodaki bilgiler en azından iş başvurusuna bulunmak için yeterli midir? Yoksa bir eğitim almak şart mı?
Çok güzel ama fotoğraflar yok nasıl yapabilirim
merhabalar.bende bu cockie ve coffe iconlari cikmiyor neden acaba?
çözebildiniz mi bende de aynı sorun mevcutta?
Aynı sorun bende de var ya çözüm bulan var mı
@@fatossahin607 başka icon deneyin bazen kabul etmiyor
opacity artır
yeni klasörü nasıl eklediniz
benimkinde resim gelmiyor
Visual studioya alışık değilim vim kullanıyordum hep kodları 3 kez silip geri yazdım
kaçtane css kullandınız