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

Advanced CSS and Sass: Take Your CSS to the Next Level!
Duration 28:06:58
Открыть все курсы от udemy

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 может стать настоящим кошмаром, когда вы пытаетесь освоить его, и когда вам нужно поддерживать крупные проекты. Поэтому хорошее понимание фундаментальных концепций является абсолютным обязательным требованием для любого серьезного внешнего разработчика.

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

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

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

Твоя оценка

172 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
22 0
11-12-2017 en 112 уроков
frontendmasters CSS In-Depth, v2
С пониманием того как правильно использовать CSS, вы можете сократить время разработки, сократить расходы на обслуживание и улучшить SEO, доступность и производительность сайта.

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

Duration 10:38:01
14 1
30-11--0001 en 60 уроков
frontendmasters CSS Grids and Flexbox in Responsive Web Design
Мы начнем с быстрого обзора текущего стандарта отрасли: сеток построеной на флоатах . Мы рассмотрим как быстро создать такую сетку плюс преимущества и недостатки такого подхода. Мы также рассмотрим медиа-запросы и отзывчивые изображения, включая новый тег и Picturefill. Мы быстро перейдем к Flexbox, сначала исследуем как работает Flexbox, так как он сильно отличается от float. Мы будем верстать простую сетчатую систему с помощью Flexbox, и...
Duration 05:37:50
33 0
30-11--0001 ru 76 уроков
webformyself Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки
Препроцессоры Sass и Less упрощают вашу работу в разы. Они ускоряют написание css, добавляя вам ряд преимущест, таких как переменные, миксины. вложенные селекторы, математические функции, сообщения об ошибках в написании кода и тд. Во время использования Less или Sass в разработке проекта вы получите удобное написание кода, который будете писать в разы быстрей по сравнению с тем, если бы вы использовали обычный css, также вы сможете избежать...
Duration 15:11:36
54 4
30-11--0001 en 43 урока
frontendmasters CSS3 In-Depth
Узнайте наскольоко глубока кроличья нора CSS3. Автор курса глубоко погружается в различные компоненты CSS3, в том числе: селекторы, спецификации, media queries, отладку, цвета, шрифты, тени, текстовые эффекты, границы, фоны, градиенты, преобразования, переходы, анимации ... и многое многое другое! Приятного просмотра.
Duration 06:10:00
12 0
30-11--0001 en 30 уроков
cssanimation.rocks Level up your CSS animation skills
Повысьте свои навыки анимации CSS! Этот видеокурс даст вам практический опыт, который вам нужно повысить и продать свои навыки анимации в качестве дизайнера или разработчика. В течение нескольких часов пошаговых руководств мы вместе создадим анимированную целевую страницу и узнаем, как анимация может оживить ее.Это практический курс, полный реальных загружаемых примеров кода. Вы сможете взять знания, а также реальный рабочий код, в свои проекты...
Duration 03:40:14
30 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
60 0
30-11--0001 en 134 урока
kevin powell Sass - from beginner to real world
Sass стал основным языком для изучения начинающими веб-разработчиками. Он помогает вам быстрее писать свой код, делать вещи, которые иногда кажутся волшебными, а также является частью многих современных рабочих процессов. Этот курс расскажет вам, как использовать Sass, как интегрировать его в рабочий процесс и подтолкнуть вас к трудностям, помогая вам стать лучшим frontend-разработчиком.
Duration 08:02:59
21 0
10-01-2019 en 125 уроков
udemy Modern HTML & CSS From The Beginning
Создавайте современные адаптивные веб-сайты и пользовательские интерфейсы с помощью HTML5 и CSS3, включая Flexbox и CSS Grid. Этот курс предназначен как для начинающих, так и для опытных разработчиков, которые хотят научиться создавать адаптивные веб-сайты и пользовательские интерфейсы с использованием современных технологий HTML5 и CSS3 +, таких как Flexbox и CSS Grid. Этот курс включает в себя часы как обучения, так и изучения, а также проекты...
Duration 20:55:56
22 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
5 0

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

Сертифицированный Microsoft Azure разработчик - экзамен AZ-203

Сертифицированный Microsoft Azure разработчик - экзамен AZ-203

en
Этот курс существует для того, чтобы вы могли приобрести навыки, необходимые для сдачи сертификационного экзамена AZ-203: Разработка решений для Microsoft Azure, который затем принесет вам сертификат Microsoft Certified Developer Associate.
Microsoft Azure Architect Technologies - Экзамен AZ-300

Microsoft Azure Architect Technologies - Экзамен AZ-300

en
Этот курс призван помочь вам освоить необходимые навыки, необходимые для сертификационного экзамена Microsoft Azure AZ-300. Экзамен AZ-300 - это экзамен на уровне экспертов, который проверяет кандидатов на продвинутые знания и опыт работы с различными аспектами Microsoft Azure.
Современный React Bootcamp (с Hooks, React Router и др.)

Современный React Bootcamp (с Hooks, React Router и др.)

en
Следуйте той же программе, которую я преподаю своим студентам в SF. 10+ проектов, включая одно ОГРОМНОЕ приложение! Добро пожаловать на лучший онлайн ресурс для изучения React! Этот курс, опубликованный в апреле 2019 года, является совершенно новым и охватывает последние новости React. Этот курс...
Профессиональный JavaScript, уровень 2 (18 февраля - 25 апреля 2019)

Профессиональный JavaScript, уровень 2 (18 февраля - 25 апреля 2019)

ru
Курс предназначен для тех, кто прошёл «Профессиональный JavaScript, уровень 1», или для разработчиков, желающих поднять свои навыки. После прохождения курса вы будете уверенно создавать современные веб-приложения, а также сможете попробовать себя в качестве наставника на наших курсах.
SymfonyCon 2018 - Лиссабонская Конференция (Видео)

SymfonyCon 2018 - Лиссабонская Конференция (Видео)

en
SymfonyCon 2018 Лиссабон имел огромный успех! Более 900 участников со всего мира собрались вместе, чтобы узнать, встретиться и поделиться своим опытом в Symfony. Более 25 докладчиков выступили по различным темам: от нового веб-сервера Symfony до Messenger, API-платформы и многого другого.
Все о загрузке файлов в Symfony

Все о загрузке файлов в Symfony

en
Нужно загрузить некоторые файлы в Symfony? Отлично! Вы пришли в нужное место! В наши дни загрузка файлов может быть простой... или невероятно сложной - с облачным хранилищем, личными файлами, миниатюрами, проверкой и так далее. Итак, давайте займемся ... всем этим!
Создание Reusable (и удивительных) Symfony пакетов

Создание Reusable (и удивительных) Symfony пакетов

en
Хотите поделиться кодом между проектами или со всем миром? Давай сделаем это! Создавая пакет Symfony! В этом руководстве мы узнаем о пакетах, их суперспособностях, о том, как добавлять сервисы и маршруты, а также о лучших практиках для создания наилучших возможных пакетов.
Формы Symfony 4: создавайте, визуализируйте и властвуйте!

Формы Symfony 4: создавайте, визуализируйте и властвуйте!

en
Да, формы! Одна из самых мощных и ... запутанных функций во всем Symfony. Вот правда: формы просто сложны. Вам нужно управлять элементами формы HTML, проверкой, преобразованием данных и многим другим. Компонент Form может быть самой сложной частью Symfony. Но чем больше с ним работаешь, тем...
chat
logo