- 32
- 210 795
WebMucidi “WebMucidi” Tasarım Laboratuvarı
เข้าร่วมเมื่อ 4 ธ.ค. 2012
Web tasarımıyla ilgili görüntülü dersler bulabilirsiniz. Daha fazla içerik için sitemizi ziyaret ediniz...
www.webmucidi.com
github.com/webmucidi
www.webmucidi.com
github.com/webmucidi
Web Uygulama Sınavı Çözümü(Semantic HTML,CSS Grid Layout,Flex,Animation vs.)
Meslek Lisesi - Yazılım Geliştirme Alanı Web Tabanlı Uygulama Dersi 2023/1.Dönem Uygulama Sınavı
github.com/webmucidi/WebUygulamaSinav2023
codepen.io/webmucidi/pen/YzjpZNe
00:00 Sınav projesinin tanıtımı
04:28 Semantic HTML ile sayfa iskeletini oluşturma
08:40 CSS Grid ile ana iskeleti konumlandırma
16:08 CSS Grid ile içerik alanındaki satır ve sütun birleştirme
26:42 Layout için mobil uyumluluk/responsive işlemleri
35:19 CSS Flexbox ile içerik yerleşimi ve hizalama
51:08 İleri seviye CSS uygulamaları(transition,animation,gradient,opacity,shadow vs.)
github.com/webmucidi/WebUygulamaSinav2023
codepen.io/webmucidi/pen/YzjpZNe
00:00 Sınav projesinin tanıtımı
04:28 Semantic HTML ile sayfa iskeletini oluşturma
08:40 CSS Grid ile ana iskeleti konumlandırma
16:08 CSS Grid ile içerik alanındaki satır ve sütun birleştirme
26:42 Layout için mobil uyumluluk/responsive işlemleri
35:19 CSS Flexbox ile içerik yerleşimi ve hizalama
51:08 İleri seviye CSS uygulamaları(transition,animation,gradient,opacity,shadow vs.)
มุมมอง: 525
วีดีโอ
JSON Server Fetch Post Mesaj Uygulaması(NPM,Tailwind CSS kullanımı)
มุมมอง 1.4K3 ปีที่แล้ว
github.com/webmucidi/JSONServerPostUygulama.git Açıklama ve gerekli komutlar git uygulaması içinde mevcuttur. -NPM kullanarak projeye 3rd party modül ekleme -Tailwind CSS kullanımı -REST Api kullanımı(json:server) -Fetch fonksiyonu POST işlemi
JavaScript Atasözü ve Deyim Arama(JSON API-Fetch ile veri sorgulama)
มุมมอง 2.5K3 ปีที่แล้ว
github.com/webmucidi/JSAtasozuDeyimlerFetchUygulama.git Harici bir veri kaynağı (JSON API) üzerinden sorgulama yaparak veri çekme ve listeleme uygulamasıdır. Uygulama içerisinde Fetch fonksiyonu ile sunucudan veri çekme, Async/await kullanımı, Arama kriterleri için RegExp kullanımı,Dizii çinde rastgele sıralama ve tekrarlı kayıtları teke düşürme gibi uygulamalara yer verilmiştir.
JavaScript Online Sınav Uygulaması(JSON Kullanımı-XMLHttpRequest)
มุมมอง 3.6K3 ปีที่แล้ว
github.com/webmucidi/JSOnlineSinavUygulamasi.git 0:00 Giriş ve proje tanıtımı 0:35 Proje dosyası oluşturma 1:42 HTML iskeletini oluşturma 6:02 CSS stillerini oluşturma 14:45 JSON verilerini oluşturma 21:00 JavaScript kodlarını oluşturma 48:00 Sonucu görüntüleme
JavaScript ile "Taş-Kağıt-Makas" Oyunu
มุมมอง 2.1K3 ปีที่แล้ว
github.com/webmucidi/JSTasKagitMakasOyunu.git 0:00 Proje hakkında 0:30 Proje dosya ve klasör düzeni oluşturma 1:15 HTML iskeletini oluşturma 3:50 CSS ile görsel tasarımı oluşturma 8:50 JavaScript ile oyun fonksiyonunu oluşturma
Web Sitesi Yayınlama Rehberi - Tamamen Ücretsiz!!!
มุมมอง 12K3 ปีที่แล้ว
Bir web sitesinin internette yayınlanması için gerekenleri adım adım olarak anlattım. Üstelik tüm bunları yapmak tamamen ücretsiz! Aşağıda gerekli komut ve linkleri paylaştım. İyi seyirler dilerim... Site Linkleri: 1- Ücretsiz domain tescili için: www.freenom.com/tr/index.html?lang=tr 2- Proje dosyasını yüklemek için: github.com/ 3-Git kurulum dosyası için: git-scm.com/download/win 4- Ücretsiz ...
10 Adımda Web Tasarım Rehberi
มุมมอง 2.5K4 ปีที่แล้ว
Bir web sitesi tasarlama aşamalarını adım adım olarak anlatmaya çalıştım. İyi seyirler dilerim...
CSS Grid ile Adım Adım Site Tasarımı-8.Bölüm(Mobil Uyumluluk-Media Query ile Responsive Tasarım)
มุมมอง 1.2K4 ปีที่แล้ว
Masaüstü uyumlu olarak hazırladığımız sitemizi mobil cihazlara uyumlu olarak geliştirdik. Siteye ait kaynak kodları indirmek ve incelemek için tıklayın. github.com/webmucidi/HaberSitesi.git www.dropbox.com/sh/kphhydeemq6sdjz/AAC_uMje6MZfZ6YIk54rn7tla?dl=0
10 Adımda Staj Yeri Bulma Rehberi
มุมมอง 8K4 ปีที่แล้ว
Özellikle Meslek Lisesi öğrencileri için staj yeri bulma ve sözleşme süreciyle ilgili rehber niteliğinde bir video. İyi seyirler...
JavaScript ile Kütüphane Uygulaması-3.Bölüm(Temizleme,Sayma,Silme ve Mesaj Metodları)
มุมมอง 7044 ปีที่แล้ว
Örnek proje klasörüne ulaşmak için tıklayın. github.com/webmucidi/JavaScriptKutuphaneUygulamasi.git www.dropbox.com/sh/5waq8b4sbuy2kow/AADEhYkdUFh1o-9cZz0BAiaHa?dl=0
JavaScript ile Kütüphane Uygulaması-2.Bölüm(kitap nesnesi türetme ve tabloya ekleme metoduna erişim)
มุมมอง 8204 ปีที่แล้ว
Örnek proje klasörüne ulaşmak için tıklayın. github.com/webmucidi/JavaScriptKutuphaneUygulamasi.git www.dropbox.com/sh/5waq8b4sbuy2kow/AADEhYkdUFh1o-9cZz0BAiaHa?dl=0
JavaScript ile Kütüphane Uygulaması-1.Bölüm(Class oluşturma ve constructor,methodları tanımlama)
มุมมอง 2.1K4 ปีที่แล้ว
Örnek proje klasörüne ulaşmak için tıklayın. github.com/webmucidi/JavaScriptKutuphaneUygulamasi.git www.dropbox.com/sh/5waq8b4sbuy2kow/AADEhYkdUFh1o-9cZz0BAiaHa?dl=0
JavaScript ile Kütüphane Uygulaması-Giriş(OOP-Nesne Tabanlı Programlama)
มุมมอง 1.3K4 ปีที่แล้ว
Nesne Tabanlı Programlama nedir? Class ve Object kavramları açıklanmıştır. Örnek proje klasörüne ulaşmak için tıklayın. www.dropbox.com/sh/5waq8b4sbuy2kow/AADEhYkdUFh1o-9cZz0BAiaHa?dl=0
JavaScript ile Yapılacaklar Listesi Oluşturma(To Do List Uygulaması)
มุมมอง 4K4 ปีที่แล้ว
Uygulamanın kaynak kodları ve uygulama yönergesi için tıklayın. github.com/webmucidi/JSYapilacaklarListesi.git www.dropbox.com/sh/47045j24wr8eevy/AABnh_nAcHHR3zWgVva3r1iIa?dl=0
JavaScript ile Pizza Sipariş Formu(AddEventListener Kullanımı)
มุมมอง 2.7K4 ปีที่แล้ว
Örnek proje klasörüne ulaşmak için tıklayın: github.com/webmucidi/JSPizzaSiparis.git www.dropbox.com/sh/7btnlcbfywz57q8/AACVarqkaIGhu8vXaaLEMta2a?dl=0
JavaScript ile Ürün Sipariş Formu(Diziler-For-If-Function)
มุมมอง 4.3K4 ปีที่แล้ว
JavaScript ile Ürün Sipariş Formu(Diziler-For-If-Function)
JavaScript ile Kredi Faiz Hesaplama Formu-(Değişkenler)
มุมมอง 14K4 ปีที่แล้ว
JavaScript ile Kredi Faiz Hesaplama Formu-(Değişkenler)
JavaScript ile Vergi Hesaplama Formu(if..else ve for kullanımı)
มุมมอง 3.3K4 ปีที่แล้ว
JavaScript ile Vergi Hesaplama Formu(if..else ve for kullanımı)
CSS Grid ile Adım Adım Site Tasarımı-7.Bölüm(Footer Alanı-Form Kontrolleri)
มุมมอง 1K4 ปีที่แล้ว
CSS Grid ile Adım Adım Site Tasarımı-7.Bölüm(Footer Alanı-Form Kontrolleri)
CSS Grid ile Adım Adım Site Tasarımı-6.Bölüm(Flex Yöntemiyle İçerik Alanı Oluşturma)
มุมมอง 1.6K4 ปีที่แล้ว
CSS Grid ile Adım Adım Site Tasarımı-6.Bölüm(Flex Yöntemiyle İçerik Alanı Oluşturma)
CSS Grid ile Adım Adım Site Tasarımı-5.Bölüm(Intro Alanı Oluşturma)
มุมมอง 1.8K4 ปีที่แล้ว
CSS Grid ile Adım Adım Site Tasarımı-5.Bölüm(Intro Alanı Oluşturma)
CSS Grid ile Adım Adım Site Yapımı-3.Bölüm(Header Tasarımı)
มุมมอง 3.1K5 ปีที่แล้ว
CSS Grid ile Adım Adım Site Yapımı-3.Bölüm(Header Tasarımı)
CSS Grid ile Adım Adım Site Yapımı-4.Bölüm(Menü Oluşturma)
มุมมอง 2K5 ปีที่แล้ว
CSS Grid ile Adım Adım Site Yapımı-4.Bölüm(Menü Oluşturma)
CSS Grid ile Adım Adım Site Yapımı-2.Bölüm(Grid Birleştirme)
มุมมอง 3.2K5 ปีที่แล้ว
CSS Grid ile Adım Adım Site Yapımı-2.Bölüm(Grid Birleştirme)
CSS Grid ile Adım Adım Site Yapımı-1.Bölüm(Layout Oluşturma)
มุมมอง 12K5 ปีที่แล้ว
CSS Grid ile Adım Adım Site Yapımı-1.Bölüm(Layout Oluşturma)
CSS Açılır Menü Oluşturma Dersleri-Bölüm 2
มุมมอง 7K12 ปีที่แล้ว
CSS Açılır Menü Oluşturma Dersleri-Bölüm 2
CSS Açılır Menü Oluşturma Dersleri-Bölüm 1
มุมมอง 11K12 ปีที่แล้ว
CSS Açılır Menü Oluşturma Dersleri-Bölüm 1
teşekkürler çok iyiydi
allahu ekber
Abi valla çok mükemmel olmuş js ye başlayalım 2 hafta oldu 2 haftada mantığına hakim oldum allah razı olsun
her şey oldu fakat click ettiğimde bilgisayar tarafından seçilen resim yüklenmiyor console den baktım js işliyor ama görsel gelmiyor yardımcı olursan sevinirim
hocam devam edin şunlara lütfen ya
Teşekkürler, güzel örnek.
Merhaba hocam görseli neden direk introya değilde intro:before'a ekledik
örneklere devam edin lütfen. sizin gibi anlatan yok
Selim merhaba. Öncelikle bu güzel yorumun için teşekkür ediyorum. Örneklere devam etmeyi çok istemekle birlikte TH-cam için üretme ritmimi ve motivasyonumu kaybettim maalesef bir süredir. Önümüzdeki Eylül ayıyla birlikte yeni sezon yüz yüze dersleri eş zamanlı olarak TH-cam için de hazırlamayı düşünüyorum. Örnek çok var aslında ama tekrara düşmek istemeyişim de motivasyonumu düşüren faktörlerden birisi oldu. Sunucu tarafına daha çok odaklanmak, çeşitli framework leri de örneklerimde kullanmak istiyorum. Paylaştığımız şeyler de büyük sorumluluk yüklüyor sırtımıza o yüzden yüzde yüz hakim olmadığım alanlar için içerik paylaşmayı doğru bulmadım şimdiye kadar. Önceden paylaştığım derslerde bile eksik veya yanlış noktaları görüp kendime kızdığım oluyor :) Neyse sonuç olarak ilgine çok teşekkür ederim tekrar. Umuyorum ki yeni derslerde görüşmek üzere :))
hocam devam edin örneklere. piyasada sizin gibi anlatan hiç yok
hocam sunucu tarafını da bu şekilde ücretsiz yapsak olmaz mı bu frontend için galiba
Hocamvideolara devam edin lütfen
hocam video çekimine devam edin lütfen
Hocam JavaScript dersleri ne zaman gelir
çok güzel oldu ellerinize sağlık😝🌹
Gayet açıklayıcı ve net emeğinize sağlık hocam
Çok güzel anlatım özellikle değişkenleri açıklayarak yazmanız çok iyi olmuş
yazılan her satır kodun açıklamasını yapmışsınız sağ olun hocam
ders çok hazırlıksız çekilmiş gibi duruyor (hazırlıksız olmadığınıza eminim sadece bir dış göz olarak söylüyorum) belki editte bazı düzenlemeler yapılabilir bu konu ile ilgili. Bunun dışında, copy-paste olayında da daha aza gidilirse harika olur veya copy-paste yaptığınız yerleri daha detaylı açıklarsanız daha az kafamız karışmış olur diye düşünüyorum, "hoca naptı şimdi yaa" olabiliyo kafalarımız :D . Tüm bunları yapıcı eleştiri olarak alırsanız çok sevinirim. İçerikler için de çok teşekkürler. Faydalı buluyorum oldukça. Takipteyiz :))
Hocam emeğine sağlık
Üstad video için teşekkürler fakat yarıdan itibaren çok karıştı. Github üzerinden kodlarını indirip çalıştırmaya çalıştığımda yine de çalışmadı.
video için teşekkürler üstad.
Hocam selamlar daha önceki videoları da izleyip yapıyorum ama bu gerçekten kafamı karıştırdı yarım bırakmak zorunda kaldım. Sonraki videolarda bulunan örnekleri biraz daha yalın(çok değişiklik olmadan çünkü sürekli bir ekle çıkar durumu mevcut) halde anlatabilirseniz çok sevinirim. Elinize emeğinize sağlık takipteyim.
hocam merhabalar, Tabiri caiz ise "mala anlatır gibi" anlatmışsınız. Gerçekten çok beğendim ve sayenizde anladım.. Teşekkürler..
neden cdm ile yapıyoruz başaka yolu yokmuu ?
Hocam işime çok yaradı teşekkürler:)
Çok teşekkür emeğinize sağlık hocam işime çok yaradı
umarım emeğinizin karşılığını alırsınız ♥️
HARİKA ANLATIM TEŞEKKÜRLER HOCAM
teşekkür ederim çok işime yaradi
Çok başarılı bir anlatım sınav öncesinde çok yardımcı oldu teşekkür ederim Fatih Hocam 🥰
O sırada para vermemek için Python ile veriyi alıp Javascripte aktarıp kullanan bem
😅
@@WebMucidi nasıl fikir ama, birden fazla dil bilmenin avantajı diyelim hihi
izlediğim videolardan en iyisi. diğer videolarda projesini bana ispatlamak için video çekiyorlar. ancak sizin videolar öğretici. emeiğinize sağlık. ancak daha fazla içerik çekmeniz dileklerimle
Çok teşekkür ederim. Benim için de derslerim için aldığım en güzel yorumlardan birisiydi. Genelde derslerimiz giriş seviyesine hitap ediyor bazı önemsiz ve kolay gibi görünen yerler yeni öğrenmeye başlayanlar için çok karışık olabiliyor. O yüzden her ayrıntıyı belki gereğinden fazla tekrar ederek anlatmaya çalışıyoruz. Bunun tarafınızdan görülmüş ve takdir edilmiş olması kıymetli. Tekrar sağolun,saygılar...
Rica ederim hocam. Gerçekten buna dikkat ediyorsunuz. Buda kalitenizi ortaya koyuyor. Yeni başlayan ben ve benim gibiler için her ayrıntı çok önemli. Bol kodlu günler dilerim.
Hocam öncelikle videolarınız çok faydalı çok teşekkürler. Böyle örnek projelerin devamı gelecek mi?
Kızlarıma sormam lazım 😅
Saĝol reis adam gibi adamsin harika proje oldu
Faydası olduysa ne mutlu. Sizler sağolun...
Güzel anlatım flowcharti da çizmeniz daha da güzel anlaşılır olurdu. Us flowcharta nerede giriyor o kafamda sekillenmedi
Görsel açıdan anlatımı desteklemeyi hep istiyorum haklısınız fakat edit kısmı çok vakit alıyor o yüzden ham haliyle koydum çoğunu. Bundan sonraki örneklerde flowchart ile algoritmayı da koyabilirim çok da iyi olur. Teşekkürler tavsiyeniz için 👍
hocam malzemelerin fiyatları farklı olsa
Uygularken farklı parametrelerle denemeniz faydalı olacaktır. Söylediğiniz mümkün tabi ki hatta programlamayla mümkün olmayan şey yok zaten ben de bir deneyeceğim ilk fırsatta :))
Merhaba hocam bende page not fund geliyor bunu nasıl çöze bilirim. Yardımcı olursanız çok sevinirim
Bu videoyu çektikten sonra çok daha pratik yöntemler çıktı ya da ben geç keşfettim belki de bilemiyorum. Github pages kullanmayı deneyebilirsiniz belki ufak projeleri yayınlamak için.
hiç bir şey anlamadım..aracTipini bir değişkene atip neden kullanmadık da her seferinde document deyip seçip durduk..koşul yazarken aractipi == motor ve oto nerden geldi html de value motorsiklet ve otomobil yazdık js de moto ile oto oldu..for döngüsünde else ile else if içerisine yazdığımız kodlar aynı haliyle ikisini birden seçiyor..artik seçmiyor diyor da videoda ne yaptin da seçmedi onu videonun orası kesilmiş gibi..22:03 de else ile else if içerisine kopyala yapıştır yaparak aynı şeyi yazarak farklı sonucu nasıl alıyor..
Tekrar izlemem lazım :) Bahsettiğiniz yerlere dikkatle bakacağım çoğu şeyi anlattıktan sonra yeniden bakınca hatalı yerleri ben de görüyor ve beğenmiyorum. İzleyip yorum yaptığınız için teşekkür ederim...
"%30 faiz adamın ciğerini söker, şuan o kadar değil" Yıl 2022 den yazıyorum faiz o kadar ve ciğerimiz sökülüyor" :)
Maalesef 😅
Merhaba acil sizinle nasil iletisim kura bilirim mumkunse tabii
Acilse önemi kalmadı muhtemelen ama twitterdan ulaşabilirsiniz en kolay @webmucidi
22:15 bas bas kafayı ye AUAHUAHAHAUHAUHAUHAUHAUHAUHAUHAUH teşekkürler hocam elinize sağlık
Yemişliğimiz çok var 😅
abi eline sağlık çok güzel olmuş , çok yeni şeyler öğrendim , başarılar.
İnsan 5 ayda bildiğini unutur ama geç de olsa teşekkürler :))
Netlify'da sertifika kısmında takıldı benimki, buna bir çözüm var mı? 1 gündür sertifika vermelerini bekliyorum
Github pages dan yayınlıyorum artık ben daha pratik oluyor.
Hocam faiz hesaplarken while döngüsü kullanarak her seferinde faizi arttırmak daha iyi bir algoritma olur mu ?
Aslında en güzeli sıfırlamak faizi de işte evet dediğiniz algoritma da daha sağlıklı olabilir 😅
Birde ücretli eğitim mi veriyorsunuz sınıfta? Şaka mısınız siz Brad Traversy'ın kursunda yapılan örneği tekrar yapmışsınız eğitimcinin azcık onuru gururu olur ayıp ayıp
Böyle saçma sapan yorumlara muhatap olmamak adına aylardır sayfaya bakmıyor ve video yüklemiyordum aslında. Direk silip görmezden gelebilirdim ama ibret olsun diye dursun istiyorum bu arada. İnsanların onurunu gururunu ağzına almak bu kadar kolay işte neymiş efendim başka bir eğitmenin yaptığı örneği tekrarlamışım bir de bunu dersimde anlatmışım ne büyük kabahat! Bir matematik öğretmeninin sınıfta başkasının hazırladığı bir kitaptan test çözmesi, bir fizik öğretmeninin öğrencilerine Tesla'nın,Einstein'ın formüllerinden örnekler vermesi falan o kadar absürt ve kabul edilemez hatta onursuzca şeyler ki bütün bu öğretmenlere hiçbir yeterlilik ve vasfımız ve hatta adımız sanımız bile belli olmadan sallayalım. Yüzlerce güzel şey içerisinde birşey oluyor ve işte insan diyor ki sonra değmez,boşver değmez. Gerçekten değmiyor emeklere yazık...
40:07 fonksiyon nasıl çalıştı anlamadım. Ben gidip <select onclick="yillar()" name="" id="aracYili" style="width: 100px;"> selecet de onclick ile fonksiyonu çağırınca çalıştı. Çalışıyor ama her aç kapa yaptığımda tekrar döngü başladığı için bir o kadar tarihi tekrar ekliyor . yillar fonksiyonun kod bloğunun sonuna yani } yillar(); yazınca otomatik çalıştı. Fazladan ekleme de yapmıyor. Ama sizin yaptığınızda neyi kaçırdım anlayamadım.
body onload olayında çağırıyorduk onu yaptınız sanırım. Js dosyasını body kapandıktan sonra çağırmamız lazım bir de head içine mi tanımlamıştınız?
Harika bir sunum teşekkürler
Değerli yorumunuz için teşekkür ederim. Faydalı olduysa ne mutlu bana...
hocam git add . komutunu çalıştıramıyorum sanırım ben malım yardımcı olacagınıza eminim simdiden teşekkürler
Faruk merhaba. Bizim işin cilvesi gereği sanırım doğru kodu yazdığımızı düşünüp istediğimiz sonucu alamadığımız durumlarla sık karşılaşabiliyoruz. Akıl tutulması diyelim ona biz :)) Visual Studio Code'la birlikte artık github işlemleri oldukça kolaylaştı. Neredeyse hiç kod yazmadan bile publish işlemlerini kolayca halledebiliyoruz. Bir de o şekilde denemeni öneririm. İlgin için de çok teşekkür ederim. Kolay gelsin...
@@WebMucidi çok teşekkür ederim hocam çok şükür çözdüm o an kafam iyi yanışti ama cevap verdiğiniz ilgilendiğiniz için teşekkür ederim
Video nun solunda ampul işareti koymuş sanırım torpil siz bir şey yapamazsınız demek istemiş.
🤔