Vibe coding'de ne seviyedesiniz?

Ben baya bağımlısı oldum bu işin, uğraşırken müthiş keyif alıyorum, daha önce öğrenemediğim birçok şeyi vibe coding sayesinde öğrendim, yapay zekanın bana verdiği her kodu öğrenmeye çalışarak ilerliyorum. Siz ne durumdasınız, neler yaptınız bugüne kadar? Forumda 1-2 günde bile çok harika işler yapanlar var. Çocukları 10 yaşında bu işe başlatmak lazım diye düşünüyorum, hem sıkılmazlar, hem düşünmeyi öğrenirler, hem de birşeyler üretmenin tadına ufak yaşta varıp, coder olmasalar bile, faydalı insan olabilirler.

Hocam ben de başlamak istiyorum da hangi araçları kullanıyorsunuz nasıl yapıyorsunuz acaba? Detaylı bilgi verir misiniz

Hocam size bir başlangıç cümlesi veriyorum örnek olarak, siz de alın bunu yapay zekaya kopyalayın, daha sonra verdiği kodu çalıştırıp inceleyerek, nereleri revize etmek istediğinizi anlatın, adım adım ilerleyin, her verdiği kodu başlangıçta anlamasınız da muhakkak bir kez okuyun göz gezdirin, böylece bir süre sonra aklınızda kalır. Ben chatgpt ve grok kullanıyorum, cursor isimli bir program var, onu daha sonra kullanmanızı öneririm. Eğer bilgisayar programı yazmak istiyorsanız "pycharm" isimli programı kullanın, yapay zekanın verdiği kodları yapıştırıp nasıl gözüktüğüne bakarsınız, programı yazdıktan sonra nasıl "exe" hale getiririm diye sorun, nasıl imza eklerim anlat deyin, hepsini size bir bir anlatacaktır.

web sitesi için
"Kendimi, hizmetlerimi veya projelerimi tanıtmak amacıyla sade, şık ve kullanıcı dostu bir tasarıma sahip, mobil uyumlu ve hızlı yüklenen tek sayfalık bir web sitesi yaptırmak istiyorum; bu sayfada ana başlıklar halinde Hakkımda, Hizmetler, Referanslar ve İletişim gibi bölümlerin yer almasını, ziyaretçilerin kolayca gezinebilmesi için yukarıdan aşağıya akıcı bir geçişle düzenlenmesini, ayrıca sosyal medya bağlantılarımın görünür bir şekilde yer almasını, SEO uyumlu yapısıyla Google’da bulunabilir olmasını ve gerektiğinde içerik güncelleyebileceğim basit bir yapıya sahip olmasını tercih ediyorum."


bilgisayar programı için
"Tkinter ile basit bir yapılacaklar listesi uygulaması geliştirirken, kullanıcıdan metin girişi almak için Entry widget’ını, liste elemanlarını göstermek için Listbox öğesini, görev eklemek ve silmek için Button bileşenlerini kullanmalı, butonlara tıklanma olaylarını command parametresiyle bağlamalı, görevlerin eklenip kaldırılmasını sağlayan işlevleri tanımlamalı, arayüz düzenini pack, grid ya da place ile yönetmeli, pencereyi başlatmak için Tk() nesnesini oluşturmalı, uygulamanın çalışmasını mainloop() ile sürekli hale getirmeli ve kodun tekrar kullanılabilir olması için işlevleri modüler yapıda yazmalısın. "

@FedaiMaskeli; hocam bir de şu terimleri bilirseniz çok rahat kendi web sitenizi yaparsınız.

• HTML – Web sayfalarının yapısını belirleyen işaretleme dilidir. Web sayfasının iskeletini oluşturur.
• CSS – Web sayfalarının stilini (renk, yazı tipi, düzen) tanımlayan stil dilidir.
• JavaScript – Dinamik ve etkileşimli özellikler eklemek için kullanılan programlama dilidir.
• PHP – Sunucu tarafında çalışan, dinamik web sayfaları oluşturmak için kullanılan bir programlama dilidir.
• MySQL – İlişkisel veritabanı yönetim sistemi. Web uygulamalarında verileri saklamak için kullanılır.
• Buton – Kullanıcı etkileşimi sağlayan öğe; tıklama eylemi için kullanılır.
• Grid – Sayfa düzeni için kullanılan, satır ve sütunlardan oluşan yapıdır. Web tasarımında düzenli bir yerleşim sağlar.
• Flexbox – CSS ile öğeleri yatay ve dikey olarak esnek bir şekilde hizalamaya yarayan bir düzen modelidir.
• Container – İçeriklerin düzenlendiği, genellikle sınırlı genişlikte olan HTML elemanıdır.
• Section – Sayfanın farklı bölümlerini tanımlayan HTML etiketidir. Bölümleri mantıklı bir şekilde ayırmaya yardımcı olur.
• Header – Sayfanın üst kısmı, genellikle logo ve navigasyon menüsünü içerir.
• Footer – Sayfanın alt kısmı, genellikle telif hakkı bilgileri, iletişim bilgileri vb. içerir.
• Navbar – Sayfanın üst kısmındaki menü barıdır. Kullanıcıların farklı sayfalara geçmesini sağlar.
• Menu – Sayfa içindeki gezinmeyi sağlayan, genellikle bağlantılardan oluşan bir öğedir.
• Sidebar – Sayfanın sağında veya solunda bulunan, ek içerik ve bağlantılar sunan paneldir.
• Logo – Web sitesinin kimliğini temsil eden görsel öğedir.
• Hero alanı – Sayfanın üst kısmındaki büyük görsel veya video alanıdır, genellikle dikkat çekici bir başlık içerir.
• Banner – Sayfanın üst kısmına veya yanlarına yerleştirilen reklam veya duyuru alanıdır.
• Slider – Resim veya içeriklerin geçiş yaptığı dinamik alanlardır.
• Card – İçeriklerin kutu şeklinde düzenlendiği HTML öğesidir, genellikle görsel ve metin içerir.
• Modal – Kullanıcı etkileşimi için açılan, ekranın üzerine gelen küçük pencere.
• Tooltip – Üzerine gelindiğinde açıklama gösteren küçük bilgi kutularıdır.
• Icon – Genellikle küçük, anlaşılır semboller olarak kullanılan grafik öğelerdir.
• Link – Web sayfasına yönlendirme sağlayan tıklanabilir öğedir.
• Anchor – Bağlantıları tanımlayan HTML etiketi. Sayfa içinde başka bir yere atlamayı sağlar.
• Form – Kullanıcıdan veri almak için kullanılan HTML yapısıdır.
• Input – Kullanıcının veri girişi yapabilmesi için kullanılan form elemanıdır.
• Textarea – Çok satırlı metin girişi yapılabilen form elemanıdır.
• Label – Form elemanlarını tanımlayan etiketlerdir.
• Checkbox – Kullanıcıların bir veya daha fazla seçeneği işaretlemesine olanak tanır.
• Radio button – Bir grup seçeneğinden yalnızca birini seçmeye yarayan form elemanıdır.
• Select – Bir grup seçenekten yalnızca birini seçmeye yarayan form elemanıdır.
• Dropdown – Seçim yapmayı sağlayan açılır menüdür.
• Submit – Formun gönderilmesi için kullanılan butondur.
• Reset – Formdaki tüm alanları sıfırlayan butondur.
• Table – Verilerin düzenli bir şekilde sunulmasını sağlayan HTML öğesidir.
• Row – Tablo içerisindeki yatay satırdır.
• Column – Tablo içerisindeki dikey sütundur.
• Pagination – Sayfalama işlemi; uzun içeriklerin sayfalara ayrılmasını sağlar.
• Search bar – Kullanıcının içerik araması yapabilmesi için sunulan alan.
• Login – Kullanıcının sisteme giriş yapabilmesi için gerekli işlem.
• Register – Kullanıcının yeni bir hesap oluşturmasına olanak tanıyan işlem.
• Session – Kullanıcı oturumunu yönetmek için sunucuda saklanan veri.
• Cookie – Tarayıcıda kullanıcı bilgilerini saklamak için kullanılan küçük veri dosyası.
• Database – Verilerin düzenli bir şekilde saklandığı yerdir. Genellikle MySQL veya PostgreSQL kullanılır.
• Query – Veritabanı üzerinde veri sorgulamak için yazılan komutlardır.
• CRUD – Veritabanı işlemleri: Create (oluşturma), Read (okuma), Update (güncelleme), Delete (silme).
• Backend – Web uygulamalarında sunucuda çalışan, veritabanı ile etkileşime giren kısmıdır.
• Frontend – Kullanıcı ile etkileşimde olan, görsel tasarım ve kullanıcı deneyimi sunan kısmıdır.
• Framework – Web geliştirmeyi hızlandıran ve organize eden yazılım yapılarıdır (örn. Laravel, React).
• CMS – İçerik Yönetim Sistemi; web sitelerinin içeriğini kolayca yönetmeye yarayan sistemlerdir (örn. WordPress).
• SEO – Arama Motoru Optimizasyonu; web sitesinin arama motorlarında üst sıralarda yer almasını sağlamak için yapılan işlemler.
• Responsive – Web tasarımının farklı cihazlarda (telefon, tablet, masaüstü) uyumlu şekilde görünmesini sağlama.
• Mobile-first – Web tasarımında ilk olarak mobil cihazlara uyum sağlamak, sonra masaüstü cihazlar için optimize etmek.
• Media query – CSS özelliği, farklı ekran boyutlarına göre stil uygulamaya yarar.
• Breakpoint – Sayfanın belirli bir boyuta ulaşınca tasarımda değişiklik yapmak için kullanılan CSS özelliği.
• Margin – Bir öğenin etrafındaki boşluk, dış kenar boşluğudur.
• Padding – Bir öğenin içeriği ile kenarları arasındaki boşluktur.
• Border – Bir öğenin etrafını çevreleyen çizgidir.
• Shadow – Öğeye eklenen gölge efekti.
• Hover – Kullanıcı bir öğe üzerine geldiğinde gerçekleşen etkileşim.
• Active – Kullanıcı öğeye tıkladığında veya seçtiğinde gerçekleşen stil değişikliği.
• Focus – Bir öğe üzerine odaklanıldığında uygulanan stil.
• Z-index – Öğelerin yığılma sırasını belirleyen CSS özelliği.
• Overflow – Bir öğenin içeriği, belirlenen alana sığmazsa nasıl davranacağını belirleyen CSS özelliği.
• Position – Öğelerin sayfa üzerindeki konumunu belirleyen CSS özelliği.
• Relative – Bir öğenin normal akışına göre konumlandırılmasını sağlar.
• Absolute – Öğenin, en yakın konumlandırılmış ebeveynine göre konumlanmasını sağlar.
• Fixed – Öğenin sayfa kaydırıldığında sabit kalmasını sağlar.
• Sticky – Öğenin, kaydırma işlemiyle belirli bir noktaya kadar hareket etmesini sağlar, sonra sabit kalır.
• Width – Bir öğenin genişliğini belirleyen CSS özelliği.
• Height – Bir öğenin yüksekliğini belirleyen CSS özelliği.
• Max-width – Öğenin maksimum genişliğini belirleyen CSS özelliği.
• Min-height – Öğenin minimum yüksekliğini belirleyen CSS özelliği.
• Display – Öğenin nasıl görüneceğini belirleyen CSS özelliği (blok, satır içi, gizli vb.).
• Block – Öğenin tam genişlikte, bir satırda görünüp, altına bir boşluk bırakmasını sağlar.
• Inline – Öğenin sadece içeriği kadar yer kaplamasını sağlar.
• None – Öğeyi gizler.
• Visibility – Öğenin görünürlüğünü kontrol eder, hidden ile öğe gizlenir ama alanı korunur.
• Background – Bir öğenin arka plan rengini veya resmini belirler.
• Color – Öğenin metin rengini belirler.
• Font-size – Metnin boyutunu ayarlayan CSS özelliği.
• Font-family – Metnin yazı tipini belirler.
• Text-align – Metnin hizalanma biçimini (sağ, sol, ortada) belirler.
• Line-height – Satır yüksekliğini belirler, satır arasındaki boşluğu ayarlar.
• Letter-spacing – Karakterler arasındaki mesafeyi ayarlar.
• Transition – Öğeler arasındaki geçişleri yumuşatır.
• Animation – Öğelere hareketli efektler ekler.
• Keyframes – Animasyonlar için başlangıç ve bitiş noktalarını tanımlar.
• Media – Farklı ekran boyutlarına göre stil belirlemek için kullanılır.
• SVG – Scalable Vector Graphics, çözünürlükten bağımsız vektörel grafiklerdir.
• Favicon – Web sitesinin tarayıcı sekmesinde görünen simgedir.
• Meta tag – Sayfa bilgilerini tanımlayan HTML etiketidir. SEO için önemlidir.
• Charset – Sayfa karakter setini tanımlar (örn. UTF-8).
• Viewport – Web sayfasının görünür alanını belirler.
• HTTPS – Web sayfası için güvenli iletişim protokolüdür.
• Domain – Web sitesinin adresi.
• Hosting – Web sitesinin internet üzerinde barındırılması için gerekli alan ve sunucu.
• SSL – Web sitesinin güvenli bağlantı kurmasını sağlayan protokoldür.
• Sitemap – Web sitesinin sayfalarının ve yapısının yer aldığı dosya.

Teşekkür ederim vakit ayırdığınız için.

Ne demek hocam. Merağınız varsa kesinlikle başlayın, bunlarla uğraşırken bir anda robotik kodlamaya falan geçebilirsiniz, çok şey öğreneceksiniz.

hocam vibe coding nedir? Yapay zeka ile anlatarak yazılım mı üretiyor?

Evet hocam doğru anlamışsınız.

vibe codingin sitesini atma şansınız var mı