|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/tailwind-css-sifirdan-gercek-web-tasarim-projeleri-ile-ogrenin/
课程评论：没有评论
Coursera 课程：Tailwind CSS - 从零开始学习真实 Web 项目 **课程概述：** 本课程旨在教授大家如何使用 Tailwind CSS 这个高度可定制的 CSS 库来构建现代、响应式的 Web 界面。Tailwind CSS 是一个 utility-first 的 CSS 框架，它提供了预定义且可配置的 CSS 属性，能够减少重复的 CSS 使用，并允许开发者在不离开 HTML 代码的情况下进行快速、可扩展的开发。 **Tailwind CSS 的独特之处：** 与其他 CSS 框架（如 Bootstrap, Semantic UI, Bulma, Foundation）不同，Tailwind CSS **不是一个 UI Kit**，它不提供预设的组件。取而代之的是，Tailwind CSS 提供了更底层的设计抽象，开发者可以使用预定义的 utility class 来轻松构建任何自己想要的 UI component，如按钮、导航、卡片等。这种方式特别适合与 React、Vue、Angular 等组件化工具配合使用，能够更方便地为组件添加新功能。当需要修改设计时，也无需担心会破坏布局或影响其他区域，因为组件的样式是自包含的。 **Tailwind CSS 的主要特性：** * **高度灵活：** 能够实现更细致的控制。 * **组件化友好：** 非常适合创建和管理可复用的组件。 * **响应式设计：** 所有元素都内置响应式设计支持。 * **可扩展与可定制：** 允许用户根据项目需求进行扩展和定制。 **课程项目：** 1. **兰博基尼汽车网站 (Lamborghini Car Site)：** 使用 Tailwind CSS 构建一个响应式的兰博基尼汽车网站，并集成日/夜间模式（light/dark mode）功能。 2. **响应式个人作品集网站 (Responsive Personal Portfolio Website)：** （本部分仍在准备中） 3. **音乐网站 (Music Website)：** 使用 Tailwind CSS 编码一个响应式的音乐网站。重点将放在为桌面和移动设备开发响应式菜单，以及学习如何在某个区域添加背景图片。 **重要提示：** * 本课程仍在持续开发中，部分内容可能尚未准备好。 * 讲师在完成第一部分课程录制后，发现音频质量不高，因此计划以较低的价格提供本课程，请购买前留意。 **相关标签：** #tailwindcss #frontend #css #cihankoc #websatarım #webdesign #html #bootstrap #responsive #tailwind
Tailwind CSS nedir?Tailwind CSS, Adam Wathan tarafından 4 kişilik bir ekiple geliştirilen, özelleştirilebilir yapıya sahip bir CSS kütüphanesidir. Tailwind CSS temel tüm css özelliklerini ön tanımlı ve konfigüre edilebilir şekilde sunan, tekrar eden css kullanımlarını engelleyen, html kodunuzdan ayrılmadan hızlı, ölçeklendirilebilir ve modern web arayüzleri oluşturabileğiniz utility-first CSS framework'üdür.Note: Bu eğitim serisi geliştirilmeye devam etmektedir. Şu anda tüm konuların hazırlanmadığını belirtmek isterim.Tailwind CSS'in diğerlerinden ayıran fark nedir?Bootstrap, Semantic UI, Bulma ve Foundation'dan farklı olarak bir UI Kit değildir, içerisinde hazır bir tema ile gelmez. Tailwind'de, UI KIT yerine daha low-level tasarım abstraction'ları vardır. Bootstrap, Semantic UI, Bulma vb. klasik css frameworklerinin aksine sizlere button, navigation, card, accordion gibi UI componentler sunmaz. Bu componentleri ön tanımlı utility class'ları kullanarak kendiniz istediğiniz şekilde kolay bir şekilde oluşturabilirsiniz. Özellikle react, vue, angular gibi component bazlı tool'lar ile çalışıyorsanız component'larınıza yeni bir özellik eklemek çok daha kolay. Değişik yapmak istediğiniz zaman layout'u bozar mı, istenmedik bir yeri etkilenir mi gibi sorunlarla da uğraşmanıza gerek kalmaz. Çünkü component'imiz kendi kendini izole etmiş oluyor.Tailwind'in temel özellikleri:Daha detaylı çalışabilmeyi sağladığından dolayı daha fazla esneklik sağlar.Birleşen(Component) oluşturmaya çok elverişlidir.Tüm elementleri responsive dizayna uyumludur.Genişletilebilir ve özelleştirilebilir yapıya sahiptir.Proje 1 - Lamborghini araba sitesi - Responsive Tailwind css ile bir Lamborghini araba sitesi yapıyor olacağız. Sonrasında gece ve gündüz modu için light/dark modu özelliğini aktif hale getireceğiz.Proje 3 - Müzik web sitesi Tailwind css ile responsive müzik web sitesi tasarımını birlikte kodluyor olacağız. Burada en önemli odaklanacağımız kısım responsive olarak masaüstü(desktop) ve mobil cihazlar için bir menünün geliştirilmesi olacak. Buna ek olarak bir alana background görsellerinin nasıl eklendiğini öğreniyor olacaksınız.Proje 2 - Responsive Personel Portfolio WebsiteBu eğitim serisi hazırlanıyor. Uyarı: Eğitimi hazırladıktan sonra ses kalitesinin düşük olduğunu fark ettim. Bu sebeple eğitimi her zaman en düşük ücret ile yayınlamayı planlıyorum. Eğitimi satın alırken bunu göz önünde bulundurmanızı rica ederim. #tailwindcss #frontend #css #cihankoc #websatarım #webdesign #html #bootstrap #responsive #tailwind
