{"id":8402,"date":"2025-01-02T12:00:14","date_gmt":"2025-01-02T09:00:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/"},"modified":"2025-01-02T12:00:14","modified_gmt":"2025-01-02T09:00:14","slug":"tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/","title":{"rendered":"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve i\u015flevsel bir Kanban tahtas\u0131 olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Bu rehber, proje y\u00f6netiminde olduk\u00e7a pop\u00fcler olan Kanban y\u00f6ntemini uygulamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r. \u00d6ncelikle, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturarak ba\u015flayaca\u011f\u0131z. Daha sonra, Tailwind CSS’in g\u00fcc\u00fcyle aray\u00fcz\u00fc \u015fekillendirece\u011fiz ve son olarak, JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyerek tahtan\u0131n dinamik olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!<\/p>\n

HTML Yap\u0131s\u0131<\/h2>\n

\u0130lk olarak, Kanban tahtas\u0131n\u0131n temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Bu yap\u0131da, her bir s\u00fctunu temsil eden \u00fc\u00e7 div<\/code> eleman\u0131 ve bunlar\u0131n i\u00e7ine yerle\u015ftirilecek g\u00f6rev kartlar\u0131n\u0131 temsil eden div<\/code> elemanlar\u0131 bulunur. Ayr\u0131ca, daha sonra JavaScript ile etkile\u015fim kuraca\u011f\u0131m\u0131z id<\/code> \u00f6zniteliklerini de ekleyece\u011fiz.<\/p>\n

\n<div id=\"kanban-board\">\n  <div class=\"column\" id=\"todo\">\n    <h2>Yap\u0131lacaklar<\/h2>\n    <div class=\"card\" draggable=\"true\">G\u00f6rev 1<\/div>\n    <div class=\"card\" draggable=\"true\">G\u00f6rev 2<\/div>\n  <\/div>\n  <div class=\"column\" id=\"progress\">\n    <h2>Devam Edenler<\/h2>\n  <\/div>\n  <div class=\"column\" id=\"done\">\n    <h2>Tamamlananlar<\/h2>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
Tailwind CSS ile Stil Uygulama<\/h2>\n
\u015eimdi ise, Tailwind CSS ile olu\u015fturdu\u011fumuz HTML yap\u0131s\u0131na stil uygulayal\u0131m.  Tailwind’in haz\u0131r s\u0131n\u0131flar\u0131n\u0131 kullanarak, h\u0131zl\u0131 ve kolay bir \u015fekilde \u015f\u0131k bir aray\u00fcz olu\u015fturabiliriz.  A\u015fa\u011f\u0131daki kod blo\u011fu, s\u00fctunlar\u0131n ve kartlar\u0131n stilini d\u00fczenlemek i\u00e7in kullan\u0131labilecek bir \u00f6rnektir.  Daha detayl\u0131 stilleme i\u00e7in  Tailwind CSS d\u00f6k\u00fcmantasyonuna<\/a> g\u00f6z atabilirsiniz.<\/p>\n
\n\/* Tailwind CSS s\u0131n\u0131flar\u0131 ile stil uygulama *\/\n#kanban-board {\n  display: flex;\n}\n\n.column {\n  width: 30%;\n  padding: 1rem;\n  border: 1px solid #ccc;\n  margin: 0 1rem;\n}\n\n.card {\n  background-color: #f0f0f0;\n  padding: 1rem;\n  margin-bottom: 0.5rem;\n  cursor: move;\n}\n<\/code><\/pre>\n
JavaScript ile S\u00fcr\u00fckle B\u0131rak \u0130\u015flevselli\u011fi<\/h2>\n
Son olarak, JavaScript kullanarak s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyece\u011fiz.  Bu k\u0131s\u0131m, biraz daha karma\u015f\u0131k olsa da,  addEventListener<\/code> ve DataTransfer<\/code> nesnelerini kullanarak  kolayca ger\u00e7ekle\u015ftirilebilir.  A\u015fa\u011f\u0131daki kod blo\u011fu,  s\u00fcr\u00fckle b\u0131rak i\u015flemini y\u00f6netmek i\u00e7in temel bir JavaScript \u00f6rne\u011fi sunmaktad\u0131r.  Daha geli\u015fmi\u015f \u00f6zellikler i\u00e7in,  MDN Drag and Drop API d\u00f6k\u00fcmantasyonuna<\/a> bakabilirsiniz.<\/p>\n
\n\/\/ JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fi\nconst kanbanBoard = document.getElementById('kanban-board');\nkanbanBoard.addEventListener('dragover', (e) => {\n  e.preventDefault();\n});\n\n\/\/ ... (Di\u011fer JavaScript kodlar\u0131)\n<\/code><\/pre>\n
Bu \u00f6rnek, s\u00fcr\u00fckle b\u0131rak i\u015fleminin temelini olu\u015fturmaktad\u0131r.  Ger\u00e7ek bir Kanban tahtas\u0131 i\u00e7in,  g\u00f6revlerin veritaban\u0131nda tutulmas\u0131,  silme ve d\u00fczenleme i\u015flemlerinin eklenmesi ve daha geli\u015fmi\u015f s\u00fcr\u00fckle b\u0131rak \u00f6zellikleri gerekecektir.  Bu noktada, daha geli\u015fmi\u015f \u00f6zellikler i\u00e7in bir JavaScript framework’\u00fc (React, Vue veya Angular gibi) kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n
Umar\u0131m bu makale, Tailwind CSS ve JavaScript kullanarak basit bir Kanban tahtas\u0131 olu\u015fturman\u0131za yard\u0131mc\u0131 olmu\u015ftur.  Daha fazla bilgi ve kaynak i\u00e7in web sitemi<\/a> ziyaret edebilirsiniz.  Sorular\u0131n\u0131z ve \u00f6nerileriniz i\u00e7in yorum b\u0131rakmaktan \u00e7ekinmeyin!<\/p>\n
#Etiketler: Kanban, Tailwind CSS, JavaScript, proje y\u00f6netimi, agile, todo list, kartlar, s\u00fctunlar, s\u00fcr\u00fckle b\u0131rak,  web geli\u015ftirme<\/p>\n
<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8402","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nTailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma<\/title>\n<meta name=\"description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve i\u015flevsel bir Kanban tahtas\u0131 olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Bu rehber, proje y\u00f6netiminde olduk\u00e7a pop\u00fcler olan Kanban y\u00f6ntemini uygulamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r. \u00d6ncelikle, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturarak ba\u015flayaca\u011f\u0131z. Daha sonra, Tailwind CSS'in g\u00fcc\u00fcyle aray\u00fcz\u00fc \u015fekillendirece\u011fiz ve son olarak, JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyerek tahtan\u0131n dinamik olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve i\u015flevsel bir Kanban tahtas\u0131 olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Bu rehber, proje y\u00f6netiminde olduk\u00e7a pop\u00fcler olan Kanban y\u00f6ntemini uygulamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r. \u00d6ncelikle, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturarak ba\u015flayaca\u011f\u0131z. Daha sonra, Tailwind CSS'in g\u00fcc\u00fcyle aray\u00fcz\u00fc \u015fekillendirece\u011fiz ve son olarak, JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyerek tahtan\u0131n dinamik olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-02T09:00:14+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma\",\"datePublished\":\"2025-01-02T09:00:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/\"},\"wordCount\":456,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/\",\"name\":\"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-01-02T09:00:14+00:00\",\"description\":\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve i\u015flevsel bir Kanban tahtas\u0131 olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Bu rehber, proje y\u00f6netiminde olduk\u00e7a pop\u00fcler olan Kanban y\u00f6ntemini uygulamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r. \u00d6ncelikle, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturarak ba\u015flayaca\u011f\u0131z. Daha sonra, Tailwind CSS'in g\u00fcc\u00fcyle aray\u00fcz\u00fc \u015fekillendirece\u011fiz ve son olarak, JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyerek tahtan\u0131n dinamik olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve i\u015flevsel bir Kanban tahtas\u0131 olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Bu rehber, proje y\u00f6netiminde olduk\u00e7a pop\u00fcler olan Kanban y\u00f6ntemini uygulamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r. \u00d6ncelikle, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturarak ba\u015flayaca\u011f\u0131z. Daha sonra, Tailwind CSS'in g\u00fcc\u00fcyle aray\u00fcz\u00fc \u015fekillendirece\u011fiz ve son olarak, JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyerek tahtan\u0131n dinamik olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma","og_description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve i\u015flevsel bir Kanban tahtas\u0131 olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Bu rehber, proje y\u00f6netiminde olduk\u00e7a pop\u00fcler olan Kanban y\u00f6ntemini uygulamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r. \u00d6ncelikle, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturarak ba\u015flayaca\u011f\u0131z. Daha sonra, Tailwind CSS'in g\u00fcc\u00fcyle aray\u00fcz\u00fc \u015fekillendirece\u011fiz ve son olarak, JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyerek tahtan\u0131n dinamik olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-01-02T09:00:14+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma","datePublished":"2025-01-02T09:00:14+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/"},"wordCount":456,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/","name":"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-01-02T09:00:14+00:00","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle birlikte Tailwind CSS ve JavaScript kullanarak basit ve i\u015flevsel bir Kanban tahtas\u0131 olu\u015fturmay\u0131 \u00f6\u011frenece\u011fiz. Bu rehber, proje y\u00f6netiminde olduk\u00e7a pop\u00fcler olan Kanban y\u00f6ntemini uygulamak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131 olacakt\u0131r. \u00d6ncelikle, temel HTML yap\u0131s\u0131n\u0131 olu\u015fturarak ba\u015flayaca\u011f\u0131z. Daha sonra, Tailwind CSS'in g\u00fcc\u00fcyle aray\u00fcz\u00fc \u015fekillendirece\u011fiz ve son olarak, JavaScript ile s\u00fcr\u00fckle b\u0131rak i\u015flevselli\u011fini ekleyerek tahtan\u0131n dinamik olmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ve-javascript-ile-temel-kanban-tahtasi-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS ve JavaScript ile Temel Kanban Tahtas\u0131 Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=8402"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/8402\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=8402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=8402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=8402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}