|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/advanced-css-and-sass/
课程评论：没有评论
课程名称：高级CSS和Sass：Flexbox、Grid、动画及更多！ 课程概述：您是否已经编写CSS一段时间，但想要进一步提升自己的技能？对于CSS中的术语，如继承、特指性（specificity）或层叠（cascade），您是否感到困惑？现在，您可以通过这门“高级CSS和Sass”课程来学习所有您一直想了解的现代高级CSS技术和属性。 本课程将教授复杂的CSS动画、高级响应式设计技术、Flexbox布局、Sass、CSS架构等基础概念，您将构建美观且精心设计的项目，令您为自己的成就感到自豪。课程结束后，您将能： 1) 掌握最新和最先进的CSS属性和技术； 2) 熟练运用前沿布局技术Flexbox和CSS Grid； 3) 为各种设备和场景构建响应式布局； 4) 深入理解CSS的底层工作原理； 5) 能使用Sass架构大型CSS代码库，以便重用和维护。 请注意，此课程不适合完全初学者，您应具备HTML和CSS的中级水平（如果没有，请查看我的其他课程）。课程内容丰富，总时长超过28小时，具体学习内容包括： - 现代CSS技术：clip-path、background-clip、mask-image、background-blend-mode、shape-outside、filter等； - 高级CSS动画及过渡效果； - 高级CSS选择器、伪类和伪元素； - CSS的工作原理：层叠、特指性、继承、视觉格式模型、盒模型等； - CSS架构：7-1规则、组件化设计、BEM方法论等； - Sass基础：变量、嵌套、部分、导入、混入、函数等； - 真实项目中使用Sass：全局变量设置、架构CSS； - NPM生态系统：Sass编译和自动浏览器重载的开发流程； - 现代响应式设计的流体网格、灵活图片及媒体查询； - 高级响应式设计工作流程：移动优先与桌面优先策略； - HTML和CSS中的响应式图像及SVG图像； - Flexbox和CSS Grid布局的应用和技巧。 本课程旨在帮助开发者提升CSS技能，并使其能够在维护大型项目时得心应手。课程内容庞大，无论您是刚入门还是有经验的前端开发者，这里都能找到对您有帮助的知识。 课程特色包括： - 28小时高清课程视频，便于搜索和引用； - 专业英文字幕； - 可下载的设计资产、入门代码和每部分的最终代码； - 理论视频的可下载幻灯片； - 免费的课程问答支持； - 包含小挑战追踪进度。 这一切都等待着您来发现，期待您的加入！
Have you been coding CSS for some time, but want to take your game to the next level? Do you feel confused with CSS jargon like inheritance, specificity, or the cascade?What if there was one resource, one place, where you could learn all the advanced and modern CSS techniques and properties you've been reading about?Good news: there is!Welcome to "Advanced CSS and Sass", the most advanced, the most modern, and the most complete CSS course on the internet. It's everything you want in an advanced CSS course, and more.You will learn complex CSS animations, advanced responsive design techniques, flexbox layouts, Sass, CSS architecture, fundamental CSS concepts, and so much more.Like in all my courses, you will build beautiful and carefully designed projects, that will make you proud of yourself and leave you ready to build complex projects on your own.After finishing this course, you will:1) Be up to speed with the most modern and advanced CSS properties and techniques;2) Have mastered the cutting-edge layout technologies Flexbox and CSS Grid;3) Be ready to build responsive layouts for all kinds of devices and situations;4) Truly understand how CSS works behind the scenes;5) Be able to architect large CSS codebases for reusability and maintainability using Sass.Please note that this course is NOT for absolute beginners, so you should already be at an intermediate level in HTML and CSS (please check out my other course if that's not the case). This course is massive, coming in at 28+ hours. Here is exactly what you will learn:Tons of modern cutting-edge CSS techniques to create stunning designs and effects: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties;Advanced CSS animations with @keyframes, animation, and transition;Advanced CSS selectors, pseudo-classes, and pseudo-elements required for modern CSS development;How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes, and stacking contexts;CSS architecture: The 7-1 rule, component-based design, the BEM methodology, writing reusable, maintainable, and scalable code;Introduction to Sass: variables, nesting, partials, imports, mixins, functions, extends, and more;Using Sass in real-world projects: setting global variables, building for reusability, architecting CSS, and managing media queries;The NPM ecosystem: setting up a development process to compile Sass and automatic browser reload, and creating a build process to concatenate, prefix, and compress CSS files;Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities, and touch capabilities;Advanced responsive design workflows: mobile-first vs desktop-first strategies, selecting breakpoints, em vs rem units and feature queries to test for browser support;Responsive images in HTML and CSS for faster pageloads: resolution switching, density switching, art direction;SVG images in HTML and CSS: how and why to use SVG, generating SVG sprites, changing SVG colors in CSS and best practices;Videos in HTML and CSS: building a background video effect;Flexbox layouts: main concepts, introduction to both flex container and flex item-specific properties, advanced positioning techniques applied to a huge real-world project;CSS Grid layouts: main concepts, CSS grid vs flexbox, and layout techniques applied to a real-world project. This part alone could be an entire course! Why should you take this course?So you saw that the course is absolutely full-packed with content. But maybe you're still not sure if you should actually learn advanced CSS?That's probably because CSS is so easy to get started with. In fact, most developers highly underestimate the importance and power of CSS. But nothing could be further away from the truth!CSS is what makes our design come to life. And there is so much we can do with it! Mastering advanced techniques like flexbox, CSS grid, and animations, will give you an edge over many CSS developers out there who still use outdated methods.Plus, CSS can become a real nightmare when you try to master it, and when you have to maintain large projects. So having a good grasp on fundamental concepts is an absolute must for any serious front-end developer.And this course will help you with all that!So, should you take this course? The answer is most likely a big YES!And I packed so much content into this course, that no matter if you're just starting out, or if you're already an experienced front-end developer, there is definitely gonna be something for you in this course. And this is what you get by signing up today:28h of Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)Professional English captions (not the auto-generated ones)Downloadable design assets + starter code and final code for each sectionDownloadable slides for theory videos (not boring, I promise!)Free support in the course Q & ALots of small challenges are included in the videos so you can track your progress. If you're still with me at this point, then please watch the promo video to take a look at the course projects, and I promise you will be amazed:)After that, I hope to welcome you as a new student in my course. I'm sure you're gonna love it!
