Ознакомиться с важной информацией: Майнер отключен!

Sass - от новичка до реального проекта - Видеоуроки

Sass - from beginner to real world
Duration 08:02:59
Открыть все курсы от kevin powell

Sass стал основным языком для изучения начинающими веб-разработчиками. Он помогает вам быстрее писать свой код, делать вещи, которые иногда кажутся волшебными, а также является частью многих современных рабочих процессов. Этот курс расскажет вам, как использовать Sass, как интегрировать его в рабочий процесс и подтолкнуть вас к трудностям, помогая вам стать лучшим frontend-разработчиком.

Этот курс - это нечто большее, чем просто Sass

Этот курс также не только фокусируется на Sass как на языке. Понимание самого языка важно, но оно дает нам возможность изменить, как мы работаем над нашими проектами. Этот курс учит вас не только языку, но и тому, как его использовать в реальном мире.

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

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

Этот курс посвящен не только обучению использованию Sass, но и обучению тому, как стать лучшим разработчиком интерфейсов.

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

  • Что такое Sass и почему меня это волнует?
  • Как установить Sass
  • Комментарии Sass против комментариев CSS
  • SCSS / Sass
  • Nesting
  • переменные
  • операторы
  • наследование
  • миксины
  • Введение в функции
  • Списки
  • интерполирование
  • Больше миксинов
  • Управляющие директивы (@for, @each, @if)
  • maps
  • Создание двух компонентов
  • Несколько челенджов
Полный список уроков Развернуть / Свернуть
  • Урок 1. What is this course about? 00:05:26
  • Урок 2. What is Sass anyway? 00:00:33
  • Урок 3. What software do you need? 00:01:31
  • Урок 4. Installing ruby (Windows users only) 00:02:25
  • Урок 5. Installing Sass 00:03:42
  • Урок 6. Watching folders to compile Sass to CSS 00:03:36
  • Урок 7. Output style options 00:02:31
  • Урок 8. What are source maps? 00:01:55
  • Урок 9. Command line alternatives (free and premium options) 00:02:23
  • Урок 10. Sass vs SCSS - two different ways of writting Sass 00:01:41
  • Урок 11. CSS vs Sass comments 00:03:00
  • Урок 12. Nesting selectors 00:02:47
  • Урок 13. SCSS vs Sass nesting 00:07:23
  • Урок 14. Nesting and the ampersand (&) 00:02:13
  • Урок 15. Nesting properties 00:03:49
  • Урок 16. Time for a challenge! 00:03:17
  • Урок 17. What are variables? 00:02:26
  • Урок 18. Variable inseption (variables inside variables) 00:02:26
  • Урок 19. Variables and the cascade 00:04:04
  • Урок 20. Naming variables 00:02:18
  • Урок 21. It's challenge time! 00:00:58
  • Урок 22. Introduction to Operators 00:06:01
  • Урок 23. Operators - a use case 00:10:27
  • Урок 24. Pricing Table - Intro 00:30:50
  • Урок 25. Writing the markup 00:03:19
  • Урок 26. Setting up the variables 00:01:27
  • Урок 27. Styling it up 00:01:14
  • Урок 28. An introduction to Extends 00:01:46
  • Урок 29. Placeholders 00:03:38
  • Урок 30. Don't forget about the other stuff you can do 00:03:07
  • Урок 31. Problems with extends - 1 00:03:54
  • Урок 32. Problems with extends - 2 00:02:35
  • Урок 33. Introduction to Mixins 00:02:37
  • Урок 34. Selectors inside mixins 00:03:33
  • Урок 35. Mixin arguments part one 00:02:20
  • Урок 36. Mixin arguments part two: optional arguments 00:05:20
  • Урок 37. Mixin arguments part three: more ways to work faster 00:01:52
  • Урок 38. Mixin arguments part four: keeping things in the right order 00:06:45
  • Урок 39. Mixin Challenge - Introduction 00:05:05
  • Урок 40. Introduction to Functions 00:02:45
  • Урок 41. Some of my favourite Sass functions 00:04:04
  • Урок 42. The Markup 00:08:12
  • Урок 43. Getting Sass set up and running 00:06:32
  • Урок 44. Settin' up the variables 00:05:52
  • Урок 45. Creating the mixins 00:07:13
  • Урок 46. Styling the typography 00:00:56
  • Урок 47. Styling the buttons 00:01:18
  • Урок 48. Finishing touches 00:00:54
  • Урок 49. Introduction to Lists 00:00:58
  • Урок 50. List lengths 00:02:37
  • Урок 51. The different types of lists 00:02:06
  • Урок 52. Accessing specific list items 00:00:36
  • Урок 53. The different ways to write lists 00:03:06
  • Урок 54. What is interpolation? 00:03:40
  • Урок 55. Interpolation and math 00:01:37
  • Урок 56. A quick refresher on Mixins 00:01:47
  • Урок 57. A look at variable arguments 00:04:46
  • Урок 58. Staying organized with variables 00:01:51
  • Урок 59. Variable arguments with @include 00:02:37
  • Урок 60. Variable arguments with @include - part two 00:04:52
  • Урок 61. Mixin challenge - part one.mp4 00:03:47
  • Урок 62. Mixin challenge - part two.mp4 00:01:52
  • Урок 63. A look at @content 00:01:47
  • Урок 64. Using @content to make awesome media query mixins 00:00:38
  • Урок 65. Adding a custom size media query 00:01:02
  • Урок 66. Intro to Sass @for 00:01:09
  • Урок 67. Using the $i variable 00:01:51
  • Урок 68. Using interpolation 00:01:57
  • Урок 69. Adding in some math 00:01:24
  • Урок 70. A little more math and a new variable 00:00:49
  • Урок 71. @for challenge 00:03:27
  • Урок 72. Introduction to @each 00:03:27
  • Урок 73. A more useful example of @each 00:03:49
  • Урок 74. Using nested lists 00:02:22
  • Урок 75. Intro to the @if directive 00:00:55
  • Урок 76. A more realistic example 00:02:36
  • Урок 77. @else directive intro 00:03:30
  • Урок 78. A more realistic look at @else 00:02:55
  • Урок 79. Using @if and @else to make a cool @mixin 00:03:30
  • Урок 80. Improving the mixin 00:01:47
  • Урок 81. Introduction to @if else 00:02:50
  • Урок 82. The if() function 00:03:13
  • Урок 83. Using the if function to write less code 00:02:26
  • Урок 84. Introduction to custom functions 00:06:12
  • Урок 85. Variable number of arguments 00:01:29
  • Урок 86. Dynamically set text color 00:01:05
  • Урок 87. Making the output look a little better 00:03:14
  • Урок 88. Refactor challenge.mp4 00:00:24
  • Урок 89. Refactor challenge - solution.mp4 00:04:00
  • Урок 90. Intro to debugging in Sass 00:01:54
  • Урок 91. The warning 00:01:17
  • Урок 92. Creating an error 00:03:49
  • Урок 93. Improving our error with interpolation 00:03:52
  • Урок 94. Introduction to Sass maps 00:02:09
  • Урок 95. How to access maps 00:04:10
  • Урок 96. Access maps made easier 00:02:18
  • Урок 97. Mapception 00:01:45
  • Урок 98. Accessing maps inside of other maps 00:04:26
  • Урок 99. Accessing maps inside of other maps made easier (plus a mini challenge) 00:04:51
  • Урок 100. Improving our media query mixin with a map 00:01:30
  • Урок 101. Maps and `@each` 00:06:29
  • Урок 102. Accessing maps with `@each` challenge 00:04:47
  • Урок 103. Accessing maps with `@each` solution 00:02:08
  • Урок 104. map-has-key() 00:02:55
  • Урок 105. A more realistic example of map-has-key() 00:00:35
  • Урок 106. Improving our media query mixin - challenge 00:01:51
  • Урок 107. The solution 00:01:31
  • Урок 108. A look at the type-of() function 00:02:09
  • Урок 109. Using type-of to improve our mq mixin even more! A challenge 00:03:56
  • Урок 110. And making it even better! 00:04:17
  • Урок 111. Introduction to partials 00:03:23
  • Урок 112. The 7-1 system and what I actually use (file organization) 00:09:05
  • Урок 113. Introduction to the project 00:01:52
  • Урок 114. A look at the files 00:02:56
  • Урок 115. The Markup - Navigation 00:04:16
  • Урок 116. The Markup - Home and About 00:05:16
  • Урок 117. The Markup - Facts and Meals 00:04:12
  • Урок 118. The Markup - Testimonial and Footer 00:04:02
  • Урок 119. First variables and mixins 00:06:39
  • Урок 120. Setting up a custom function 00:02:33
  • Урок 121. Adding an error to the function 00:01:47
  • Урок 122. Setting up the typography 00:08:19
  • Урок 123. Setting up the general layout 00:03:32
  • Урок 124. Styling the navigation 00:04:32
  • Урок 125. Styling up the home section layout 00:03:09
  • Урок 126. Stlying the About section, and some trouble shooting 00:04:49
  • Урок 127. Creating an underline pseudo element mixin 00:05:43
  • Урок 128. Styling the facts and meals sections 00:07:41
  • Урок 129. Styling the testimonial and footer, and fixing a mistake 00:10:40
  • Урок 130. Adding in a media query mixin 00:08:44
  • Урок 131. About section - large screen layout with grid 00:08:55
  • Урок 132. Creating a grid mixin 00:07:38
  • Урок 133. Fixing up the nav and about section 00:02:29
  • Урок 134. Fixing up the typography + closing thoughts 00:04:08
Этот курс находится в платной подписке!

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

Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.

Комментарии

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

ru 76 уроков
webformyself Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки
Препроцессоры Sass и Less упрощают вашу работу в разы. Они ускоряют написание css, добавляя вам ряд преимущест, таких как переменные, миксины. вложенные селекторы, математические функции, сообщения об ошибках в написании кода и тд. Во время использования Less или Sass в разработке проекта вы получите удобное написание кода, который будете писать в разы быстрей по сравнению с тем, если бы вы использовали обычный css, также вы сможете избежать...
Duration 15:11:36
50 2
15-12-2017 en 124 урока
udemy Advanced CSS and Sass: Take Your CSS to the Next Level!
Самый продвинутый и современный курс CSS в Интернете: анимация, flexbox, отзывчивый дизайн и многое другое.  Вы какое-то время писали CSS, но хотите перенести свою игру на следующий уровень? Чувствуете ли вы путаницу с CSS-жаргоном, как наследование, специфика или каскад? Что если бы был один ресурс, одно место, где вы могли бы изучить все современные методы и свойства CSS, о которых вы читали? Хорошая новость: вот он! Добро пожаловать в...
Duration 28:06:58
118 4
en 265 уроков
udemy CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
Изучите CSS в первый раз или поднимите свои навыки CSS и погрузитесь еще глубже. КАЖДЫЙ веб-разработчик должен знать CSS.CSS - сокращение от Cascading Style Sheets - это «язык программирования», который вы используете, чтобы превратить ваши необработанные HTML-страницы в настоящие красивые веб-сайты.Этот курс охватывает все это - мы начинаем с самых основ (что такое CSS?) Как это работает? Как вы его используете? и постепенно...
Duration 20:46:03
28 0
en 10 уроков
frontendmasters Sass Fundamentals
Sass и другие препроцессоры создавались по одной причине: CSS становится утомительным для написания и трудно поддерживаемым, поскольку приложение становится более сложным.

Несмотря на недавние значительные улучшения в организации JavaScript в наших современных веб-приложениях, CSS сравнительно слабо развился. Вместо этого многие команды полагаются на препроцессоры, такие как Sass, Less, PostCSS, Stylus и другие. Это, по существу,...
Duration 04:16:52
8 0

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

VR-разработчик. Разработки VR-приложения: от идеи до монетизации

VR-разработчик. Разработки VR-приложения: от идеи до монетизации

ru
VR-разработчик — это профессия будущего. Такие гиганты, как Facebook, YouTube, Google , находятся в постоянном поиске талантливых VR-специалистов. При этом войти в профессию очень легко, люди с любым бэкграундом могут начать обучение. Навыки VR-разработки, создания и ведения проектов...
Онлайн курс-интенсив «Развитие памяти и внимания»

Онлайн курс-интенсив «Развитие памяти и внимания»

ru
Как со 100% точностью запоминать большой объем любой информации на неограниченный срок? КТО и ЗАЧЕМ ХОДИТ В АПТЕКУ Спрос, как известно, рождает предложение. Поэтому в любой аптеке, на самом видном месте, наряду с лекарствами от простуды и гриппа, можно встретить препараты для улучшения памяти.
Основы Affinity Photo

Основы Affinity Photo

en
Руководство для новичков в самой горячей новой программе для редактирования изображений! Affinity Photo - самая новая программа для редактирования изображений для Mac и Windows. У нее есть много мощных инструментов, чтобы сделать Ваши фотографии действительно сияющими. Но вам нужно знать...
Практический онлайн-курс  «Дизайн мобильных приложений»

Практический онлайн-курс «Дизайн мобильных приложений»

ru
Курс для тех, кто хочет снимать сливки в профессии дизайнера, занимаясь самой передовой и востребованной отраслью — разработкой дизайна для мобильных приложений. 90 млрд приложений было загружено в 2016 году по всему миру, 5 место по числу загрузок заняла Россия, 33 приложения установлено...
Intermediate React

Intermediate React

en
Научитесь создавать масштабируемые приложения React с использованием инструментов и методов, доступных в экосистеме React. Вы будете тестировать свои компоненты React с помощью Jest, использовать CSS в JS, разделять код на React Loadable, использовать рендеринг на стороне сервера в React с Node...
[Перевод] [RU] Unreal Engine курс - Изучите C ++ и делайте игры

[Перевод] [RU] Unreal Engine курс - Изучите C ++ и делайте игры

ru
Узнайте, как создавать видеоигры с помощью Unreal Engine 4, бесплатной платформы для разработки игр, используемой студиями AAA класа и разработчиками indie по всему миру. Мы начинаем супер просто, поэтому вам не нужно никакого опыта в Unreal или программировании! С помощью наших онлайн-руководств...
Продвинутый курс GameDev: создаем полноценную игру для android

Продвинутый курс GameDev: создаем полноценную игру для android

ru
Пройдите курс по разработке игры, своим геймплеем напоминающую легендарную Flappy Bird, разработчик которой стал миллионером за короткий срок. В процессе прохождения курса GameDev мы с вами создадим полноценную игру, встроим в нее рекламный баннер AdMob и опубликуем в Google Play. Курс состоит...
Веб-скрапинг используя PhantomJS и CasperJS

Веб-скрапинг используя PhantomJS и CasperJS

en
Станьте лучшим разработчиком JavaScript и изучите Front-End тестирование. Мы будем использовать javascript, lodash и jquery для скрапинга. В этом курсе вы узнаете, как собирать данные с веб-страниц с помощью CasperJS. Этот курс состоит из 5 проектов, которые помогут вам в полной мере понять...
chat
logo