|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/css-und-sass/
课程评论：没有评论
**Coursera 课程摘要：高级 CSS：动画、Flexbox、SVG、3D、SASS 等** 本课程专为已有 HTML 和 CSS 基础，并希望进一步提升网页开发技能的学习者设计。课程将深入探讨现代 CSS3 特性，包括 3D 效果、动画、Flexbox 和 Grid 布局，以帮助您创建更具吸引力的网页。 **课程亮点：** * **全面覆盖现代 CSS 特性：** 一步步学习 CSS 基础知识及所有现代 CSS 特性，并掌握各种 CSS 技巧，提高开发效率。 * **实践导向学习：** 课程注重实操，通过一个完整的项目，从零开始学习，并实现诸如可伸缩侧边菜单、可展开内容按钮和动画对话框等交互式功能，无需 JavaScript 即可完成。 * **深入 CSS 底层原理：** 课程从其他 HTML 课程结束的地方开始，专注于现代 CSS，探索其技术极限。 * **培养市场需求技能：** 完成课程后，您将成为一名能够自信实现复杂设计的抢手 Web 开发人员，并深入理解 CSS 的工作原理。 **主要学习内容：** * **CSS 基础：** 深入理解继承、特异性和层叠。 * **响应式设计：** 掌握桌面优先（Desktop-first）和移动优先（Mobile-first）布局方法。 * **渐变（Gradients）：** 创建精美的线性渐变和径向渐变，用于背景或文字颜色。 * **动画：** 制作流畅的悬停效果和 `@keyframes` 动画，并学习优化动画性能的技巧。 * **3D 效果：** 在 3D 空间中创建和操作元素，实现更具视觉冲击力的效果。 * **Flexbox：** 以更优雅的方式实现元素的横向排列，替代 `float: left`。 * **CSS Grid：** 轻松创建网格布局，实现响应式设计。 * **元素定位：** 掌握多元素叠加布局，例如实现图片和文字的叠加效果。 * **CSS 技巧：** 学习实用的 CSS 技巧，包括交互式菜单、CSS 调试方法。 * **SASS：** 学习使用 SASS 结构化 CSS 代码，即使在大型项目中也能保持清晰和易于管理，包括变量、Mixins 和颜色处理。 * **完整项目案例：** 从头到尾开发一个实际项目。 完成本课程后，您将能够轻松实现复杂的网页设计，并具备成为一名更高效、更具竞争力的 Web 开发人员所需的全部技能。
Du hast schon etwas mit HTML und CSS entwickelt, und möchtest deine Kenntnisse jetzt ausbauen? Dir sind moderne CSS3-Features wie 3D-Effekte, Animationen, Flexbox oder Grid noch neu? Oder du möchtest einfach nur noch schickere Webseiten entwickeln?Dann ist dieser Kurs genau das Richtige für dich.Dies ist einer der modernsten und umfangreichsten Kurse zum Thema fortgeschrittenes CSS auf Udemy. Schritt für Schritt lernst du nicht nur die Grundlagen von CSS, sondern auch alle modernen CSS-Features - inklusive diverser CSS-Tricks, mit denen du als Webentwickler noch effizienter wirst.Hierbei lernst du alles komplett praxisorientiert und am Beispiel - das Projekt, was wir in dem Kurs entwickeln, kann sich echt sehen lassen. Auch entwickeln wir interaktive Features wie ein ausfahrbares Seitenmenü, Buttons die weiteren Inhalt aufklappen, und einen Dialog, der sich animiert über die Seite legt - und zwar ohne dass für diese Funktionalität JavaScript im Browser benötigt wird.Dieser Kurs hört fängt dort an, wo andere HTML-Kurse aufhören: Hier lernst du keine HTML-Grundlagen, sondern wir gehen hier explizit auf modernes CSS ein - bis an die Grenzen des technisch machbaren.Nach Abschluss dieses Kurses....bist du ein gefragter Webentwickler, der auch komplexeste Designs souverän umsetzen kann.hast du ein umfangreiches Verständnis, wie CSS "unter der Haube" funktioniert.bist du derjenige, der auch noch so komplexe Layouts problemlos umsetzen kann.kannst du Designs entwickeln, die nicht nur auf Desktop- sondern auch auf Mobilgeräten gut aussehen (Responsive Design).behältst du dank SASS auch bei riesigen Projekten noch den ÜberblickWas lernst du alles in diesem Kurs?CSS Grundlagen: Vererbung, Spezifität, CascadingResponsive Design: Desktop-first vs. Mobile-firstGradients: Erstelle schicke Farbverläufe, als Hintergrundbild oder als SchriftfarbeAnimationen: Erstelle schicke Animationen, als Hover-Effekt oder als @keyframes-Animation. Inklusive diverser Tricks, damit deine Animationen immer flüssig dargestellt wird3D-Effekte: Erstelle noch schickere Animationen, und bewege Elemente im 3D-RaumFlexbox: Platziere Elemente nebeneinander - sehr viel eleganter als mit einem "float: left"CSS-Grid: Platziere Elemente automatisch in einem Grid - ideal für Responsive DesignPositionierung von Elementen: Oft müssen wir mehrere Elemente übereinander legen, z.B. um ein Bild von Text überlagern zu lassen. Lerne alles, was du hierzu wissen musst!Diverse CSS-Tricks:Interaktive MenüsCSS debuggenSASS: Strukturiere deinen CSS-Code so, dass du auch bei größeren Projekten noch den Überblick behältstVariablenMixinsFarben abändern (sass:color)Entwickle ein komplettes Praxisprojekt von A-Z
