|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/praxisorientierter-tailwind-kurs/
课程评论：没有评论
**课程名称：** Praxisorientierter Tailwind CSS Kurs **课程概述：** 本课程旨在帮助学习者达到 Tailwind CSS 的专家级别。Tailwind CSS 因其生成的 CSS 文件体积小，有助于提高页面加载速度，从而在与 Bootstrap 等类似竞争对手相比时更受欢迎。 课程采用实践驱动的教学方法，每个理论知识点都配有相应的实践环节。 **课程主题涵盖：** * **Tailwind 核心概念** * **安装与配置:** * CDN 安装 * Node.js 和 Prettier 安装 * 配置：Content, Safelist, Blocklist, Theme, 自定义动画 * 插件 * **样式属性:** * **颜色:** 背景色、文本颜色 * **悬停 (Hover) 状态** * **间距:** Padding, Margin, Space Between * **尺寸:** 宽度 (Width), 高度 (Height), 最小/最大宽度/高度 (Min/Max Width/Height), Size * **Flexbox:** Flex Display, Gap, Flex Direction, Flex Wrap, Flex Basis, Grow, Shrink, Order * **Grid:** Grid Display, Grid Cols & Rows, Grid Span, Grid Start & End, Justify Content, Align Content, Justify Items, Align Items, Justify Self, Align Self * **圆角 (Radius) 和边框 (Border)** * **阴影 (Shadow)、环形 (Ring)、轮廓 (Outline)、焦点 (Focus)、焦点内 (Focus-Within)、活动 (Active)、组 (Group)、同级 (Peer)** * **装饰 (Decoration)** * **字体:** 字体大小 (Font Size), 字体粗细 (Font Weight), 文本对齐 (Text Align), 字体系列 (Font Family), 字间距 (Letter Spacing), 文本溢出 (Text Overflow), 行高 (Line Clamp) * **断点 (Breakpoints) 和容器 (Container)** * **显示 (Display) 和定位 (Position)** * **绝对定位 (Abstände):** Top, Right, Bottom, Left, Inset * **Z-Index** * **溢出 (Overflow) 和滚动 (Overscroll)** * **对象适配 (Object Fit) 和对象位置 (Object Position)** * **渐变 (Gradient)** * **SVG** * **Transforms:** Translate, Rotate, Scale, Origin * **Transitions:** Property, Duration, Function, Delay * **Animations:** Animation * **光标 (Cursor)** * **选择 (Select)** * **Filters:** Blur, Hue, Grayscale * **指令 (Directives):** * Base, Components, Utilities * Fonts (via Link, via Download) **教学目标：** 通过系统的学习和大量的实践练习，使学习者熟练掌握 Tailwind CSS 的各项功能，能够高效地构建现代化、响应式的网页界面。
Hallo allerseits,in dem Kurs möchte ich euch Tailwind beibringen. Das Ziel ist es euch in Tailwind auf ein Expertenniveau zu bringen. Tailwind gewinnt immer mehr an Beliebtheit, da es im Vergleich zum ähnlichen Konkurrenten Bootstrap die generierte CSS-Datei minimal hält und dadurch den PageSpeed-Wert verbessert.Der Kurs orientiert sich an praxisorientierten Lehrmethoden, es gibt zu jedem theoretischen Inhalt einen praktischen Part.Es werden die folgenden Themen behandelt: Tailwind KonzepteSetup mit CDNSetup mit Node.js und PrettierColor in Tailwind Background Color Text ColorHoverSpacing in TailwindPaddingMarginSpace BetweenWidthHeightSizeMin-WidthMax-widthMin-HeightMax-HeightFlex DisplayGapFlex DirectionFlex WrapFlex BasisGrow und ShrinkOrderGrid DisplayGrid Cols und RowsGrid SpanGrid Start und End Justify Content Align ContentJustify Items Align Items Justify Self Align SelfRadiusBorderDividerShadowRingOutlineFocusFocus-WithinActiveGroupPeerDecorationFont SizeFont WeightText AlignFont FamilyLetter SpacingText OverflowLine ClampBreakpointsContainerDisplayPositionAbstände (Top/Right/Bottom/Left/Inset)Z-IndexOverflowOverscrollObject FitObject PositionGradientSvgTransform TranslateTransform RotateTransform ScaleTransform OriginTransition PropertyTransition DurationTransition FunctionTransition DelayAnimationCursorSelectFilter BlurFilter Hue Filter Grayscale Direktiven BaseDirektiven ComponentsDirektiven UtilitiesDirektiven Fonts per LinkDirektiven Fonts per HerunterladenKonfiguration ContentKonfiguration SafelistKonfiguration BlocklistKonfiguration Theme Konfiguration Benutzerdefinierte AnimationenKonfiguration PluginsVielen Dank.
