malesef olmadı ama
anlatım ile sorunsuz kurdum galiba artık ilk başta node dosyasını biz manuel kuruyoruz sonra tailwindi kurabiliyoruz.
yinede çok teşekkürler.
hocan bunu senden istediyse senin yapman gerekir. tıkandıysan hocana bunu açıkça belirt.
merhabalar öncelikle iki kullanımın arasında bir fark yok.
videodaki arkadaşın kullanım amacı muhtemelen okunaklılığını arttırmak. fakat bu kullanımlar kişiden kişiye değişir.
mesala ben header-menu tercih ederim.
header__menu__class
header_menu_class
headermenu
HEADERMENU
headerMenuClass
...
kullanımlar mevcut.
(son yazdığım kullanım daha çok JavaScript'te kullanılır.
İyi çalışmalar.
@xeyberigideli
Tailwind version: 3.1.6
Node.js version: 18.6.0
Sorunuzda belirttiğiniz "yazı değişiyor" ifadesi yetersiz bir bilgi.
position, font, color v.b özellikleri değişebilir fakat ben size ekranın tam ortasına yerleştirilmiş
ve sorunsuz çalışan bir hover efektli bir a etiketinin kaynak kodunu paylaşayım.
(isterseniz ortaya sabitlemek için kullandığım kodları silip daha sade bir kod alabilirsiniz)
+Ek olarak eğer şuan CSS öğreniyorsanız öğrendikten sonra tailwind css'e bir bakın derim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
height: 100%;
display: grid;
place-items: center;
}
a {
display: inline-flex;
text-decoration: none;
background-color: #3ec785;
color: black;
font-family: sans-serif;
padding-left: 16px;
padding-right: 16px;
height: 48px;
align-items: center;
border-radius: 48px;
font-size: 16px;
}
a:hover {
background-color: #036f3b;
color: white;
transition: 300ms;
}
</style>
</head>
<body>
<div>
<a href="https://www.prototurk.com" target="_blank">Hover Me!</a>
</div>
</body>
</html>
İsterseniz görseli arka plana ekliyip üzerine <button> etiketini ekleyebilirsin yani
background image'a görseli ekliyip butonları margin, padding ve ya display özellikleri ile hizalayabilirsin (görüntü kalitesi bozulabilir)
ve responsive değilse cihaz ekranında bozulmalar yaşanır
Dostum bence projene uygun teknolojileri(kodlama dilleri, yazılımlar v.b.) öğren ve dene. ama mantıksal bir projeyse yani atıyorum
1- A veya B
2- A'yı seçerse C ve 1
3- 1'i seçerse 7, F, G
4- F'yi seçerse B'ye gitsin
5- B yi seçerse 3 ve X...
Eğer buna dayalı ise Algoritma(Bilgisayar Mantığını) güçlendir bunla alaklı kitap oku veya videolar izle, birşeyler yap.
Görsele buton eklemeyi bilmiyorum ama bunu bir web sitesine yükleyeceksen bence testi kendin kodla derim
yani web sitesine
daha detaylı bilgi altta mevcut
.
.
.
.
.
.
.
Eğer yapmak istediğin proje sınav sistemi olan bir web sitesiyse gereken teknolojiler şunlardır:
HTML : Web sitenin temel taşıdır bu olmadan olmaz :D Ücretsiz ders videoları alttadır.
Prototürk HTML Dersleri
CSS : Bu dil web sitelerine renk, tasarım, sanat katar. Eğer yeteri kadar bilirsen gönderdiğin resimin aynısını yapabilirsin.
Prototürk CSS Dersleri
JavaScipt : Bu programlama dili sitene harika bir işlevsellik ve dinamiklik katar ister bu projede ister başka, bunu öğrenmekte büyük fayda var.
Prototürk JS Kampı
PHP : Bu dil kayıt olma ve giriş yapma sistemleri için gereklidir. Eğer kullanıcı kayıt olsun, giriş yapsın sınav sonuçları database(veri merkezi)'ne gitsin gibi düşüncelerin varsa gereklidir
Prototürk PHP Dersleri | Katıla özel yani aylık 10TL ile kanala abone olmalısın
MySQL : Database demişken kullanıcı verilerini depolamak için bir database lazımdır oda MySQL php ile son derece uyumludur.
Yukarıdaki PHP dersinin içinde anlatımı mevcuttur.
NOT: Web site güvenliğinide araştır derim ardından Hosting, Domain falan
Hala kafana takılan varsa sorabilirsin istersen temel kod örneği paylaşabilirim.
Hmmm bunu bende bilmiyordum. başarılar :D