Продвинутый CSS и Sass: Поднимите свой CSS на следующий уровень! - Видеоуроки

Advanced CSS and Sass: Take Your CSS to the Next Level!
Duration 28:06:58
Открыть все курсы от udemy
Облачный хостинг на SSD с лучшей техподдержкой! Развернуть приложение в один клик

Advanced CSS and Sass: Take Your CSS to the Next Level! - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Welcome to the Most Advanced CSS Course Ever! 00:03:54
  • Урок 2. Setting up Our Tools 00:02:53
  • Урок 3. Section Intro 00:00:46
  • Урок 4. Project Overview 00:05:43
  • Урок 5. Building the Header - Part 1 00:24:24
  • Урок 6. Building the Header - Part 2 00:17:07
  • Урок 7. Creating Cool CSS Animations 00:19:20
  • Урок 8. Building a Complex Animated Button - Part 1 00:15:57
  • Урок 9. Building a Complex Animated Button - Part 2 00:12:52
  • Урок 10. Section Intro 00:01:39
  • Урок 11. Three Pillars of Writing Good HTML and CSS (Never Forget Them!) 00:04:22
  • Урок 12. How CSS Works Behind the Scenes: An Overview 00:04:33
  • Урок 13. How CSS is Parsed, Part 1: The Cascade and Specificity 00:12:34
  • Урок 14. Specificity in Practice 00:05:56
  • Урок 15. How CSS is Parsed, Part 2: Value Processing 00:15:45
  • Урок 16. How CSS is Parsed, Part 3: Inheritance 00:04:06
  • Урок 17. Converting px to rem: An Effective Workflow 00:14:01
  • Урок 18. How CSS Renders a Website: The Visual Formatting Model 00:12:46
  • Урок 19. CSS Architecture, Components and BEM 00:09:18
  • Урок 20. Implementing BEM in the Natours Project 00:05:15
  • Урок 21. Section Intro 00:01:03
  • Урок 22. What is Sass? 00:04:59
  • Урок 23. First Steps with Sass: Variables and Nesting 00:25:23
  • Урок 24. First Steps with Sass: Mixins, Extends and Functions 00:17:06
  • Урок 25. A Brief Introduction to the Command Line 00:11:22
  • Урок 26. NPM Packages: Let's Install Sass Locally 00:13:49
  • Урок 27. NPM Scripts: Let's Write and Compile Sass Locally 00:13:11
  • Урок 28. The Easiest Way of Automatically Reloading a Page on File Changes 00:06:23
  • Урок 29. Section Intro 00:00:56
  • Урок 30. Converting Our CSS Code to Sass: Variables and Nesting 00:11:18
  • Урок 31. Implementing the 7-1 CSS Architecture with Sass 00:17:34
  • Урок 32. Review: Basic Principles of Responsive Design and Layout Types 00:04:39
  • Урок 33. Building a Custom Grid with Floats 00:37:04
  • Урок 34. Building the About Section - Part 1 00:23:26
  • Урок 35. Building the About Section - Part 2 00:21:52
  • Урок 36. Building the About Section - Part 3 00:17:31
  • Урок 37. Building the Features Section 00:30:20
  • Урок 38. Building the Tours Section - Part 1 00:25:29
  • Урок 39. Building the Tours Section - Part 2 00:31:01
  • Урок 40. Building the Tours Section - Part 3 00:16:37
  • Урок 41. Building the Stories Section - Part 1 00:19:41
  • Урок 42. Building the Stories Section - Part 2 00:14:15
  • Урок 43. Building the Stories Section - Part 3 00:13:50
  • Урок 44. Building the Booking Section - Part 1 00:18:20
  • Урок 45. Building the Booking Section - Part 2 00:18:38
  • Урок 46. Building the Booking Section - Part 3 00:23:11
  • Урок 47. Building the Footer 00:15:58
  • Урок 48. Building the Navigation - Part 1 00:29:38
  • Урок 49. Building the Navigation - Part 2 00:13:14
  • Урок 50. Building the Navigation - Part 3 00:15:37
  • Урок 51. Building a Pure CSS Popup - Part 1 00:25:14
  • Урок 52. Building a Pure CSS Popup - Part 2 00:16:56
  • Урок 53. Section Intro 00:01:01
  • Урок 54. Mobile-First vs Desktop-First and Breakpoints 00:17:36
  • Урок 55. Let's Use the Power of Sass Mixins to Write Media Queries 00:28:09
  • Урок 56. Writing Media Queries - Base, Typography and Layout 00:26:40
  • Урок 57. Writing Media Queries - Layout, About and Features Sections 00:12:34
  • Урок 58. Writing Media Queries - Tours, Stories and Booking Sections 00:20:27
  • Урок 59. An Overview of Responsive Images 00:05:42
  • Урок 60. Responsive Images in HTML - Art Direction and Density Switching 00:10:15
  • Урок 61. Responsive Images in HTML - Density and Resolution Switching 00:17:22
  • Урок 62. Responsive Images in CSS 00:11:43
  • Урок 63. Testing for Browser Support with @supports 00:21:43
  • Урок 64. Setting up a Simple Build Process with NPM Scripts 00:20:56
  • Урок 65. Wrapping up the Natours Project: Final Considerations 00:13:59
  • Урок 66. Section Intro 00:01:04
  • Урок 67. Why Flexbox: An Overview of the Philosophy Behind Flexbox 00:06:32
  • Урок 68. A Basic Intro to Flexbox: The Flex Container 00:15:09
  • Урок 69. A Basic Intro to Flexbox: Flex Items 00:10:35
  • Урок 70. A Basic Intro to Flexbox: Adding More Flex Items 00:06:15
  • Урок 71. Project Overview 00:07:15
  • Урок 72. Defining Project Settings and Custom Properties 00:13:41
  • Урок 73. Building the Overall Layout 00:12:01
  • Урок 74. Building the Header - Part 1 00:18:00
  • Урок 75. Building the Header - Part 2 00:14:49
  • Урок 76. Building the Header - Part 3 00:12:27
  • Урок 77. Building the Navigation - Part 1 00:11:37
  • Урок 78. Building the Navigation - Part 2 00:16:51
  • Урок 79. Building the Hotel Overview - Part 1 00:15:19
  • Урок 80. Building the Hotel Overview - Part 2 00:15:27
  • Урок 81. Building the Description Section - Part 1 00:12:54
  • Урок 82. Building the Description Section - Part 2 00:19:39
  • Урок 83. Building the User Reviews Section 00:22:53
  • Урок 84. Building the CTA Section 00:16:55
  • Урок 85. Writing Media Queries - Part 1 00:19:28
  • Урок 86. Writing Media Queries - Part 2 00:16:28
  • Урок 87. Wrapping up the Trillo Project: Final Considerations 00:14:46
  • Урок 88. Section Intro 00:01:00
  • Урок 89. Why CSS Grid: A Whole New Mindset 00:05:16
  • Урок 90. Quick Setup for This Section 00:02:12
  • Урок 91. Creating Our First Grid 00:12:16
  • Урок 92. Getting Familiar with the fr Unit 00:10:01
  • Урок 93. Positioning Grid Items 00:07:27
  • Урок 94. Spanning Grid Items 00:09:50
  • Урок 95. Grid Challenge 00:02:49
  • Урок 96. Grid Challenge: A Basic Solution 00:11:09
  • Урок 97. Naming Grid Lines 00:09:41
  • Урок 98. Naming Grid Areas 00:11:04
  • Урок 99. Implicit Grids vs. Explicit Grids 00:10:40
  • Урок 100. Aligning Grid Items 00:09:58
  • Урок 101. Aligning Tracks 00:13:00
  • Урок 102. Using min-content, max-content and the minmax() function 00:16:20
  • Урок 103. Responsive Layouts with auto-fit and auto-fill 00:10:58
  • Урок 104. Project Overview and Setup 00:11:32
  • Урок 105. Building the Overall Layout - Part 1 00:15:35
  • Урок 106. Building the Overall Layout - Part 2 00:24:32
  • Урок 107. Building the Features Section - Part 1 00:13:02
  • Урок 108. Building the Features Section - Part 2 00:20:28
  • Урок 109. Building the Story Section - Part 1 00:18:01
  • Урок 110. Building the Story Section - Part 2 00:11:39
  • Урок 111. Building the Homes Section - Part 1 00:15:47
  • Урок 112. Building the Homes Section - Part 2 00:18:52
  • Урок 113. Building the Gallery - Part 1 00:15:25
  • Урок 114. Building the Gallery - Part 2 00:12:28
  • Урок 115. Building the Footer 00:12:34
  • Урок 116. Building the Sidebar 00:05:09
  • Урок 117. Building the Header - Part 1 00:16:17
  • Урок 118. Building the Header - Part 2 00:09:53
  • Урок 119. Building the Realtors Section 00:11:23
  • Урок 120. Writing Media Queries - Part 1 00:17:13
  • Урок 121. Writing Media Queries - Part 2 00:18:39
  • Урок 122. Browser Support for CSS Grid 00:08:36
  • Урок 123. Wrapping up the Nexter Project: Final Considerations 00:06:45
  • Урок 124. See You Next Time, CSS Master! 00:02:29

Самый продвинутый и современный курс CSS в Интернете: анимация, flexbox, отзывчивый дизайн и многое другое.  Вы какое-то время писали CSS, но хотите перенести свою игру на следующий уровень? Чувствуете ли вы путаницу с CSS-жаргоном, как наследование, специфика или каскад? Что если бы был один ресурс, одно место, где вы могли бы изучить все современные методы и свойства CSS, о которых вы читали? Хорошая новость: вот он! Добро пожаловать в «Advanced CSS and Sass», самый продвинутый, самый современный и самый полный курс CSS в Интернете. Тут все, что вам нужно в продвинутом курсе CSS, и многое другое.

Вы изучите сложные анимации CSS, передовые гибкие методы проектирования, раскладки Flexbox, Sass, CSS-архитектуру, фундаментальные концепции CSS и многое другое.

Как и во всех моих курсах, вы будете строить красивые и тщательно разработанные проекты, которые заставят вас гордиться собой и оставить вас готовыми самостоятельно строить сложные проекты.

По окончании этого курса вы будете:

  • 1) Будьте в курсе самых современных и продвинутых свойств и методов CSS;
  • 2) освоите передовые технологии компоновки Flexbox и CSS Grid;
  • 3) Будете готовы к построению гибких макетов для всех типов устройств и ситуаций;
  • 4) Поймете как CSS работает за кулисами;
  • 5) Научитесь архитектить большие базы CSS для повторного использования и ремонтопригодности с помощью Sass.

Обратите внимание, что этот курс НЕ для абсолютных новичков, поэтому вы уже должны быть на промежуточном уровне в HTML и CSS (пожалуйста, просмотрите мой другой курс, если это не так).

Этот курс является очень масивным, более 20 часов видео. Вот что вы узнаете:

  • Тонны современных передовых технологий CSS для создания потрясающих дизайнов и эффектов;
  • Расширенные анимации CSS с помощью  @keyframes, animation и transition;
  • Расширенные селектора CSS, псевдоклассы и псевдоэлементы, необходимые для современной разработки CSS;
  • Как CSS работает за кулисами: каскад, специфика, наследование, обработка значений, модель визуального форматирования, модель окна, блочная модель, схемы позиционирования и тд;
  • Архитектура CSS: правило 7-1, компонентный дизайн, методология BEM, написание многоразового, поддерживаемого и масштабируемого кода;
  • Введение в Sass: переменные, вложенность, импорт, mixins, функции, расширения и многое другое;
  • Использование Sass в реальных проектах: установка глобальных переменных, построение для повторного использования, архитектура CSS и управление медиа-запросами;
  • Экосистема NPM: настройка процесса разработки для компиляции Sass и автоматической перезагрузки браузера и создание процесса сборки для конкатенации, префикса и сжатия файлов CSS;
  • Современный отзывчивый дизайн: fluid grids, типы макетов, гибкие изображения, использование медиа-запросов для тестирования различной ширины экрана, плотности пикселей и сенсорные возможности;
  • Расширенные оперативные рабочие процессы разработки: мобильные стратегии - сначала против настольных стратегий, выбор контрольных точек, модулей em vs rem и функциональных запросов для проверки поддержки браузера;
  • Отзывчивые изображения в HTML и CSS для более быстрой загрузки: переключение разрешения, переключение плотности и тд;
  • SVG-изображения в HTML и CSS: как и почему использовать SVG, спрайты SVG, изменяя цвета SVG в CSS и лучшие практики;
  • Видео в HTML и CSS: создание фонового видеоэффекта;
  • Раскладки Flexbox: основные концепции, введение в гибкие контейнеры и специальные свойства гибких элементов, усовершенствованные методы позиционирования, применяемые к огромному реальному проекту;
  • CSS Grids: основные понятия, сетка CSS и flexbox и методы компоновки, применяемые к реальному проекту. Только эта часть может быть целым курсом!

Зачем вам проходить этот курс?

Вероятно потому, что CSS так легко начать. Фактически, большинство разработчиков сильно недооценивают важность и силу CSS. Но ничто не могло быть дальше от истины!

CSS - это то, что заставляет наш дизайн воплощаться в жизнь. И мы можем так много сделать с этим! Освоение продвинутых технологий, таких как flexbox, CSS grid и анимация, даст вам преимущество перед многими разработчиками CSS, которые все еще используют устаревшие методы.

Кроме того, CSS может стать настоящим кошмаром, когда вы пытаетесь освоить его, и когда вам нужно поддерживать крупные проекты. Поэтому хорошее понимание фундаментальных концепций является абсолютным обязательным требованием для любого серьезного внешнего разработчика.

И этот курс поможет вам со всем этим! 

Итак, вы должны пройти этот курс? Ответ, скорее всего, ДА!

И я собрал так много контента в этот курс, что независимо от того, начинаете ли вы, или если вы уже являетесь опытным разработчиком интерфейсов, в этом курсе определенно будет что-то для вас.

Твоя оценка

156 4
Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

30-11--0001 en 17 уроков
leveluptutorials Modern CSS Layouts
В этой серии уроков «Современные CSS Сетки» мы покроем тему современных CSS Layouts. Мы будем строить сетки таких сайтов как Facebook, Instagram и моего персонального сайта (leveluptutorials.com) используя разные техники - от flexbox до CSS-Grid. Мы рассмотрим все самое свежое и самое лучшее что есть сейчас в CSS.
Duration 03:34:32
21 0
11-12-2017 en 112 уроков
frontendmasters CSS In-Depth, v2
С пониманием того как правильно использовать CSS, вы можете сократить время разработки, сократить расходы на обслуживание и улучшить SEO, доступность и производительность сайта.

В этом курсе вы узнаете о возможностях CSS3, в том числе о новых методах компоновки, анимации, прогрессивных принципах проектирования, методах экономии времени и средствах отладки и разработки.

Duration 10:38:01
12 1
30-11--0001 en 60 уроков
frontendmasters CSS Grids and Flexbox in Responsive Web Design
Мы начнем с быстрого обзора текущего стандарта отрасли: сеток построеной на флоатах . Мы рассмотрим как быстро создать такую сетку плюс преимущества и недостатки такого подхода. Мы также рассмотрим медиа-запросы и отзывчивые изображения, включая новый тег и Picturefill. Мы быстро перейдем к Flexbox, сначала исследуем как работает Flexbox, так как он сильно отличается от float. Мы будем верстать простую сетчатую систему с помощью Flexbox, и...
Duration 05:37:50
29 0
30-11--0001 ru 76 уроков
webformyself Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки
Препроцессоры Sass и Less упрощают вашу работу в разы. Они ускоряют написание css, добавляя вам ряд преимущест, таких как переменные, миксины. вложенные селекторы, математические функции, сообщения об ошибках в написании кода и тд. Во время использования Less или Sass в разработке проекта вы получите удобное написание кода, который будете писать в разы быстрей по сравнению с тем, если бы вы использовали обычный css, также вы сможете избежать...
Duration 15:11:36
53 2
30-11--0001 en 43 урока
frontendmasters CSS3 In-Depth
Узнайте наскольоко глубока кроличья нора CSS3. Автор курса глубоко погружается в различные компоненты CSS3, в том числе: селекторы, спецификации, media queries, отладку, цвета, шрифты, тени, текстовые эффекты, границы, фоны, градиенты, преобразования, переходы, анимации ... и многое многое другое! Приятного просмотра.
Duration 06:10:00
10 0
30-11--0001 en 30 уроков
cssanimation.rocks Level up your CSS animation skills
Повысьте свои навыки анимации CSS! Этот видеокурс даст вам практический опыт, который вам нужно повысить и продать свои навыки анимации в качестве дизайнера или разработчика. В течение нескольких часов пошаговых руководств мы вместе создадим анимированную целевую страницу и узнаем, как анимация может оживить ее.Это практический курс, полный реальных загружаемых примеров кода. Вы сможете взять знания, а также реальный рабочий код, в свои проекты...
Duration 03:40:14
24 0
30-11--0001 en 265 уроков
udemy CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
Изучите CSS в первый раз или поднимите свои навыки CSS и погрузитесь еще глубже. КАЖДЫЙ веб-разработчик должен знать CSS.CSS - сокращение от Cascading Style Sheets - это «язык программирования», который вы используете, чтобы превратить ваши необработанные HTML-страницы в настоящие красивые веб-сайты.Этот курс охватывает все это - мы начинаем с самых основ (что такое CSS?) Как это работает? Как вы его используете? и постепенно...
Duration 20:46:03
50 0
30-11--0001 en 134 урока
kevin powell Sass - from beginner to real world
Sass стал основным языком для изучения начинающими веб-разработчиками. Он помогает вам быстрее писать свой код, делать вещи, которые иногда кажутся волшебными, а также является частью многих современных рабочих процессов. Этот курс расскажет вам, как использовать Sass, как интегрировать его в рабочий процесс и подтолкнуть вас к трудностям, помогая вам стать лучшим frontend-разработчиком.
Duration 08:02:59
15 0
10-01-2019 en 107 уроков
udemy Modern HTML & CSS From The Beginning
Создавайте современные адаптивные веб-сайты и пользовательские интерфейсы с помощью HTML5 и CSS3, включая Flexbox и CSS Grid. Этот курс предназначен как для начинающих, так и для опытных разработчиков, которые хотят научиться создавать адаптивные веб-сайты и пользовательские интерфейсы с использованием современных технологий HTML5 и CSS3 +, таких как Flexbox и CSS Grid. Этот курс включает в себя часы как обучения, так и изучения, а также проекты...
Duration 17:03:44
3 0
21-11-2018 en 66 уроков
udemy Build Responsive Real World Websites with HTML5 and CSS3
Самый простой способ шаг за шагом освоить современный веб-дизайн, HTML5 и CSS3.  # 1 HTML5 и CSS3 курс в официальном рейтинге Udemy!
Duration 11:52:45
1 0

Последнее добавленное

Полный курс по программированию на Python для начинающих

Полный курс по программированию на Python для начинающих

en
Изучите Python для AI, машинного обучения, науки о данных и разработки приложений. Математики, ученые и инженеры любят Python. Почему? Потому что он делает сложные вычисления и повторяющиеся задачи действительно простыми для написания и выполнения. Разработчики любят его, потому что он простой...
Python для анализа данных

Python для анализа данных

ru
«Данные — это новая нефть». Они помогают усовершенствовать продукт, привлечь новых пользователей и являются драйвером роста любой компании. Компании во всем мире используют Python для сбора и анализа данных. В Uber, Yandex и Facebook, знание Python является обязательным требованием при приеме...
Flutter и Dart: полноценное мобильное приложение™

Flutter и Dart: полноценное мобильное приложение™

en
Изучение того, как создавать приложения для iOS и Android, с полным демонстрационным примером на основе Dart и Flutter Framework. Flutter - это SDK для мобильных приложений, предназначенный для создания высококачественных собственных интерфейсов на iOS и Android в рекордно короткие сроки. Flutter ра
Flutter: кроссплатформенное приложение iOS / Android

Flutter: кроссплатформенное приложение iOS / Android

en
Создавайте кроссплатформенные красивые нативные приложения в рекордно короткие сроки. Flutter - это SDK для мобильных приложений, в комплекте с фреймворком, виджетами и инструментами, который предоставляет разработчикам простой и продуктивный способ создания и развертывания красивых мобильных...
Программирование на Dart от новичка до эксперта

Программирование на Dart от новичка до эксперта

en
Изучите Dart с уровня Beginner и станьте экспертом, который может начать изучать Flutter, AngularDart и многое другое. В этом курсе вы узнаете все, что вам нужно знать о Dart. Dart - это язык, который становится популярным день ото дня, и разработчики по всему миру стремятся к этому языку...
Понятный JavaScript (Middle)

Понятный JavaScript (Middle)

ru
Хочешь стать JavaScript разработчиком, систематизировать знания и выйти на совершенно новый уровень! Курс «Понятный JavaScript» — это комплексная программа обучения, которая позволит тебе полностью изучить с нуля главный язык Frontend разработчика. Уже через 3 месяца ты будешь знать JavaScript...
chat
logo