Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ozantekin/50Days50Projects
This repository contains 50 mini projects related to HTML, CSS and JavaScript. The construction stages of the projects are published on YouTube.
https://github.com/ozantekin/50Days50Projects
css html javascript
Last synced: about 2 months ago
JSON representation
This repository contains 50 mini projects related to HTML, CSS and JavaScript. The construction stages of the projects are published on YouTube.
- Host: GitHub
- URL: https://github.com/ozantekin/50Days50Projects
- Owner: ozantekin
- Created: 2022-04-03T06:20:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-05T05:56:41.000Z (about 1 year ago)
- Last Synced: 2024-06-12T07:18:11.337Z (3 months ago)
- Topics: css, html, javascript
- Language: CSS
- Homepage: https://youtube.com/playlist?list=PL4MimQX-iTOJEdZqdR3XVX4TnON85JMhy
- Size: 10.3 MB
- Stars: 258
- Watchers: 8
- Forks: 36
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
50 Gün 50 Proje
- İçerik:
- Bu repository tamamen proje bazlıdır ve özellikle yeni başlayanlar için temel projeler içermektedir. Toplamda 50 mini proje, HTML, CSS ve JavaScript ile ilgilidir. İlgili projelerin kaynak kodlarına ve YouTube video bağlantılarına, aşağıdaki "Projeler" tablosunu üzerinden rahatlıkla ulaşabilirsiniz.
- Düzen:
- Projeler klasör klasör toplanmış olup Projeler kısmında ilgili proje üzerine gelip kaynak kodlarına ve videolar için YouTube bağlantılarına tıklayarak ulaşabilirsiniz.
- ###### Brad Traversy ve Florin Pop'un eğitmenliğini yaptığı "50 Projects In 50 Days - HTML, CSS & JavaScript" kursunun kendi çalışma filtrelerimden geçirilmiş hali sunulmuştur.
Projeler
| Sıra | Kaynak Kod | YouTube Bağlantı | Durum |
| ---- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| `00` | **[Genişleyen Kartlar](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/01_Genisleyen_Kartlar)** | **[Animasyonlu Açılan Kartlar Nasıl Yapılır • 50 Gün 50 Proje -1](https://youtu.be/32sSSksKbCE)** | `Tamamlandı` |
| `01` | **[İlerleme Adımları](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/02_Ilerleme_Adimlari)** | **[Animasyonlu İlerleme Adımları Nasıl Yapılır • 50 Gün 50 Proje -2](https://youtu.be/YhbVCjdjOO0)** | `Tamamlandı` |
| `02` | **[Animasyonlu Bir Şekilde Dönen Menü](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/03_Donen_Menu_Animasyonu)** | **[Animasyonlu Menü Nasıl Yapılır • 50 Gün 50 Proje -3](https://youtu.be/T3Gc3exJNBQ)** | `Tamamlandı` |
| `03` | **[Gizli Arama Widget'ı](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/04_Gizli_Arama_Widget)** | **[Açılıp Kapanan Search Input Nasıl Yapılır • 50 Gün 50 Proje -4](https://youtu.be/Sn7F42jnCzU)** | `Tamamlandı` |
| `04` | **[Bulanık Loading Ekranı](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/05_Bulanik_Loading_Ekrani)** | **[Animasyonlu Loading Ekranı Nasıl Yapılır • 50 Gün 50 Proje -5](https://www.youtube.com/watch?v=r5twXB71bDg&ab_channel=OzanTekin)** | `Tamamlandı` |
| `05` | **[Scroll Animasyonu](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/06_Scroll_Animasyonu)** | **[Scroll Animasyonu Nasıl Yapılır • 50 Gün 50 Proje -6](https://youtu.be/vOacI-cTnHc)** | `Tamamlandı` |
| `06` | **[Bölünmüş Açılış Sayfası](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/07_Bolunmus_Acilis_Sayfasi)** | **[Animasyonlu Genişleyen Açılış Sayfası Nasıl Yapılır • 50 Gün 50 Proje -7](https://youtu.be/RQSArpgUPaw)** | `Tamamlandı` |
| `07` | **[Dalga Animasyonu](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/08_Dalga_Animasyonu)** | **[Dalga Animasyonu Nasıl Yapılır • 50 Gün 50 Proje -8](https://youtu.be/QRiwYUQkNUQ)** | `Tamamlandı` |
| `08` | **[Ses Stream Deck](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/09_Ses_Stream_Deck)** | **[Sound Stream Deck Yapalım • 50 Gün 50 Proje -9](https://youtu.be/EwHdykkdQEM)** | `Tamamlandı` |
| `09` | **[Dad Jokes](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/10_Dad_Jokes)** | **[Dad Jokes Generator Yapalım • 50 Gün 50 Proje -10](https://youtu.be/0lXxVbIg1-8)** | `Tamamlandı` |
| `10` | **[Event keyCodes](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/11_Event_KeyCodes)** | **[keyCodes hakkında tekrar projesi • 50 Gün 50 Proje -11](https://youtu.be/sg5T7Vngtw4)** | `Tamamlandı` |
| `11` | **[S.S.S. Collapse](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/12_FAQ_Collapse)** | **[Collapse Hakkında Detaylı Bir Proje Yapalım • 50 Gün 50 Proje -12](https://youtu.be/JdqCTSVFJyk)** | `Tamamlandı` |
| `12` | **[Random Choice Picker](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/13_Random_Choice_Picker)** | **[setTimeout ve setInterval Basit Oyun Projesi • 50 Gün 50 Proje -13](https://youtu.be/3FVEJoCJEpc)** | `Tamamlandı` |
| `13` | **[Animated Navigation](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/14_Animated_Navigation)** | **[Animasyonlu Açılan Menü • 50 Gün 50 Proje -14](https://youtu.be/fFKAUOIkHWo)** | `Tamamlandı` |
| `14` | **[Artan Sayaç](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/15_Artan_Sayac)** | **[Artan Sayaç Yapalım • 50 Gün 50 Proje -15](https://youtu.be/wXhz34MDZ7s)** | `Tamamlandı` |
| `15` | **[Random Image Feed](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/16_Random_Image_Feed)** | **[Random Image Feed Nasıl Yapılır • 50 Gün 50 Proje -16](https://youtu.be/1eCzVtFhTNc)** | `Tamamlandı` |
| `16` | **[Loading Ekranı](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/17_Loading_Ekrani)** | **[CSS ile Loading Ekranı • 50 Gün 50 Proje -17](https://youtu.be/CX8uUWhlg-M)** | `Tamamlandı` |
| `17` | **[Auto Text Effect](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/18_Auto_Text_Effect)** | **[Otomatik Metin Efekti • 50 Gün 50 Proje -18](https://youtu.be/PPkBFDyZag8)** | `Tamamlandı` |
| `18` | **[Notes](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/19_Notes)** | **[Not Panosu Uygulaması ( localStorage ) • 50 Gün 50 Proje -19](https://youtu.be/1FKl_gvE3MM)** | `Tamamlandı` |
| `19` | **[Quiz App](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/20_Quiz)** | **[Quiz App • 50 Gün 50 Proje -20](https://youtu.be/DhNQAQYrORQ)** | `Tamamlandı` |
| `20` | **[Drawing App](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/21_Drawing_App)** | **[Çizim Uygulaması - Canvas • 50 Gün 50 Proje -21](https://youtu.be/RMeAy6j25tg)** | `Tamamlandı` |
| `21` | **[Pokedex](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/22_Pokedex)** | **[Pokedex Guide - Fetch API & Async, Await Temel Proje • 50 Gün 50 Proje -22](https://youtu.be/iQ3KE77Kxj8)** | `Tamamlandı` |
| `22` | **[Verify Account UI](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/23_Verify_Account)** | **[Verify Account UI • 50 Gün 50 Proje -23](https://youtu.be/YgsU-yReKvo)** | `Tamamlandı` |
| `23` | **[ Sürükle ve Bırak](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/24_SurukleBirak)** | **[Sürükle ve Bırak (Drag & Drop) • 50 Gün 50 Proje -24](https://youtu.be/KvFDIFYCvos)** | `Tamamlandı` |
| `24` | **[Password Strength](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/25_Password_Strength)** | **[Password Strength UI - Tailwind CSS • 50 Gün 50 Proje -25](https://youtu.be/Ex3lenkN5GE)** | `Tamamlandı` |
| `25` | **[Mobile Tab Navigation](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/26_Mobile_Tab_Navigation)** | **[Mobil Sekme Navigasyonu Yapalım • HTML, CSS, JavaScript -26](https://youtu.be/l_ynwNG6J0k)** | `Tamamlandı` |
| `26` | **[Image Carousel](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/27_Image_Carousel)** | **[Hareketli Görsel Vitrin ( setInterval ) • HTML, CSS, Javascript -27](https://youtu.be/8gYdAi_vSFo)** | `Tamamlandı` |
| `27` | **[Bildirim](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/28_Bildirim)** | **[JavaScript Giriş Seviye Proje (DOM - Math.random) • Proje -28 ](https://youtu.be/vLBZsAxqwMw)** | `Tamamlandı` |
| `28` | **[Button Effect](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/29_Button_effect)** | **[JavaScript ve CSS için Hızlı Tekrar Projesi (clientX-Y offsetTop-Left) -29](https://youtu.be/O98SNt7rVAg)** | `Tamamlandı` |
| `29` | **[Hoverboard](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/30_Hoverboard)** | **[Yeni Başlayanlar İçin 15 Dakikada JavaScript ile Oyun (mouseover - mouseout) • Proje -30](https://youtu.be/ZGczNiN9V38)** | `Tamamlandı` |
| `30` | **[Box Switcher](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/31_Box_Switcher)** | **[Yeni Başlayanlar İçin JavaScript Projesi • HTML, CSS, JavaScript -31](https://youtu.be/EjRwyNPjc1Q)** | `Tamamlandı` |
| `31` | **[Sticky Navbar](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/32_Stick_Navbar)** | **[Sticky Navbar Yapımı • HTML,CSS & JS](https://youtu.be/esEYr6mrpqI)** | `Tamamlandı` |
| `32` | **[Feedback UI](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/33_Feedback_UI)** | **[Feedback UI Yapımı • HTML, CSS & JS](https://youtu.be/OLxRknJDEXA)** | `Tamamlandı` |
| `33` | **[Movie App](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/34_Movie_App)** | **[50 Dk İçinde Movie Website Yap - Responsive • JavaScript Fetch API](https://youtu.be/VcZErlRNuT4)** | `Tamamlandı` |
| `34` | **[GitHub Profil Kart](https://github.com/ozantekin/50Days50Projects/tree/main/Projects/35_GitHub_Profil_Kart)** | **[GitHub Profil Kartları Yap • Axios - JavaScript ](https://youtu.be/jwQ-NcLQNfs)** | `Tamamlandı` |
| `35` | **[]()** | **[]()** | `Hazırlanıyor` |
| `36` | **[]()** | **[]()** | `Gelecek Proje` |
| `36` | **[]()** | **[]()** | `Gelecek Proje` |
| `37` | **[]()** | **[]()** | `Gelecek Proje` |
| `38` | **[]()** | **[]()** | `Gelecek Proje` |
| `39` | **[]()** | **[]()** | `Gelecek Proje` |
| `40` | **[]()** | **[]()** | `Gelecek Proje` |
| `41` | **[]()** | **[]()** | `Gelecek Proje` |
| `42` | **[]()** | **[]()** | `Gelecek Proje` |
| `43` | **[]()** | **[]()** | `Gelecek Proje` |
| `44` | **[]()** | **[]()** | `Gelecek Proje` |
| `45` | **[]()** | **[]()** | `Gelecek Proje` |
| `46` | **[]()** | **[]()** | `Gelecek Proje` |
| `47` | **[]()** | **[]()** | `Gelecek Proje` |
| `48` | **[]()** | **[]()** | `Gelecek Proje` |
| `49` | **[]()** | **[]()** | `Gelecek Proje` |
Aktif Kullandığım hesaplar:
- YouTube: Ozan Tekin
- LinkedIn: Ardıl Ozan Tekin
- Medium: @ozantekindev
- Twitter: @ozantekindev