├── .gitignore ├── Angular └── angular-course.md ├── README.md ├── angular-course.md ├── corejs-course.md ├── javascript-fundamentals.md ├── lectures ├── IDE-battle.md ├── a11y.md ├── basic-algorithms.md ├── chrome-devtools.md ├── css-frameworks.md ├── css-methodologies.md ├── css-preprocessors.md ├── css-recipies-and-layouts.md ├── design-patterns.md ├── dom-events.md ├── dom.md ├── es6.md ├── event-loop-and-animations.md ├── float-positioning-error-analysis.md ├── fp.md ├── git.md ├── how-browser-works.md ├── html-css-basics.md ├── http.md ├── inheritance-in-js-and-es6-classes.md ├── intro.md ├── js-arrays.md ├── js-data-types.md ├── js-functions-part-two.md ├── js-functions.md ├── js-intro.md ├── js-scope.md ├── lodash.md ├── maintainable-css.md ├── match-match-game-error-analysis.md ├── photoshop-basics.md ├── position-floats-semantics-css3.md ├── promises-game-dev.md ├── refactoring.md ├── responsive-web-design.md ├── rs-online-development.md ├── rsschool_for_humanities.md ├── screencast │ ├── git-ru.md │ ├── stage-1-en.md │ └── stage-1-ru.md ├── screencast_stage_1.md ├── software-development-process.md ├── tdd.md ├── ux.md ├── web-typography.md ├── webpack.md └── websocket-challenge.md ├── modules ├── css-flex-grid │ ├── css-flex-grid-en.md │ └── css-flex-grid-ru.md ├── css-positioning-layout │ └── css-positioning-layout-ru.md ├── css-responsive-adaptive │ ├── css-responsive-adaptive-en.md │ ├── css-responsive-adaptive-ru.md │ └── images │ │ └── css-responsive-adaptive-en.png ├── html-css-basics │ ├── html-css-basics-en.md │ ├── html-css-basics-ru.md │ └── images │ │ ├── html-css-basics-en-1.png │ │ ├── html-css-basics-en-2.png │ │ └── html-css-basics-ru-1.png ├── js-modules.md └── pre-post-processors │ ├── pre-post-processors-en.md │ └── pre-post-processors-ru.md ├── nodejs-course.md ├── react-course.md ├── rs-epam-lab ├── score.md ├── week-0.md ├── week-1.md ├── week-10-11.md ├── week-12.md ├── week-13.md ├── week-2-3.md ├── week-4.md ├── week-5.md ├── week-6-7.md └── week-8-9.md └── trash.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | -------------------------------------------------------------------------------- /Angular/angular-course.md: -------------------------------------------------------------------------------- 1 | # Курс Angular 2 | 3 | ### Что необходимо перед стартом курса: 4 | 5 | - Уверенные знания и опыт работы с JavaScript 6 | - Базовые знания Git 7 | - Присоединиться к чату https://discord.gg/Uazp6s в Discord, раздел ANGULAR. 8 | 9 | #### Тренера курса: 10 | 11 | - Aleh Serhiyenia 12 | - Dzianis Davydau 13 | 14 | #### Общение. Каналы связи 15 | 16 | Все общение в рамках курса происходит в чатах Discord. 17 | 18 | # Учебный план 19 | 20 | # Неделя 1 21 | 22 | ## Модуль #1. Angular intro. TypeScript 23 | 24 | - Введение в курс. 25 | - Общие сведения об `Angular`. 26 | - Что такое `Angular-cli`. 27 | - Компиляция приложения. `Angular Ivy`. 28 | - Обработка событий в Angular. 29 | - Основы `Typescript`. 30 | - Выдача первого задания. 31 | 32 | #### Задание: 33 | 34 | - [Angular intro](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-intro.md) 35 | - Ментор: Aleh Serhiyenia 36 | 37 | #### Материалы для изучения 38 | 39 | - [Лекция (видео)](https://youtu.be/HoUq9xyfCAk) 40 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/ts-intro/src) 41 | - [Слайды](https://slides.com/pavelrazuvalau/angular-intro) 42 | - https://www.typescriptlang.org/docs/home.html 43 | - https://www.typescriptlang.org/docs/handbook/basic-types.html 44 | - https://www.typescriptlang.org/play/index.html 45 | - https://cli.angular.io/ 46 | - https://angular.io/cli 47 | - https://angular.io/tutorial 48 | 49 | #### Лекция. Q&A: 50 | 51 | - Дата: смотрите в расписании 52 | - Тренер: Aleh Serhiyenia 53 | 54 | ## Модуль #2. Angular. Components. 55 | 56 | - Базовая структура приложения. 57 | - Что такое `Components`, шаблоны. 58 | - Двухсторонее связывание. 59 | - Жизненный цикл `Components`. 60 | - Взаимодействие `Components`. 61 | - Создание и использование `Components` в приложении. 62 | 63 | #### Задание: 64 | 65 | - [Angular. Components](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-components.md) 66 | - Ментор: Aleh Serhiyenia 67 | 68 | #### Материалы для изучения: 69 | 70 | - [Лекция(видео)](https://www.youtube.com/watch?v=rY_FWXmh4QI) 71 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-components/src) 72 | - [Слайды](https://slides.com/pavelrazuvalau/angular-components) 73 | - https://angular.io/tutorial 74 | - https://angular.io/tutorial/toh-pt1 75 | - https://angular.io/tutorial/toh-pt2 76 | - https://angular.io/tutorial/toh-pt3 77 | - https://angular.io/guide/architecture-components 78 | - https://angular.io/guide/displaying-data 79 | - https://angular.io/guide/template-syntax 80 | - https://angular.io/guide/lifecycle-hooks 81 | - https://angular.io/guide/component-interaction 82 | 83 | #### Лекция. Q&A: 84 | 85 | - Дата: смотрите в расписании 86 | - Тренер: Dzianis Davydau 87 | 88 | # Неделя 2 89 | 90 | ### Task review: 91 | 92 | - Разбор задания `Angular intro`. 93 | - Дата: смотрите в расписании. 94 | - Ментор: Aleh Serhiyenia. 95 | 96 | ## Модуль #3. Angular. Modules & Services, Dependency injection 97 | 98 | - Что такое модули, зачем они нужны, как их использовать. 99 | - `CoreModule` и `SharedModule`. 100 | - Понятие `Services`, их задачи. 101 | - Понятие `Dependency injection`, что это и как его использовать. 102 | 103 | #### Задание: 104 | 105 | - [Angular. Modules](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-modules.md) 106 | - [Angular. Services](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-services-di.md) 107 | - Ментор: Aleh Serhiyenia 108 | 109 | #### Материалы для изучения: 110 | 111 | - [Лекция(видео)](https://youtu.be/t4LuNI9HCMM) 112 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-modules-services) 113 | - [Слайды](https://slides.com/pavelrazuvalau/angular-modules-services) 114 | - https://angular.io/tutorial/toh-pt4 115 | - https://angular.io/guide/architecture-modules 116 | - https://angular.io/guide/ngmodules 117 | - https://angular.io/guide/ngmodule-faq 118 | - https://angular.io/guide/architecture-services 119 | - https://angular.io/guide/dependency-injection 120 | - https://angular.io/guide/dependency-injection-providers 121 | - https://angular.io/guide/dependency-injection-in-action 122 | - https://www.freelancermap.com/freelancer-tips/12255-forroot-forchild-angular 123 | 124 | #### Лекция. Q&A: 125 | 126 | - Дата: смотрите в расписании 127 | - Тренер: Dzianis Davydau 128 | 129 | ## Модуль #4. Angular. Directives & Pipes. 130 | 131 | - Базовые знания о `Directives`. Понятие Атрибутивных и Структурных `Directives`. Встроенные `Directives`. 132 | - Создание `Directives`. 133 | - Понятие `Decorators` и взаимодействие с пользователем с помощью `Directives`. 134 | - Базовые знания о `Pipes`. Параметры. Цепочки `Pipe`. Встроенные `Pipe`. 135 | - Создание `Pipe`. 136 | 137 | #### Материалы для изучения: 138 | 139 | - [Лекция(видео)](https://youtu.be/S7TKY7hfWa0) 140 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-directives-pipes/src) 141 | - [Слайды](https://slides.com/pavelrazuvalau/angular-directives-pipes) 142 | - https://angular.io/api/core/Directive 143 | - https://angular.io/guide/attribute-directives 144 | - https://angular.io/guide/structural-directives 145 | - https://angular.io/api/core/Pipe 146 | - https://angular.io/guide/pipes 147 | - https://angular.io/api/common 148 | - https://angular.io/guide/cheatsheet 149 | 150 | #### Задание: 151 | 152 | - [Angular. Pipes](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-pipes.md) 153 | - [Angular. Directives](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-directives.md) 154 | - Ментор: Aleh Serhiyenia 155 | 156 | # Неделя 3 157 | 158 | ### Task review: 159 | 160 | - Разбор задания `Angular. Components`, `Angular. Services`, `Angular. Modules`. 161 | - Дата: смотрите в расписании. 162 | - Ментор: Aleh Serhiyenia 163 | 164 | ## Модуль #5. Angular. Routing 165 | 166 | - Основы маршрутизации. 167 | - Директива RouterOutlet. 168 | - Множественная маршрутизация. Маршруты с параметрами. 169 | - `Router guards`. 170 | - Асинхронная загрузка. 171 | 172 | #### Задание: 173 | 174 | - [Angular. Routing](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-routing.md) 175 | - Ментор: Aleh Serhiyenia 176 | 177 | ### Материалы для изучения: 178 | 179 | - [Лекция(видео)](https://youtu.be/t_bGVB6jzUw) 180 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-routing) 181 | - [Слайды](https://slides.com/pavelrazuvalau/angular-routing) 182 | - https://angular.io/tutorial/toh-pt5 183 | - https://angular.io/guide/router 184 | - https://angular.io/api/router 185 | - https://angular.io/api/router/RouterLinkActive 186 | - https://angular.io/api/router/ActivatedRoute 187 | - https://angular.io/api/router/Resolve 188 | 189 | #### Лекция. Q&A: 190 | 191 | - Дата: смотрите в расписании 192 | - Тренер: Dzianis Davydau 193 | 194 | ## Модуль #6. Angular. HTTP. 195 | 196 | - Модуль `HttpClientModule`. 197 | - Объект `HttpTypeEvent`. 198 | - Перехват HTTP-запросов с помощью `Http Interceptor`. 199 | 200 | #### Задание: 201 | 202 | - [Angular. HTTPClient](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-httpclient.md) 203 | - Ментор: Aleh Serhiyenia 204 | 205 | #### Материалы для изучения HTTP: 206 | 207 | - [Лекция HTTP (видео)](https://youtu.be/2LVepjuFjHw) 208 | - [Примеры из видео (часть 1)](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-http) 209 | - [Примеры из видео (часть 2)](https://github.com/pavelrazuvalau/angular-courses-app) 210 | - [Слайды](https://slides.com/pavelrazuvalau/angular-http) 211 | - https://angular.io/tutorial/toh-pt6 212 | - https://angular.io/guide/http 213 | - https://angular.io/api/common/http 214 | - https://angular.io/api/common/http/HttpClient 215 | - https://angular.io/api/common/http/HttpResponse 216 | - https://angular.io/api/common/http/HttpHeaders 217 | - https://angular.io/api/common/http/HttpParams 218 | 219 | 220 | #### Лекция. Q&A: 221 | 222 | - Дата: смотрите в расписании 223 | - Тренер: Dzianis Davydau 224 | 225 | 226 | # Неделя 4 227 | 228 | ### Task review: 229 | 230 | - Разбор задания `Angular. Pipes`, `Angular. Directives`, `Angular. Routing`. 231 | - Дата: смотрите в расписании. 232 | - Ментор: Aleh Serhiyenia. 233 | 234 | 235 | ## Модуль #7. RxJS & Observables 236 | 237 | - Принципы реактивного программирования для `JavaScript`. 238 | - `Observable`. `Subject`. Операторы `RxJS`. 239 | 240 | #### Материалы для изучения RxJS & Observables: 241 | 242 | - [Лекция RxJS & Observables (видео)](https://youtu.be/uXaMBTsuTbQ) 243 | - [Примеры из видео](https://slides.com/anton_bely/rxjs) 244 | - [Слайды](https://slides.com/pavelrazuvalau/angular-routing) 245 | - https://rxjs-dev.firebaseapp.com/api 246 | - http://rxmarbles.com/ 247 | - https://www.learnrxjs.io/ 248 | - https://www.npmjs.com/package/rxjs 249 | 250 | #### Лекция. Q&A: 251 | 252 | - Дата: смотрите в расписании 253 | - Тренер: Dzianis Davydau 254 | 255 | ## Модуль #8. Angular. Redux & NgRx 256 | 257 | - О библиотеке `NgRx` 258 | - Управление состоянием хранилища. `Store`, `Actions`, `Reducers`, `Selectors`. 259 | - Использование `Effects`. 260 | - Преимущества `NgRx`. 261 | 262 | #### Лекция. Q&A: 263 | 264 | - Дата: смотреть в расписании 265 | - Тренер: Aleh Serhiyenia 266 | 267 | ### Материалы для изучения: 268 | 269 | - [Лекция (видео)](https://youtu.be/-8APehOVRLM) 270 | - [Слайды](https://drive.google.com/file/d/19m1kRSflNEVb7Z5zZRRPwVcFcu1oA54h/view?usp=sharing) 271 | 272 | #### Задание: 273 | 274 | - [Angular. NgRx](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-ngrx.md) 275 | - Ментор: Aleh Serhiyenia 276 | 277 | 278 | # Неделя 5 279 | 280 | ### Task review: 281 | 282 | - Разбор задания `Angular. HTTPClient` и `Angular. NgRx`. 283 | - Дата: смотрите в расписании. 284 | - Ментор: Aleh Serhiyenia. 285 | 286 | ## Модуль #9. Angular. Unit test. 287 | 288 | - Структура теста. 289 | - Тестирование компонентов с помощью `TestBed`. 290 | - Тестирование компонентов с подходом `Test host`. 291 | - Тестирование вложенных компонентов. 292 | 293 | #### Лекция. Q&A: 294 | 295 | - Дата: смотреть в расписании 296 | - Тренер: Aleh Serhiyenia 297 | 298 | ### Материалы для изучения: 299 | 300 | - [Лекция (видео)](https://youtu.be/MSXCNHrmk9U) 301 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-unit-testing) 302 | - [Слайды](https://slides.com/pavelrazuvalau/angular-unit-testing) 303 | - https://angular.io/guide/testing 304 | - https://blog.stevensanderson.com/2009/08/24/writing-great-unit-tests-best-and-worst-practises/​ 305 | - https://www.kenneth-truyers.net/2012/12/15/key-qualities-of-a-good-unit-test/ 306 | - https://www.youtube.com/watch?v=Eu35xM76kKY 307 | - https://github.com/stas-dolgachov/angular-testing-lecture 308 | 309 | #### Задание: 310 | 311 | - [Angular. Tests](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-unit-tests.md) 312 | - Ментор: Aleh Serhiyenia 313 | 314 | ## Итоговый тест по Angular 315 | 316 | - Дата старта: смотрите в расписании 317 | - Дата окончания: смотрите в расписании 318 | - Тренер: 319 | 320 | ## Модуль #10. Финальное задание. 321 | 322 | [RS Lang](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular-new/angular-rslang.md) 323 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Наши учебные программы 2 | - [Основной курс по JavaScript/Front-end](corejs-course.md) 3 | - [Курс по React](react-course.md) 4 | - [Курс по Angular](angular-course.md) 5 | - [Курс по NodeJS](nodejs-course.md) 6 | - [Краткий курс по JavaScript/Front-end для Back-End разработчиков](javascript-fundamentals.md) 7 | -------------------------------------------------------------------------------- /angular-course.md: -------------------------------------------------------------------------------- 1 | # Курс Angular 2 | ### Что необходимо перед стартом курса: 3 | - Уверенные знания и опыт работы с JavaScript 4 | - Базовые знания Git 5 | - Присоединиться к чату https://discord.gg/Uazp6s в Discord, раздел ANGULAR. 6 | 7 | #### Тренера курса: 8 | - Pavel Razuvalau 9 | - Aleh Serhiyenia 10 | - Dzianis Davydau 11 | 12 | #### Общение. Каналы связи 13 | Все общение в рамках курса происходит в чатах Discord. 14 | 15 | # Учебный план 16 | ## Модуль #1. Angular intro. TypeScript 17 | - Введение в курс. 18 | - Общие сведения об `Angular`. 19 | - Что такое `Angular-cli`. 20 | - Компиляция приложения. `Angular Ivy`. 21 | - Обработка событий в Angular. 22 | - Основы `Typescript`. 23 | - Выдача первого задания. 24 | 25 | #### Задание: 26 | - [Angular intro](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/intro.md) 27 | - Deadline: смотрите в расписании 28 | - Ментор: Aleh Serhiyenia 29 | 30 | #### Материалы для изучения 31 | - [Лекция (видео)](https://youtu.be/HoUq9xyfCAk) 32 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/ts-intro/src) 33 | - [Слайды](https://slides.com/pavelrazuvalau/angular-intro) 34 | - https://www.typescriptlang.org/docs/home.html 35 | - https://www.typescriptlang.org/docs/handbook/basic-types.html 36 | - https://www.typescriptlang.org/play/index.html 37 | - https://cli.angular.io/ 38 | - https://angular.io/cli 39 | - https://angular.io/tutorial 40 | 41 | ## Модуль #2. Angular. Components. 42 | - Базовая структура приложения. 43 | - Что такое `Components`, шаблоны. 44 | - Двухсторонее связывание. 45 | - Жизненный цикл `Components`. 46 | - Взаимодействие `Components`. 47 | - Создание и использование `Components` в приложении. 48 | 49 | #### Материалы для изучения: 50 | - [Лекция(видео)](https://www.youtube.com/watch?v=rY_FWXmh4QI) 51 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-components/src) 52 | - [Слайды](https://slides.com/pavelrazuvalau/angular-components) 53 | - https://angular.io/tutorial 54 | - https://angular.io/tutorial/toh-pt1 55 | - https://angular.io/tutorial/toh-pt2 56 | - https://angular.io/tutorial/toh-pt3 57 | - https://angular.io/guide/architecture-components 58 | - https://angular.io/guide/displaying-data 59 | - https://angular.io/guide/template-syntax 60 | - https://angular.io/guide/lifecycle-hooks 61 | - https://angular.io/guide/component-interaction 62 | 63 | ## Модуль #3. Angular. Directives & Pipes. 64 | - Базовые знания о `Directives`. Понятие Атрибутивных и Структурных `Directives`. Встроенные `Directives`. 65 | - Создание `Directives`. 66 | - Понятие `Decorators` и взаимодействие с пользователем с помощью `Directives`. 67 | - Базовые знания о `Pipes`. Параметры. Цепочки `Pipe`. Встроенные `Pipe`. 68 | - Создание `Pipe`. 69 | 70 | #### Лекция. Q&A: 71 | - Дата: смотрите в расписании 72 | - Тренер: Aleh Serhiyenia 73 | 74 | #### Материалы для изучения: 75 | - [Лекция(видео)](https://youtu.be/S7TKY7hfWa0) 76 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-directives-pipes/src) 77 | - [Слайды](https://slides.com/pavelrazuvalau/angular-directives-pipes) 78 | - https://angular.io/api/core/Directive 79 | - https://angular.io/guide/attribute-directives 80 | - https://angular.io/guide/structural-directives 81 | - https://angular.io/api/core/Pipe 82 | - https://angular.io/guide/pipes 83 | - https://angular.io/api/common 84 | - https://angular.io/guide/cheatsheet 85 | 86 | #### Задание: 87 | - [Angular. Components, Directives, Pipes](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/components-directives-pipes.md) 88 | - Deadline: смотрите в расписании 89 | - Ментор: Aleh Serhiyenia 90 | 91 | ### Task review: 92 | - Разбор задания `Angular intro`. 93 | - Выдача нового задания `Angular. Components, Directives, Pipes`. 94 | - Дата: смотрите в расписании. 95 | - Ментор: Aleh Serhiyenia. 96 | 97 | ## Модуль #4. Angular. Modules & Services, Dependency injection 98 | - Что такое модули, зачем они нужны, как их использовать. 99 | - `CoreModule` и `SharedModule`. 100 | - Понятие `Services`, их задачи. 101 | - Понятие `Dependency injection`, что это и как его использовать. 102 | 103 | #### Материалы для изучения: 104 | - [Лекция(видео)](https://youtu.be/t4LuNI9HCMM) 105 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-modules-services) 106 | - [Слайды](https://slides.com/pavelrazuvalau/angular-modules-services) 107 | - https://angular.io/tutorial/toh-pt4 108 | - https://angular.io/guide/architecture-modules 109 | - https://angular.io/guide/ngmodules 110 | - https://angular.io/guide/ngmodule-faq 111 | - https://angular.io/guide/architecture-services 112 | - https://angular.io/guide/dependency-injection 113 | - https://angular.io/guide/dependency-injection-providers 114 | - https://angular.io/guide/dependency-injection-in-action 115 | - https://www.freelancermap.com/freelancer-tips/12255-forroot-forchild-angular 116 | 117 | #### Лекция. Q&A: 118 | - Дата: смотрите в расписании 119 | - Тренер: Dzianis Davydau 120 | 121 | ## Модуль #5. Angular. Routing 122 | - Основы маршрутизации. 123 | - Директива RouterOutlet. 124 | - Множественная маршрутизация. Маршруты с параметрами. 125 | - `Router guards`. 126 | - Асинхронная загрузка. 127 | 128 | ### Материалы для изучения: 129 | - [Лекция(видео)](https://youtu.be/t_bGVB6jzUw) 130 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-routing) 131 | - [Слайды](https://slides.com/pavelrazuvalau/angular-routing) 132 | - https://angular.io/tutorial/toh-pt5 133 | - https://angular.io/guide/router 134 | - https://angular.io/api/router 135 | - https://angular.io/api/router/RouterLinkActive 136 | - https://angular.io/api/router/ActivatedRoute 137 | - https://angular.io/api/router/Resolve 138 | 139 | #### Задание: 140 | - [Angular. Modules & Services, Routing](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/modules-services-routing.md) 141 | - Deadline: смотрите в расписании 142 | - Ментор: Aleh Serhiyenia 143 | 144 | ### Task review: 145 | - Разбор задания `Angular. Components, Directives, Pipes`. 146 | - Выдача нового задания `Angular. Modules & Services, Routing`. 147 | - Дата: смотрите в расписании. 148 | - Ментор: Aleh Serhiyenia. 149 | 150 | ## Модуль #6. Angular. HTTP. RxJS & Observables 151 | - Принципы реактивного программирования для `JavaScript`. 152 | - `Observable`. `Subject`. Операторы `RxJS`. 153 | - Модуль `HttpClientModule`. 154 | - Объект `HttpTypeEvent`. 155 | - Перехват HTTP-запросов с помощью `Http Interceptor`. 156 | 157 | #### Материалы для изучения HTTP: 158 | - [Лекция HTTP (видео)](https://youtu.be/2LVepjuFjHw) 159 | - [Примеры из видео (часть 1)](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-http) 160 | - [Примеры из видео (часть 2)](https://github.com/pavelrazuvalau/angular-courses-app) 161 | - [Слайды](https://slides.com/pavelrazuvalau/angular-http) 162 | - https://angular.io/tutorial/toh-pt6 163 | - https://angular.io/guide/http 164 | - https://angular.io/api/common/http 165 | - https://angular.io/api/common/http/HttpClient 166 | - https://angular.io/api/common/http/HttpResponse 167 | - https://angular.io/api/common/http/HttpHeaders 168 | - https://angular.io/api/common/http/HttpParams 169 | 170 | 171 | #### Материалы для изучения RxJS & Observables: 172 | - [Лекция RxJS & Observables (видео)](https://youtu.be/uXaMBTsuTbQ) 173 | - [Примеры из видео](https://slides.com/anton_bely/rxjs) 174 | - [Слайды](https://slides.com/pavelrazuvalau/angular-routing) 175 | - https://rxjs-dev.firebaseapp.com/api 176 | - http://rxmarbles.com/ 177 | - https://www.learnrxjs.io/ 178 | - https://www.npmjs.com/package/rxjs 179 | 180 | #### Лекция. Q&A: 181 | - Тренер: Dzianis Davydau 182 | 183 | #### Задание: 184 | - [Angular. RxJS & Observables. HTTP](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/rxjs-observables-http.md) 185 | - Deadline: смотрите в расписании 186 | - Ментор: Aleh Serhiyenia 187 | 188 | ### Task review: 189 | - Разбор задания `Angular. Modules & Services, Routing`. 190 | - Выдача нового задания `Angular. RxJS & Observables. HTTP`. 191 | - Дата: смотрите в расписании. 192 | - Ментор: Aleh Serhiyenia. 193 | 194 | ## Модуль #7. Angular. Redux & NgRx 195 | - О библиотеке `NgRx` 196 | - Управление состоянием хранилища. `Store`, `Actions`, `Reducers`, `Selectors`. 197 | - Использование `Effects`. 198 | - Преимущества `NgRx`. 199 | 200 | #### Лекция. Q&A: 201 | - Дата: смотреть в расписании 202 | - Тренер: 203 | 204 | ### Материалы для изучения: 205 | - [Лекция (видео)](https://youtu.be/-8APehOVRLM) 206 | - [Слайды](https://drive.google.com/file/d/19m1kRSflNEVb7Z5zZRRPwVcFcu1oA54h/view?usp=sharing) 207 | 208 | ## Модуль #8. Angular. Unit test. 209 | - Структура теста. 210 | - Тестирование компонентов с помощью `TestBed`. 211 | - Тестирование компонентов с подходом `Test host`. 212 | - Тестирование вложенных компонентов. 213 | 214 | #### Лекция. Q&A: 215 | - Дата: смотреть в расписании 216 | - Тренер: Aleh Serhiyenia 217 | 218 | ### Материалы для изучения: 219 | - [Лекция (видео)](https://youtu.be/MSXCNHrmk9U) 220 | - [Примеры из видео](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-unit-testing) 221 | - [Слайды](https://slides.com/pavelrazuvalau/angular-unit-testing) 222 | - https://angular.io/guide/testing 223 | - https://blog.stevensanderson.com/2009/08/24/writing-great-unit-tests-best-and-worst-practises/​ 224 | - https://www.kenneth-truyers.net/2012/12/15/key-qualities-of-a-good-unit-test/ 225 | - https://www.youtube.com/watch?v=Eu35xM76kKY 226 | - https://github.com/stas-dolgachov/angular-testing-lecture 227 | 228 | ### Task review: 229 | - Разбор задания `Angular. RxJS & Observables. HTTP`. 230 | - Дата: смотрите в расписании. 231 | - Ментор: Aleh Serhiyenia. 232 | 233 | ## Cross-check `YouTube client app` 234 | - Дата старта: смотрите в расписании 235 | - Дата окончания: смотрите в расписании 236 | 237 | ## Итоговый тест по Angular 238 | - Дата старта: смотрите в расписании 239 | - Дата окончания: смотрите в расписании 240 | - Тренер: 241 | -------------------------------------------------------------------------------- /corejs-course.md: -------------------------------------------------------------------------------- 1 | # Course Curriculum 2 | 3 | [Вводное занятие / Course Overview](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/intro.md) 4 | 5 | ## Stage #1 6 | - Git 7 | - http://try.github.io/ 8 | - [GIT Basics](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/git.md) 9 | - Terminal Usage 10 | - [Basic Windows](https://www.digitalcitizen.life/command-prompt-how-use-basic-commands) 11 | - [Basic Mac](https://www.imore.com/how-use-terminal-mac-when-you-have-no-idea-where-start) 12 | - [IDE](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/IDE-battle.md) 13 | - [Data Structures & Alogrithms](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/basic-algorithms.md) 14 | - [HTML & CSS Basics](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/html-css-basics.md) 15 | - JS Basics 16 | - [JS Intro](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-intro.md) 17 | - [JS Data Types](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-data-types.md) 18 | - [Stage #1 Retrospective](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/retrospective-stage-one.md) 19 | 20 | ## Stage #2 21 | - JavaScript 22 | - [JS Scope](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-scope.md) 23 | - [JS Functions. Part I](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-functions.md) 24 | - [JS Functions. Part II](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-functions-part-two.md) 25 | - [ES6. Let, Const and arrow functions. Airbnb JavaScript Style Guide](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/es6.md) 26 | - [Array.prototype.*](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-arrays.md) 27 | - [Inheritance in JavaScript. ES6 Classes.](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/inheritance-in-js-and-es6-classes.md) 28 | - [Game Dev. Promises. Callbacks](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/promises-game-dev.md) 29 | - [JS Modules](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-modules.md) 30 | 31 | - HTML/CSS 32 | - [Photoshop basics](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/photoshop-basics.md) 33 | - [Position. Floats. Semantics. CSS3](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/position-floats-semantics-css3.md) 34 | - [Float & Positioning. Error Analysis](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/float-positioning-error-analysis.md) 35 | - [Web typography](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/web-typography.md) 36 | - [Responsive Web Design. Flexbox. CSS Grid Layout. CSS Recipes & Layouts](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/css-recipies-and-layouts.md) 37 | - [CSS Preprocessors. SASS](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/css-preprocessors.md) 38 | - [CSS Frameworks](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/css-frameworks.md) 39 | 40 | - DOM 41 | - [DOM](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/dom.md) 42 | - [DOM Events](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/dom-events.md) 43 | - [Event Loop. Animations](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/event-loop-and-animations.md) 44 | 45 | - Development environment 46 | - NPM, NPM scripts 47 | - [Webpack. Assets management. Project Structure](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/webpack.md) 48 | - [Chrome DevTools](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/chrome-devtools.md) 49 | 50 | - [HTTP/HTTPS](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/http.md) 51 | - [Functional Programming](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/fp.md) 52 | - [Lodash](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/lodash.md) 53 | - [How browser works](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/how-browser-works.md) 54 | 55 | - Other 56 | - [Match Match game. Error Analysis](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/match-match-game-error-analysis.md) 57 | - [WebSocket Challenge](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/websocket-challenge.md) 58 | - [Test-driven development](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/tdd.md) 59 | - [Design Patterns](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/design-patterns.md) 60 | - [Maintainable CSS](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/maintainable-css.md) 61 | - [Refactoring](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/refactoring.md) 62 | - TypeScript 63 | - [Accessibility](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/a11y.md) 64 | - [Software Development Process](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/software-development-process.md) 65 | - [UX](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/ux.md) 66 | -------------------------------------------------------------------------------- /javascript-fundamentals.md: -------------------------------------------------------------------------------- 1 | # Курс JavaScript Fundamentals 2 | Что необходимо перед стартом курса: 3 | - Уверенные знания и опыт работы с любым из языков программирования 4 | - Базовые знания Git 5 | - Присоединиться к чату Discord - https://discord.gg/rdY8Fmf. Вводная информация в канале #welcome. 6 | - Выполнить тестовое задание 7 | 8 | ### Внимание! 9 | - Даты, указанные в этом доке не финальные и могут изменяться. Сообщение об этом будет в канале #announcements Discord чата. 10 | - Выполнение заданий заранее приветствуется! 11 | 12 | ## Общение. Каналы связи 13 | Все общение в рамках курса происходит в чате Discord - https://discord.gg/rdY8Fmf. Вводная информация в канале #welcome. 14 | 15 | ## Запись вводного занятия 16 | [Можно посмотреть тут](https://web.microsoftstream.com/video/d42c263d-c93d-49d0-8a77-91950c082ae9) 17 | 18 | ## Регистрация на следующий набор (сентябрь 2020) 19 | https://community-z.com/events/js-fundamentals 20 | 21 | # Учебный план 22 | ## Неделя #0. Регистрация и тестовое задание 23 | Перед стартом курс ментии необходимо выполнить первое задание 24 | #### Задание: 25 | - [Codewars #1](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codewars-stage-1.md) 26 | - Deadline: 14 Июня 2020 23:59 GMT+3 27 | - Ментор: [@Dzmitry Varabei](https://github.com/dzmitry-varabei) 28 | 29 | ## Неделя #1. Основы HTML и CSS 30 | - Базовые знания по HTML, CSS 31 | - Создание страницы, подключение таблицы стилей. 32 | - Верстка простых компонентов одним из предложенных способов (inline-block, float, flex). 33 | - Изучение каскадности, работа с HTML-разметкой. 34 | 35 | #### Задание: 36 | - [Singolo: Часть первая.](https://github.com/rolling-scopes-school/tasks/tree/master/tasks/markups/level-2/singolo/part-1) 37 | - [Singolo: Часть третья.](https://github.com/rolling-scopes-school/tasks/tree/master/tasks/markups/level-2/singolo/part-3) 38 | - Deadline: 14 Июня 2020 23:59 GMT+3 39 | - Ментор: [@Viktoryia Vorozhun](https://github.com/ViktoriyaVorozhun) 40 | 41 | #### Материалы для самостоятельного изучения 42 | Рекомендуется смотреть на скорости 1.25 или 1.5: 43 | - https://www.youtube.com/watch?v=FCuMPo-omJ4&feature=youtu.be 44 | - https://www.youtube.com/watch?v=OOVayP9HDTg&feature=youtu.be 45 | - https://www.youtube.com/watch?v=UQavTWiTpnA&feature=youtu.be (optional) 46 | - https://www.youtube.com/playlist?list=PLzLiprpVuH8dEodh5dKfn4SJpITOvczr9 (только часть 1 и 2) 47 | 48 | #### Лекция. Q&A: 49 | 11 Июня 2020 15:00 GMT+3 @Viktoryia Vorozhun 50 | 51 | ## Неделя #2. Основы HTML и CSS 52 | - Базовые знания по препроцессорам. 53 | - Базовые знания по современным методам верcтки (flex, positioning). 54 | - Изучение responsive подхода в вёрстке. 55 | 56 | #### Задание: 57 | - [Singolo: Часть вторая.](https://github.com/rolling-scopes-school/tasks/tree/master/tasks/markups/level-2/singolo/part-2) 58 | - Deadline: 21 Июня 2020 23:59 GMT+3 59 | - Ментор: [@Viktoryia Vorozhun](https://github.com/ViktoriyaVorozhun) 60 | 61 | #### Материалы для самостоятельного изучения: 62 | - https://www.youtube.com/playlist?list=PLzLiprpVuH8dEodh5dKfn4SJpITOvczr9 (часть 3-4) 63 | - https://www.youtube.com/watch?v=JO8DvVZbxDw&t=6s (по желанию, при работе с препроцессорами) 64 | 65 | #### Лекция. Q&A: 66 | 18 Июня 2020 15:00 GMT+3 [@Viktoryia Vorozhun](https://github.com/ViktoriyaVorozhun) 67 | 68 | ## Неделя #3. Кросс-чек Singolo. Code review. 69 | #### Cross-check Singolo 70 | - [Описание процесса cross-check](https://docs.rs.school/#/cross-check-flow) 71 | - Дата старта: 22 июня 72 | - Дата окончания: 25 июня 73 | 74 | #### Лекция. Q&A: 75 | 25 Июня 2020 15:00 GMT+3 [@Viktoryia Vorozhun](https://github.com/ViktoriyaVorozhun) 76 | 77 | ## Неделя #4 Изучение основ JavaScript 78 | - Main concepts and differents from other languages: 79 | - datatypes 80 | - variables 81 | - hoisting 82 | - closures 83 | - es5 inheritance 84 | - functions 85 | - es6 syntax 86 | - JS ecosystem basics 87 | #### Задания: 88 | - [Basic JS](https://github.com/AlreadyBored/basic-js) 89 | - [Codewars #2](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codewars.md) 90 | - [Core JS (optional)](https://github.com/mikhama/core-js-101) 91 | - Deadline: 7 Июля 2020 92 | 93 | - Менторы: [@Maksim Shastel](https://github.com/Shastel), [@Maksim Shylau](https://github.com/AlreadyBored) 94 | 95 | ## Материалы для самостоятельного изучения: 96 | - Вариант 1: https://learn.javascript.ru/ или его англоязычная версия https://javascript.info/ 97 | - Вариант 2: https://exploringjs.com/impatient-js/index.html 98 | - Вариант 3: Youtube 99 | * [JS Intro](https://www.youtube.com/watch?v=cP08joG36F0), aprox 1h 100 | * [JS Datatypes](https://www.youtube.com/watch?v=kbGlKiVcTvo&t=1s), aprox 1h 26m 101 | * [JS Scope](https://www.youtube.com/watch?v=qKEm4U8DizY), aprox 1h 102 | * [JS Styleguide](https://www.youtube.com/watch?v=vBZNtwU7qns), aprox 40m 103 | * [Data Structures with JS](https://www.youtube.com/watch?v=j6w_ZJSYNRU) approx 1h, optional 104 | 105 | #### Лекция. Q&A: 106 | 7 Июля 2020 15:00 GMT+3 [@Maksim Shastel](https://github.com/Shastel) 107 | 108 | ## Неделя #5 Изучение основ DOM & DOM Events 109 | #### Задание: 110 | - [Virtual Keyboard](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/virtual-keyboard/virtual-keyboard-ru.md) 111 | - Deadline: 15 Июля 2020 112 | - Менторы: [@Aleh Serhiyenia](https://github.com/Pulya10c) 113 | 114 | #### Self education (recommended speed 1.5): 115 | * [JS DOM](https://www.youtube.com/watch?v=lHsQ6EEp3ms), aprox 1h 30m 116 | * [JS Events](https://www.youtube.com/watch?v=84JvgOpPY_Q), aprox 1h 117 | * [Что за чертовщина такая event loop? ](https://www.youtube.com/watch?v=8aGhZQkoFbQ), en, x1, aprox 26m 118 | * [Event Loop & Animations](https://www.youtube.com/watch?v=dWE3WEpqr7M), aprox 1h, Optional 119 | 120 | #### Лекция. Q&A: 121 | 8 Июля 2020 15:00 GMT+3 [@Aleh Serhiyenia](https://github.com/Pulya10c) 122 | 123 | ## Неделя #6 Modules, Async programming 124 | #### Workshop. Q&A: 125 | - Тема: NodeJS. 126 | - 31 Июля 2020 15:00 GMT+3 [@Uladzimir Halushka](https://github.com/humanamburu) 127 | 128 | #### Self education (recommended speed 1.5): 129 | * [JS Callbacks Promises](https://www.youtube.com/watch?v=0fFg3c4C9tA&t=1s), aprox 1h 20m 130 | * [JavaScript Modules](https://www.youtube.com/watch?v=7e-5P6iPFzY&t=4s), aprox 1h 131 | * [Async programming](https://youtu.be/_C1hM3LjMvM?t=190) approx 1h, Optional material 132 | * [Node.js and npm basics](https://www.youtube.com/watch?v=CAvqa6Lj_Rg) approx 1h, Optional material 133 | * [Networking, 1/2](https://www.youtube.com/watch?v=4jA9Nea51T8&t=1s), aprox 1h 134 | * [Networking, 2/2](https://www.youtube.com/watch?v=_8GoJck9O9Y), aprox 1h 135 | * [Networking, 3/2](https://www.youtube.com/watch?v=DYR8g_kI9Xs), aprox 1h 136 | * [WebSockets](https://www.youtube.com/watch?v=AY466N_5TBw), aprox 15m 137 | 138 | #### Опциональное задание: 139 | [Chat UI](https://github.com/rolling-scopes-school/RS-Short-Track/wiki/6.-Chat) 140 | Deadline: Такой же как для Fancy weather 141 | 142 | ## Неделя #7-8 Финальный проект 143 | #### Задание: 144 | - [Fancy weather](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/fancy-weather.md) 145 | - Deadline: 16 Августа 2020 23:59 GMT+3 146 | - Ментор: [@Maksim Shastel](https://github.com/Shastel), [@Uladzimir Halushka](https://github.com/humanamburu) 147 | 148 | ## Неделя #9 Cross-интервью по CoreJS. Кросс-чек Fancy weather. Code review. 149 | **Менторы**: [@Maksim Shastel](https://github.com/Shastel), [@Uladzimir Halushka](https://github.com/humanamburu) 150 | 151 | # Менторы и контрибьюторы этого курса: 152 | [![Aleh Serhiyenia](https://github.com/pulya10c.png?size=63)](https://github.com/pulya10c) 153 | [![Viktoryia Vorozhun](https://github.com/viktoriyavorozhun.png?size=63)](https://github.com/viktoriyavorozhun) 154 | [![Maksim Shastel](https://github.com/shastel.png?size=63)](https://github.com/shastel) 155 | [![Maksim Shylau](https://github.com/AlreadyBored.png?size=63)](https://github.com/AlreadyBored) 156 | [![Pavel Razuvalau](https://github.com/pavelrazuvalau.png?size=63)](https://github.com/pavelrazuvalau ) 157 | [![Dzmitry Varabei](https://github.com/dzmitry-varabei.png?size=63)](https://github.com/dzmitry-varabei) 158 | [![Varvara Deviaterikova](https://github.com/hallovarvara.png?size=63)](https://github.com/hallovarvara) 159 | [![Uladzimir Halushka](https://github.com/humanamburu.png?size=63)](https://github.com/humanamburu) 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /lectures/IDE-battle.md: -------------------------------------------------------------------------------- 1 | 2 | ### Video 3 | https://youtu.be/1TiJTQcreJ4 4 | 5 | 6 | ### Content 7 | 8 | __Command Line__ 9 | [10 Terminal Commands That Will Boost Your Productivity](http://code.tutsplus.com/articles/10-terminal-commands-that-will-boost-your-productivity--net-14105) 10 | 11 | __Visual Studio Code__ 12 | 13 | - Atom vs Visual Studio Code 14 | - Electron 15 | - Command “code” for terminal 16 | - The difference between a text editor and an IDE 17 | - VCS integration 18 | - Autocomplete. Language Server Protocol 19 | - Atom IDE 20 | - Useful extensions of VSCode: 21 | - vscode-icons 22 | - Path Intellisense 23 | - npm Intellisense 24 | - Git Blame 25 | - ESLint 26 | - EditorConfig for VS Code 27 | - File System Navigation 28 | - Refactoring. Renaming 29 | - Debugging in VS Code 30 | - Snippet 31 | - Command Palette 32 | - VS Code Settings: 33 | - User Settings 34 | - Workspace Settings 35 | - Programming code with ligatures 36 | - Emmet 37 | 38 | __JetBrains WebStorm__ 39 | - Licenses 40 | - Launching. Folder .idea 41 | - English spell checker 42 | - VCS integration (diff, commit, push etc.) 43 | - TODO 44 | - Autocomplete 45 | - Code analisys 46 | - Plugins 47 | - Terminal 48 | - Refactoring 49 | - Navigation in SourceCode 50 | - Clipboard 51 | - File template 52 | - Live Templates (Snippets) 53 | - Debugger 54 | - Searching Everywhere 55 | - Customization. Configuration 56 | - Emmet 57 | - Preview mode 58 | 59 | __Basic Tools__ [Slides](http://dzmitry-varabei.github.io/front-end-course/lecture-0-basic-tools/basic_tools.pptx) 60 | - jsfiddle 61 | - clip2net 62 | -------------------------------------------------------------------------------- /lectures/a11y.md: -------------------------------------------------------------------------------- 1 | ###Trainers: Stanislau Zubovich 2 | 3 | 4 | [A11Y Slides](http://stanislauzubovich.github.io/WCAG/) 5 | 6 | **Content** 7 | 8 | 1. A11Y 9 | - Introduction to accessibility 10 | - Techniques you can implement today 11 | - Introduction to screen readers and ARIA 12 | - Testing tips and tricks&tricks 13 | -------------------------------------------------------------------------------- /lectures/basic-algorithms.md: -------------------------------------------------------------------------------- 1 | # Lecture: Basic Algorithms 2 | 3 | ### Trainers: Denis Shutikov, Sergey Kovalchuk 4 | 5 | ### Slides: http://slides.com/sergey_kovalchuk/algorithms 6 | 7 | ### Video, part1: https://www.youtube.com/watch?v=cWwoU6fjYDQ&index=3&list=PLe--kalBDwjhdXudsOpKooP6q9bAl3rPG 8 | 9 | ### Video, part2: https://www.youtube.com/watch?v=ZUwWVUrd0iA&index=4&list=PLe--kalBDwjhdXudsOpKooP6q9bAl3rPG 10 | 11 | ### BST realization: https://jsfiddle.net/dj968tgk/ 12 | 13 | ### Content Parts 14 | 1 Common information about algorithms 15 | 2 BIG O 16 | 3 Sorting Algorithms 17 | 4 Data Structures + es6 map and set 18 | 19 | ### Practise 20 | 21 | https://www.codewars.com/kata/fun-with-trees-array-to-tree 22 | 23 | https://www.codewars.com/kata/is-a-number-prime 24 | 25 | https://www.codewars.com/kata/handshake-problem 26 | 27 | https://www.codewars.com/kata/head-tail-init-and-last 28 | 29 | https://www.codewars.com/kata/convert-a-linked-list-to-a-string 30 | 31 | https://www.codewars.com/kata/array-deep-count 32 | 33 | https://www.codewars.com/kata/mutual-recursion 34 | 35 | ### Links 36 | - [Interesting tasks with ideas 'How to..'](https://www.interviewcake.com/all-questions/javascript) 37 | - [Every Programmer Should Know](https://github.com/MR-MIG/EVERY-PROGRAMMER-SHOULD-KNOW) 38 | - [Interview Algorithm](http://www.thatjsdude.com/interview/js1.html) 39 | - [Interview Questions](https://khan4019.github.io/front-end-Interview-Questions/sort.html) 40 | -------------------------------------------------------------------------------- /lectures/chrome-devtools.md: -------------------------------------------------------------------------------- 1 | ### Slides 2 | - https://slides.com/amsterget/chrome-devtools 3 | 4 | ### Content 5 | * Overview 6 | * DevTools panels 7 | * Elements 8 | * Console 9 | * Sources 10 | * Network 11 | * Performance 12 | * Application 13 | * Example 14 | 15 | ### Useful links 16 | - [Developers.google.com](https://developers.google.com/web/tools/chrome-devtools) 17 | - [The Critical Rendering Path Course by Udacity & Google](https://www.udacity.com/course/website-performance-optimization--ud884) 18 | -------------------------------------------------------------------------------- /lectures/css-frameworks.md: -------------------------------------------------------------------------------- 1 | ### Slides 2 | - http://slides.com/avav/deck/fullscreen#/ 3 | 4 | ### Video 5 | - https://youtu.be/YiltJFTv_KM 6 | 7 | ### Content 8 | - An Introduction to CSS Frameworks 9 | - Types of frameworks 10 | - Why do we need frameworks 11 | - Features of frameworks 12 | - An Introduction to Bootstrap 13 | - Installation 14 | - File System 15 | - Grid System 16 | - Accessibility 17 | - Browser support 18 | - Bootstrap. CSS 19 | - normalize.css 20 | - Containers 21 | - Grid System 22 | - Typography 23 | - Tables 24 | - Forms 25 | - Buttons 26 | - Images 27 | - Helper classes 28 | - Bootstrap Components 29 | - Bootstrap. Javascript 30 | - Carousel 31 | - Modal 32 | - Dropdown 33 | - Scrollspy 34 | - Tab 35 | - Tooltip 36 | - Popover 37 | - Alert 38 | - Button 39 | - Collapse 40 | - Affix 41 | - Bootstrap Customization 42 | - ng-bootstrap library 43 | - An Introduction to ZURB Foundation 44 | - Differences between Bootstrap and Foundation 45 | 46 | ### Test task on bootstrap 47 | - https://www.codecademy.com/en/courses/web-beginner-en-yjvdd/0/1 48 | -------------------------------------------------------------------------------- /lectures/css-methodologies.md: -------------------------------------------------------------------------------- 1 | ## Object-Oriented CSS (OOCSS) 2 | 3 | link: http://oocss.org/grids_docs.html 4 | 5 | ## Atomic CSS 6 | 7 | link: https://acss.io/ 8 | 9 | ## Scalable and Modular Architecture for CSS (SMACSS) 10 | 11 | link: http://smacss.com/ 12 | 13 | ## Block, Element, Modifier (BEM) 14 | 15 | link: http://getbem.com/ 16 | 17 | link (ru): https://ru.bem.info/ 18 | -------------------------------------------------------------------------------- /lectures/css-preprocessors.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/uKLecRul8g4 3 | 4 | ### Slides 5 | - http://slides.com/ankh/gulp#/ 6 | - http://slides.com/ankh/sass#/ 7 | 8 | ### Content 9 | - Introduction to CSS preprocessors 10 | - Nesting 11 | - Import 12 | - Mixins 13 | - Extend / Inheritance 14 | - Operators 15 | - Comments 16 | - Variables 17 | - Color Functions 18 | - @media 19 | - @if, @for, @each, @while directive 20 | - Jedi-style 21 | - @at-root 22 | - Working with Gulp step by step 23 | -------------------------------------------------------------------------------- /lectures/css-recipies-and-layouts.md: -------------------------------------------------------------------------------- 1 | 2 | ### Slides 3 | 4 | - RWD + Flexbox: http://stanislauzubovich.github.io/RWD/ 5 | - CSS Grid Layout: http://slides.com/ra_levis/deck#/ 6 | - CSS Recipes: http://anastasia-tayanovskaya.github.io/css-recipes/ 7 | 8 | ### Video 9 | - https://youtu.be/k2GtDJKC6HQ 10 | #### CSS Recipes 11 | - https://youtu.be/DbutriT37aI 12 | - https://youtu.be/8IdwZzGeErQ 13 | 14 | ### Content 15 | 16 | #### RWD + Flexbox 17 | 1. What is RWD? 18 | 2. Core Techniques 19 | * Fluid Foundation 20 | * Flexible Content 21 | * Media Queries 22 | 3. Responsive Web Design (http://alistapart.com/article/responsive-web-design) 23 | 4. Mobile vs. Desktop browsing 24 | 5. Grid 25 | 6. Layout 26 | * Source Order Stacking 27 | * Content Chareography 28 | * Off Canvas 29 | 7. Typography 30 | * Readability 31 | 8. Images 32 | * Content 33 | * Bandwidth 34 | * Pixel density 35 | * Format 36 | 9. Image Solution(s) 37 | * SVG/WebP 38 | * Icon Fonts 39 | * Pixel density media queries 40 | * Picture(fill) 41 | 10. Media Queries 42 | * Desktop First vs. mobile First 43 | 11. Layout 44 | * Table 45 | * Float 46 | * CSS3 Layout Modules 47 | 12. Flexbox 48 | * display: flex 49 | * flex-direction 50 | * justify-content 51 | * align-items 52 | * align-self 53 | * flex 54 | * flex-grow 55 | * flex-shrink 56 | * flex-basis 57 | * order 58 | * flex-wrap 59 | * align-content 60 | 61 | ### CSS Grid Layout 62 | - What is CSS Grid 63 | - Browser Support 64 | - Grid parts: 65 | - Grid Container 66 | - Grid Item 67 | - Grid Line 68 | - Grid Track 69 | - Grid Cell 70 | - Grid Area 71 | - Container properties 72 | - display; 73 | - grid-template-columns, grid-template-rows 74 | - grid-template-areas 75 | - grid-template 76 | - grid-column-gap, grid-row-gap 77 | - justify-items 78 | - align-items 79 | - justify-content 80 | - align-content 81 | - grid-auto-columns 82 | - grid-auto-rows 83 | - grid-auto-flow 84 | - Property grid 85 | - Item properties 86 | - grid-column-start, grid-column-end 87 | - grid-row-start, grid-row-end 88 | - grid-column, grid-row 89 | - grid-area 90 | - justify-self 91 | - align-self 92 | 93 | #### CSS Recipes 94 | - Horizontal centering of the block element 95 | - Horizontal centering of texts 96 | - Vertical align of inline-block elements (2 techniques) 97 | - Centering of a block element with horizontal and vertical given parameters (2 techniques) 98 | - Centering of an element with unknown horizontal and vertical parameters 99 | - How to use pseudo elements :after and :before 100 | - How to center an element – useful links 101 | - How to trim texts with an ellipsis 102 | - How to stick a footer to the bottom of the page 103 | - Sliding door technique 104 | - How to use CSS3 for buttons 105 | - How to create different page layouts 106 | 107 | #### Useful links 108 | - https://www.codementor.io/css/tutorial/4-different-layout-techniques-create-single-page 109 | - https://helpx.adobe.com/dreamweaver/how-to/work-with-html-layout.html 110 | - http://positionly.com/blog/inbound-marketing/website-usability 111 | -------------------------------------------------------------------------------- /lectures/design-patterns.md: -------------------------------------------------------------------------------- 1 | ### Trainer: Maksim Bartoshyk 2 | 3 | #### Slides: 4 | http://slides.com/maxbartoshik/deck#/ 5 | 6 | ### Content 7 | 1. JavaScript Design Patterns 8 | - Constructor Pattern 9 | - Module Pattern 10 | - Revealing Module Pattern 11 | - Singleton Pattern 12 | - Observer Pattern 13 | - Mediator Pattern 14 | - Prototype Pattern 15 | - Command Pattern 16 | - Facade Pattern 17 | - Factory Pattern 18 | - Mixin Pattern 19 | - Decorator Pattern 20 | - Flyweight Pattern 21 | 2. JavaScript MV* Patterns 22 | - MVC Pattern 23 | - MVP Pattern 24 | - MVVM Pattern 25 | 3. Modern Modular JavaScript Design Patterns 26 | - AMD 27 | - CommonJS 28 | - ES Harmony 29 | 30 | ### Codewars 31 | - http://www.codewars.com/kata/undo-slash-redo 32 | - https://addyosmani.com/resources/essentialjsdesignpatterns/book/ 33 | - Dependency Injection: https://www.youtube.com/watch?v=IKD2-MAkXyQ 34 | - http://misko.hevery.com/2008/08/17/singletons-are-pathological-liars/ 35 | -------------------------------------------------------------------------------- /lectures/dom-events.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/vcXehC9JgGU (2016) 3 | - https://www.youtube.com/watch?v=G6_YTv78Q1g (2017) 4 | 5 | ### Slides 6 | - http://rolling-scopes.github.io/slides/school/dom-events/#/ 7 | 8 | ### Content 9 | * Triggers 10 | * Event Types 11 | * Mouse Events 12 | * Keyboard Events 13 | * Drag Events 14 | * Focus Events 15 | * Touch Events 16 | * Event Handling Models 17 | * inline 18 | * traditional 19 | * W3C 20 | * Event Object props and methods 21 | * Event capturing and bubbling 22 | * Event delegation 23 | 24 | ### Useful links 25 | - [An introduction to DOM Events](http://www.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/) 26 | - [Event capturing/bubbling explanation](https://www.youtube.com/watch?v=0sfPDJiMTXk) 27 | -------------------------------------------------------------------------------- /lectures/dom.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/TewWd-6ZrmE 3 | 4 | ### Slides 5 | - http://rolling-scopes.github.io/slides/school/dom/#/ 6 | 7 | ### Content 8 | * What is DOM? 9 | * `Node` props & methods 10 | * `Element` props & methods 11 | * `ClassList` API 12 | * `HTMLElement` props & methods 13 | * `document` 14 | 15 | ### Useful links 16 | - [Custom Elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) 17 | - [Shadow DOM 101](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/) 18 | -------------------------------------------------------------------------------- /lectures/es6.md: -------------------------------------------------------------------------------- 1 | 2 | ### ESLint & Styleguides 3 | 4 | #### Slides 5 | 6 | http://slides.com/uladzimirhalushka/deck-2-3 7 | 8 | http://slides.com/uladzimirhalushka/deck-2 9 | 10 | #### Video 11 | 12 | [2018](https://www.youtube.com/watch?v=SqC3MQZ2Ndg&list=PLe--kalBDwjhdXudsOpKooP6q9bAl3rPG) 13 | [2017](https://www.youtube.com/watch?v=tus1W_1Tx8U&index=14&list=PLe--kalBDwjhni4LpATaJscPwZUudxVHS) 14 | 15 | #### Content 16 | 17 | - ESLint & JSCS & Style guilde 18 | 19 | #### Useful links 20 | - http://www.smashingmagazine.com/2015/09/eslint-the-next-generation-javascript-linter/ 21 | -------------------------------------------------------------------------------- /lectures/event-loop-and-animations.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/dG5ZaHYdre8 3 | 4 | ### Slides 5 | - http://rolling-scopes.github.io/slides/school/event-loop/#/ 6 | - http://wontem.github.io/slides/animations/#/ 7 | 8 | ### Content 9 | 10 | #### Event Loop 11 | - Call stack 12 | - Event Loop 13 | - Callback queue 14 | - Web APIs 15 | 16 | #### Animations 17 | - CSS3 Transitions 18 | - CSS3 Transforms 19 | - requestAnimationFrame 20 | - Performance issues 21 | - Practical task 22 | 23 | ### Useful links 24 | 25 | #### Event Loop 26 | - http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html 27 | - [Why is setTimeout(fn, 0) sometimes useful? (читать до конца)](http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful) 28 | 29 | #### Animations 30 | - [CSS Timing Functions](http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/) 31 | - [High Performance Animations](http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/) 32 | - [Why Moving Elements With Translate() Is Better Than Pos:abs Top/left](http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/) 33 | -------------------------------------------------------------------------------- /lectures/float-positioning-error-analysis.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/RIdaM5U-fns 3 | -------------------------------------------------------------------------------- /lectures/fp.md: -------------------------------------------------------------------------------- 1 | Introduction to FP 2 | 3 | 1. FP Overview [2h+] [Зарегистрироваться на вебинар 17-APR-2018 20:00](https://attendee.gotowebinar.com/register/7634721060769420546) 4 | * Evolution of imperative programming 5 | * Lisp interpreter 6 | * Turing machine, Backus speech 7 | * Haskell origins 8 | * Lambda calculus 9 | * Type theory 10 | * Category theory 11 | * Denotational semantics 12 | * Immutable data, Circle-Ellipse, mutable collections problem 13 | * Formal logic, Curry-Howard isomorphism 14 | * FP today: landscape, languages, Computer Science, communities, the Rift between scientific and commercial programming 15 | * Correctness proof and code verification 16 | 17 | 2. Lambda Calculus [1.5h] [Зарегистрироваться на вебинар 22-APR-2018 11:00](https://attendee.gotowebinar.com/register/1416904740504341762) 18 | * Application, abstraction, terms 19 | * Reduction/conversion 20 | * SKI, iota 21 | * Church encoding: Boolean, Integer and related functions, Tuples 22 | * => Sum & Product types 23 | 24 | Task: Church encoding exercises 25 | 26 | 3. Combinators-based DSLs [1.5h] 27 | * Predicate logic: basic functions 28 | * Filtering with predicate combinators 29 | (*) Transforming predicate trees 30 | 31 | 3. Basic Data Structures [1.5h] 32 | * Immutability & persistence 33 | * List as a computation, recursive definition 34 | * List: Folding, mapping, etc. 35 | * ... 36 | 37 | Task: List functions 38 | 39 | 4. Recursion [1.5h] 40 | * Recursion, Y combinator, memoization 41 | * Divide & Conquer algorithms 42 | * Basic recursion schemes 43 | * TCO, trampolining 44 | 45 | Task: D&C problems: imperative vs. recursive 46 | 47 | 5. Lazy evaluation [1.5h] 48 | * Pros and cons of LE 49 | * LE & pure functions 50 | * Lazily-evaluated sequences (<= List) 51 | * LE for modularity: producer & consumer, tic-tac-toe pearl 52 | 53 | 6. Types I [2h] 54 | * ADTs, Sum & Product revision 55 | * Maybe 56 | * Functor, variance, Bifunctor etc. 57 | * Lenses 58 | 59 | 7. Applicative validation [2h] 60 | * What's wrong with imperative exception handling 61 | * Applicative functors 62 | * Applicative validation with Either 63 | * Validation functors 64 | 65 | 8. Types II [1.5h] 66 | * Monad: definition, motivation 67 | * Do notation 68 | * Maybe/Either example 69 | 70 | 9. Types III [2h] 71 | * IO monad 72 | * Continuation monad 73 | * State monad 74 | 75 | 10. Mogensen-Scott encoding [1.5h] 76 | * Scott encoding: Maybe, Either, enums, Bool, List, Binary Tree 77 | * matching function 78 | * Mogensen extension 79 | 80 | 11. Typeclasses [2.5h] 81 | * Encoding typeclasses as function args/products 82 | * Show typeclass 83 | * Monoid typeclass 84 | * Functor, Applicative, Monad typeclasses 85 | * Writer monad 86 | * Foldable & Traversable 87 | * Deriving Functor and Applicative from Monad 88 | 89 | 12. Parsing I [2h] 90 | * Parser monad, combinators 91 | * Lazy JSON parser 92 | 93 | 13. Parsing II [2.5h] 94 | * Lazy JSON parser (continued) 95 | * Aeson 96 | * Parsing untyped lambda-calculus 97 | * Transforming ASTs 98 | * Code generation and optimization 99 | 100 | 14. Correctness verification [4h] 101 | * Generative testing: QuickCheck, jsverify 102 | * Theorem proving, Liquid Haskell 103 | * Dependent types 104 | * Prove correctness: example app 105 | 106 | -------------------------------------------------------------------------------- /lectures/git.md: -------------------------------------------------------------------------------- 1 | ### Git Basics 2 | 3 | #### Trainers: Uladzimir Halushka 4 | 5 | #### Slides 6 | 7 | http://slides.com/uladzimirhalushka/deck-1 8 | 9 | #### Video 10 | 11 | https://youtu.be/ankvwnNJFPA 12 | 13 | ### Agenda 14 | - Git 15 | - GitHub 16 | - Pull Request Workflow 17 | 18 | #### Content 19 | - Introduction to Version Control 20 | - The cd command 21 | - .gitconfig file 22 | - Vi editor 23 | - Cloning a repository 24 | - What is "origin" in Git? 25 | - git status 26 | - git add 27 | - git commit 28 | - git push 29 | - git log 30 | - git revert 31 | - workspace - index - local repository - remote repository 32 | - clear command 33 | - touch command 34 | - git commit -m 35 | - git checkout 36 | - Branching Strategy 37 | - git merge 38 | - git fetch 39 | - git pull 40 | - How to resolve merge conflicts in Git 41 | - git stash 42 | - .gitignore 43 | - gh-pages 44 | - Git guidelines 45 | 46 | ## Git guidelines 47 | In general, the preferred Git workflow is: 48 | 49 | 1. Create a branch from `master`, check it out, do your work. 50 | Please, use required branch name from the task. If task name consist of two words, use `-` for separating. For example: 51 | ~~taskName~~, ~~task_name~~, `task-name` 52 | 53 | 2. Commit changes. Required commit name is `TASK_NAME[/TYPE]: message`. 54 | 55 | | Good commit naming |Bad commit naming| 56 | |:--------------------|:----------------| 57 | |`binary-tree/feature: implement traverse method`| `init commit` | 58 | |`binary-tree/fix: error in the empty tree`|`fix`| 59 | |`youtube: rename constans`|`чейнджи`| 60 | 61 | _After that optionally push your branch up to the remote repository_ 62 | 63 | 64 | 65 | ## GitHub Pull Request (PR) guidelines 66 | 67 | 1. PR name should contains **the task name** and probably additional info. 68 | 2. Changes **must not contain commented code, unnecessary files, changes from other branches and generated files** like *.bundle.js. Please review your changes before contributing. .editorconfig, .gitignore, etc. can be included. 69 | 3. Comments in the PR are good practice. 70 | 4. [How to write the perfect Pull Request](https://github.com/blog/1943-how-to-write-the-perfect-pull-request) 71 | 72 | 73 | 74 | ## Git cheatsheet 75 | Git allows a developer to copy a remote subversion repository to a local instance on their workstation, do all their work and commits in that local repository, then push the state of that repository back to a central facility (**github**). 76 | 77 | | Command |Meaning| 78 | |:--------------------|:----------------| 79 | |`git clone git@github.com:r/r.git`| Get a copy of the central storage facility (the repository) | 80 | |`git branch first-task`|Create a _local_ branch called "first-task" | 81 | |`git checkout first-task` |Swith to the first-task branch | 82 | |`git checkout -b first-task` |Create and switсh to the first-task branch | 83 | |`git add index.js` |Add `index.js` contents to the index.| 84 | |`git add .` |Add all content from the current folder to the index| 85 | |`git commit index.js` |Record `index.js` changes to the repository| 86 | |`git push origin first-task` |Push the current state of your `first-task` branch, including all commits, up to github.| 87 | |`git pull` |Bring your local branch up-to-date with the state of the remote branch on github.| 88 | 89 | 90 | #### Useful links 91 | - http://try.github.io/ 92 | - https://git-scm.com/book/id/v2/Getting-Started-Git-Basics 93 | - http://alistapart.com/article/the-art-of-the-commit 94 | - https://www.atlassian.com/git/tutorials/merging-vs-rebasing 95 | - http://haacked.com/archive/2014/07/28/github-flow-aliases/ 96 | - https://medium.com/code-adventures/git-conventions-a940ee20862d 97 | 98 | #### Online courses 99 | - https://www.codeschool.com/courses/try-git 100 | - https://www.codeschool.com/courses/git-real 101 | -------------------------------------------------------------------------------- /lectures/how-browser-works.md: -------------------------------------------------------------------------------- 1 | ###Trainer: Dzmitry Varabei 2 | 3 | ###Slides 4 | - [How browser works. Paint and Compositing](http://rolling-scopes.github.io/slides/school/chrome-paint-and-compositing/ChromeInternalsPaint.pptx) 5 | - [Network Basics](http://dzmitry-varabei.github.io/front-end-course/network.pptx) 6 | 7 | ###Content 8 | 1. Network basics 9 | - Bandwidth and Latency 10 | - General HTTP Request/Response lifecycle 11 | - SPDY 12 | - Google PageSpeed Insights 13 | - Google WebPageTest 14 | 2. Browser Internals 15 | - Page render cycle 16 | - Frame budget 17 | - Paint 18 | - Compositing 19 | - Software vs Hardware accelerated 20 | - animations 21 | - Profiling Tools 22 | 23 | ###Links: 24 | - https://github.com/alex/what-happens-when 25 | - http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/ 26 | - Delivering the goods by Paul Irish 27 | - [Slides](https://docs.google.com/presentation/d/1MtDBNTH1g7CZzhwlJ1raEJagA8qM3uoV7ta6i66bO2M/present?slide=id.g3eb97ca8f_19) 28 | - [Video](https://www.youtube.com/watch?v=R8W_6xWphtw&feature=youtu.be) 29 | - [WebPageTest lightning demo](https://www.youtube.com/watch?v=4Q9e58_08E4) 30 | 31 | ###Online Courses 32 | - https://www.udacity.com/course/website-performance-optimization--ud884 33 | - https://www.udacity.com/course/browser-rendering-optimization--ud860 34 | - https://developers.google.com/web/fundamentals/performance/?hl=en 35 | 36 | ###Home task 37 | https://github.com/udacity/frontend-nanodegree-mobile-portfolio 38 | -------------------------------------------------------------------------------- /lectures/html-css-basics.md: -------------------------------------------------------------------------------- 1 | ## HTML & CSS Basics 2 | 3 | ### Trainers: Sergey Shalyapin, Darya Sabinina 4 | 5 | ### Slides 6 | 7 | https://slides.com/sergeyshalyapin/html_css_basics 8 | 9 | ### Video 10 | 11 | https://youtu.be/FCuMPo-omJ4 (Part 1) 12 | 13 | https://youtu.be/OOVayP9HDTg (Part 2) 14 | 15 | ### Task 16 | 17 | https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-1/HTML-CSS-self-ru.md 18 | 19 | ### Content 20 | 1. Intro 21 | - What is html/css 22 | - Short history 23 | - Browser wars (briefly) 24 | 25 | 2. HTML 26 | - Tag (tag structure) 27 | - Document Structure 28 | - Doctype (different styles) 29 | - Структура html 30 | - CSS applying 31 | - JS applying 32 | - Tags classification by purpose 33 | - html5 tags 34 | - Tags classification by block / inline 35 | - Mandatory attributes 36 | - data-attributes 37 | - Normal flow 38 | - Elements sequence with normal flow 39 | - Validation 40 | - What tests does HTML code pass through 41 | - Is it good ideas to use validation 42 | 43 | 3. CSS 44 | - Syntax 45 | - Selectors 46 | - single 47 | - multiple 48 | - examples 49 | - \* 50 | - tag-name 51 | - #id-name 52 | - .class-name 53 | - elem elem 54 | - elem > elem 55 | - elem + elem 56 | - elem ~ elem 57 | - elem[attr], elem[attr=’value’], elem[attr^=’value’], elem[attr$=’value’] 58 | - elem[data-name=’value’] 59 | 60 | ### Useful links 61 | 62 | Validator - https://validator.w3.org/ 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /lectures/http.md: -------------------------------------------------------------------------------- 1 | ### Trainer: Uladzimir Halushka 2 | 3 | ### Slides 4 | http://rolling-scopes.github.io/slides/school/HTTP 5 | 6 | ### Video - HTTP / HTTP2 / AJAX / Promises | Wednesday, May 8, 2019 7 | - https://youtu.be/x3ByCM78ETw (Part 1) 8 | - https://youtu.be/iTi1bXSJre0 (Part 2) 9 | 10 | ### Content 11 | 1. History and basic structure of WWW 12 | - CERN, Sir Timothy John «Tim» Berners-Lee, Håkon Wium Lie 13 | - Client-Server model 14 | - DNS 15 | - TCP-IP; Vinton Gray “Vint” Cerf 16 | - Model OSI 17 | 18 | 2. Structure of HTTP protocol 19 | - Methods 20 | - Parameters 21 | - Cookies 22 | - Headers 23 | - Status codes 24 | 25 | 3. HTTP features 26 | - Simple 27 | - Stateless 28 | - Pull protocol 29 | - Scaleable+ a little bit about load balancers 30 | - Idempotency 31 | 32 | 4. Web Services 33 | - XML-RPC 34 | - SOAP 35 | - REST 36 | 37 | 5. Security 38 | - Session 39 | - HTTPS 40 | 41 | 6. Conclusion 42 | - Tips & Tricks 43 | - Useful programs & commands 44 | - What to read 45 | 46 | ### Links 47 | - [High Performance Browser Networking by Ilya Grigorik](http://chimera.labs.oreilly.com/books/1230000000545) 48 | 49 | ### Разбор лекций: 50 | - DNS (Domain Name System) - https://youtu.be/x3ByCM78ETw?t=571 51 | - DNS (Lookup time) - https://youtu.be/x3ByCM78ETw?t=677 52 | - DNS statistics - https://youtu.be/x3ByCM78ETw?t=795 53 | - http - https://youtu.be/x3ByCM78ETw?t=850 54 | - http evolution - https://youtu.be/x3ByCM78ETw?t=1004 55 | - connection: keep-alive - https://youtu.be/x3ByCM78ETw?t=1206 56 | - проблема 6 соединений - https://youtu.be/x3ByCM78ETw?t=1262 57 | - HTTP 1.1 features - https://youtu.be/x3ByCM78ETw?t=1411 58 | - GZIP сжатие информации - https://youtu.be/x3ByCM78ETw?t=1559 59 | - HTTP metods - https://youtu.be/x3ByCM78ETw?t=1615 60 | - POST - https://youtu.be/x3ByCM78ETw?t=1748 61 | - status code defenition - https://youtu.be/x3ByCM78ETw?t=1783 62 | - 500 server error - bed practices - https://youtu.be/x3ByCM78ETw?t=1876 63 | - 404 client error - bed practice - https://youtu.be/x3ByCM78ETw?t=1920 64 | - 301 redirection - https://youtu.be/x3ByCM78ETw?t=1938 65 | - cookies - https://youtu.be/x3ByCM78ETw?t=2048 66 | - JSON web tokens (jwt) - https://youtu.be/x3ByCM78ETw?t=2520 67 | - set cookies - https://youtu.be/x3ByCM78ETw?t=2644 68 | - let's imagine - https://youtu.be/x3ByCM78ETw?t=2725 69 | - web-services - https://youtu.be/x3ByCM78ETw?t=3086 70 | - REST (request/response) - https://youtu.be/x3ByCM78ETw?t=3465 71 | - AJAX - https://youtu.be/iTi1bXSJre0 72 | - XMLHttpRequest - https://youtu.be/iTi1bXSJre0?t=126 73 | - example - https://youtu.be/iTi1bXSJre0?t=412 74 | - jQuery - Ajax - https://youtu.be/iTi1bXSJre0?t=734 75 | - Same Origin Policy - https://youtu.be/iTi1bXSJre0?t=809 76 | - CORS - https://youtu.be/iTi1bXSJre0?t=1080 77 | - long polling - https://youtu.be/iTi1bXSJre0?t=1413 78 | - AJAX pros - https://youtu.be/iTi1bXSJre0?t=1634 79 | - promise() - https://youtu.be/iTi1bXSJre0?t=1759 80 | - промисификация - https://youtu.be/iTi1bXSJre0?t=2316 81 | - error handling - https://youtu.be/iTi1bXSJre0?t=2516 82 | - Promise.all(array), Promise.race(array) - https://youtu.be/iTi1bXSJre0?t=2744 83 | - Fetch () - https://youtu.be/iTi1bXSJre0?t=2945 84 | - лексика: 85 | - resolve - разрешить 86 | - reject - отклонить 87 | -------------------------------------------------------------------------------- /lectures/inheritance-in-js-and-es6-classes.md: -------------------------------------------------------------------------------- 1 | ### Slides: 2 | - https://kirilknysh.github.io/js-classes-talk/#/ 3 | 4 | ### Video 5 | - https://youtu.be/O462BetYst8 6 | 7 | ### Content 8 | - What is class 9 | - What is object 10 | - key 11 | - value 12 | - Classes in JS 13 | - Object literals 14 | - Functions 15 | - ES2015 classes 16 | - typeof 17 | - instanceof 18 | - Inheritance 19 | - classical 20 | - prototypal 21 | - Inheritance 22 | - Crockford way 23 | - ES5 way 24 | - ES2015 way 25 | - Why classes are good 26 | - Why classes are bad 27 | 28 | ### Useful links 29 | - [Composition over Inheritance](https://www.youtube.com/watch?v=wfMtDGfHWpA) 30 | - https://github.com/joshburgess/not-awesome-es6-classes 31 | - http://mrale.ph/v8/resources.html 32 | - [JS Core by Dmitry Soshnikov](http://dmitrysoshnikov.com/ecmascript/ru-javascript-the-core/) 33 | 34 | ### Practise 35 | - http://www.codewars.com/kata/santaclausable-interface 36 | - http://www.codewars.com/kata/new-with-apply 37 | - http://www.codewars.com/kata/extract-nested-object-reference 38 | - http://www.codewars.com/kata/array-helpers 39 | -------------------------------------------------------------------------------- /lectures/intro.md: -------------------------------------------------------------------------------- 1 | Информация переехала в https://github.com/rolling-scopes-school/docs 2 | -------------------------------------------------------------------------------- /lectures/js-arrays.md: -------------------------------------------------------------------------------- 1 | 2 | ### Video 3 | - https://youtu.be/RspM9-i2M3w 4 | 5 | ### Links: 6 | https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype 7 | 8 | ### Content 9 | 1. Arrays as a data structure 10 | 2. Arrays performance 11 | 3. Creating arrays and array literals 12 | 4. Array instance methods 13 | 5. Array class methods 14 | 7. Iterables 15 | 8. Generators 16 | 6. Fun with arrays: problems, puzzles etc. 17 | -------------------------------------------------------------------------------- /lectures/js-data-types.md: -------------------------------------------------------------------------------- 1 | ### Slides 2 | - [JS Data Types](https://docs.google.com/presentation/d/1C1ri0y3tVPgbFSgg2u-ohUzZasT6WlPTB-dViNH1Eyo/embed) 3 | 4 | ### Video 5 | 6 | https://youtu.be/Jnf--72z8bs 7 | 8 | ### Content 9 | 10 | 1. Data types 11 | - JS vs C++ data types 12 | - Primitive data types 13 | - Variable declaration 14 | - Declaration with assignment 15 | - Single var pattern 16 | - Null 17 | - typeof 18 | - Primitives as objects 19 | - Number 20 | - NaN 21 | - String 22 | - Convertion 23 | - Boolean 24 | - Objects 25 | - Everything is object 26 | - Dynamic nature 27 | - Object like a map 28 | - Arrays 29 | - Functions 30 | - Type coercions 31 | - Equality vs Identity 32 | - Unusual operators 33 | - Constants 34 | - Comments 35 | - Eval 36 | - Embedding script in HTML 37 | 38 | ### Practice 39 | - http://www.codewars.com/kata/opposite-number 40 | - http://www.codewars.com/kata/basic-mathematical-operations 41 | - http://www.codewars.com/kata/printing-array-elements-with-comma-delimiters 42 | - http://www.codewars.com/kata/transportation-on-vacation 43 | - http://www.codewars.com/kata/calculating-with-functions 44 | - http://www.codewars.com/kata/get-the-middle-character 45 | - http://www.codewars.com/kata/partition-on 46 | - http://www.codewars.com/kata/word-count 47 | -------------------------------------------------------------------------------- /lectures/js-functions-part-two.md: -------------------------------------------------------------------------------- 1 | ### Slides: 2 | - [Слайды за 2018](https://kirilknysh.github.io/js-functions-talk/#/) 3 | - [Слайды за 2017](http://slides.com/anna_protasevich/functions#/) 4 | 5 | ### Video 6 | - [Запись за 2018](https://www.youtube.com/watch?v=h5o_tgEMKxY) 7 | - [Запись за 2017](https://youtu.be/kbhiRFwFZbU) 8 | 9 | ### Content 10 | - Execution context 11 | - Global Code 12 | - Function Code 13 | - Variable object 14 | - Global object 15 | - Activation object 16 | - Arguments object 17 | - This 18 | - Scope, Scope chain 19 | -------------------------------------------------------------------------------- /lectures/js-functions.md: -------------------------------------------------------------------------------- 1 | ### Slides: 2 | - http://dzmitry-varabei.github.io/front-end-course/lecture-5-func/#/ 3 | - http://dzmitry-varabei.github.io/front-end-course/lecture-5-func/index-part2.html#/ 4 | 5 | ### Video 6 | - https://youtu.be/vgg0ZpG4VYc (Part I) 7 | - https://youtu.be/1eaifEEfbIw (Part II) 8 | 9 | ### Content 10 | 11 | __Part I__ 12 | - Function declaration vs function expression 13 | - Function constructor 14 | - Strategy of passing arguments to function 15 | - First class functions 16 | - Functions as data 17 | - Static members 18 | - return statement 19 | - Function arguments 20 | - Pseudo parameters 21 | - "arguments" object 22 | - "this" keyword 23 | - types of invocation 24 | 25 | __Part II__ 26 | - Duck Typing 27 | - Lexical or static scope 28 | - Closures 29 | - Environment terminology 30 | - [[Scope]] 31 | - Private methods 32 | - Immediately-Invoked Function Expression 33 | - Chaining 34 | - Singleton, Decorator, memoization ... 35 | 36 | ### Useful links 37 | 38 | 1. JSCore - http://dmitrysoshnikov.com/ecmascript/ru-javascript-the-core/ 39 | 2. How the V8 engine works? 40 | * https://www.youtube.com/watch?v=VhpdsjBUS3g 41 | * http://www.youtube.com/watch?v=UJPdhx5zTaw 42 | 3. Memory Management Masterclass with Addy Osmani 43 | * https://www.youtube.com/watch?v=LaxbdIyBkL0 44 | 45 | ### Practise 46 | 47 | __Simple Functions:__ 48 | - http://www.codewars.com/kata/calculating-with-functions 49 | - http://www.codewars.com/kata/partition-on 50 | 51 | __Arrays:__ 52 | - http://www.codewars.com/kata/prefill-an-array 53 | 54 | __Closure and functions:__ 55 | - http://www.codewars.com/kata/closures-and-scopes 56 | - http://www.codewars.com/kata/a-function-within-a-function 57 | - http://www.codewars.com/kata/can-you-keep-a-secret 58 | - http://www.codewars.com/kata/using-closures-to-share-class-state 59 | - http://www.codewars.com/kata/a-chain-adding-function 60 | - http://www.codewars.com/kata/function-cache 61 | - http://www.codewars.com/kata/function-composition 62 | - http://www.codewars.com/kata/function-composition-1 63 | -------------------------------------------------------------------------------- /lectures/js-intro.md: -------------------------------------------------------------------------------- 1 | ### Slides 2 | - http://dzmitry-varabei.github.io/front-end-course/lecture-1-history/#/ 3 | 4 | ### Video 5 | 6 | https://youtu.be/V2f7mXMYtYA 7 | 8 | ### Content 9 | 10 | 1. JavaScript Overview. 11 | * History 12 | * Standardisation 13 | * Evolution 14 | * WAT 15 | * TC39 16 | * JavaScript is everywhere 17 | * Asm.js 18 | * Emscripten 19 | 2. The State Of JavaScript 20 | * https://stateofjs.com/2016/introduction/ 21 | 22 | ### Links 23 | - [Хороший учебник по JS c заданиями - learn.javascript.ru](http://learn.javascript.ru/) 24 | - [What the... JavaScript?](https://www.youtube.com/watch?v=2pL28CcEijU) 25 | - [WAT](https://www.destroyallsoftware.com/talks/wat) 26 | -------------------------------------------------------------------------------- /lectures/js-scope.md: -------------------------------------------------------------------------------- 1 | ### Slides: 2 | - [Слайды за 2018](https://kirilknysh.github.io/js-scope-talk/#/) 3 | - [Слайды за 2017](http://dzmitry-varabei.github.io/front-end-course/lecture-3-recap-scope/scope.pptx) 4 | 5 | ### Video: 6 | - [Видео за 2018](https://www.youtube.com/watch?v=c_rHAYNBotQ) 7 | - [Видео за 2017](https://youtu.be/vgg0ZpG4VYc) 8 | 9 | 10 | ### Content: 11 | - Scopes defenition 12 | - Nested scope 13 | - Shadowing 14 | - Hoisting 15 | - No block scope 16 | - Global Scope 17 | - Global Object 18 | - Global variables are evil 19 | - ES6 __let__ and __const__ 20 | -------------------------------------------------------------------------------- /lectures/lodash.md: -------------------------------------------------------------------------------- 1 | ### Slides 2 | - https://drive.google.com/file/d/0Byg079culxKTdTUxUWduTzhfazQ/view 3 | 4 | ### Video 5 | - https://youtu.be/RIp8cF5yTY0 6 | -------------------------------------------------------------------------------- /lectures/maintainable-css.md: -------------------------------------------------------------------------------- 1 | Video: https://www.youtube.com/watch?v=3O-yagacLAg 2 | Slides: https://docs.google.com/presentation/d/1TfqPMBWiHgQJtJPofqkzuGeahaKmzRqVVLfXtmk5BQc/edit 3 | 4 | 5 | [CSS Coding Standards and Guide](https://docs.google.com/document/d/1VuK4txlVwjtm7Y1JuonEfGr5eUpWOIU_KyLoMVM1Mj4/edit?usp=sharing) 6 | [ HTML Academy Codeguide](https://htmlacademy.github.io/codeguide/) 7 | -------------------------------------------------------------------------------- /lectures/match-match-game-error-analysis.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/1fE9sX_vwvE 3 | -------------------------------------------------------------------------------- /lectures/photoshop-basics.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/0bLAhQPAoAw 3 | 4 | ### Content 5 | 6 | __Photoshop Basics (Part I)__ 7 | - Grid 8 | - Ruler 9 | - Layers 10 | - Fonts 11 | - Color picker 12 | - Opacity 13 | - Body width vs content width 14 | - Icons. Sprites. SVG 15 | - Shortcut keys 16 | - Preferences 17 | 18 | __From PSD to HTML (Part II)__ 19 | 20 | - Logo 21 | - Interactive navigation bar 22 | - Header 23 | - Filler text “Lorem ipsum…” 24 | - Separator. Colorzilla 25 | - Font units 26 | - Form. Field types. Interactive button 27 | - Footer 28 | 29 | ### Useful links 30 | - caniuse: http://caniuse.com 31 | - fontsquirrel: https://www.fontsquirrel.com/tools/webfont-generator 32 | - spritegen: https://spritegen.website-performance.org/ 33 | - gradient generator: http://www.colorzilla.com/gradient-editor/ 34 | - triangle generator: http://apps.eky.hk/css-triangle-generator/ 35 | - perfectPixel: https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en 36 | - page ruler: https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en 37 | -------------------------------------------------------------------------------- /lectures/position-floats-semantics-css3.md: -------------------------------------------------------------------------------- 1 | ### Slides 2 | - [Box Model](http://slides.com/maria_putyrskaya/css-elements-layout-and-position#/) 3 | - [CSS3 Basics](http://slides.com/eugenekravch/deck) 4 | - [Semantics](http://slides.com/maria_putyrskaya/semantics#/) 5 | 6 | ### Video 7 | - https://youtu.be/gYYWe7vlEQk 8 | 9 | ### Improve your CSS selectors skills: 10 | http://flukeout.github.io/ 11 | 12 | ### Content 13 | 1. HTML 14 | - Box Model 15 | - Width/Height 16 | - Paddings 17 | - Borders 18 | - Margins 19 | - box-sizing 20 | - Float and Clear 21 | - Position 22 | - Static 23 | - Relative 24 | - Absolute 25 | - Fixed 26 | - Applying the layers 27 | - Z-index 28 | 29 | 2. CSS3 30 | - border-radius 31 | - box-shadow, text-shadow 32 | - RGBA 33 | - Gradient 34 | - Transition/Transform 35 | - How to set a color 36 | 37 | 3. Semantics 38 | - Semantic code 39 | - Element and its properties 40 | - How to name classes 41 | - Combinations of elements 42 | - SEO friendly 43 | - Сode style 44 | - ID vs. Class 45 | -------------------------------------------------------------------------------- /lectures/promises-game-dev.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/OyQToid6w8E (2017) 3 | - https://www.youtube.com/watch?v=0fFg3c4C9tA (2018) 4 | 5 | ### Slides 6 | - http://andrei-yanovich.github.io/ajax-talk/#/ 7 | - http://andrei-yanovich.github.io/promise-talk/#/ 8 | - https://docs.google.com/presentation/d/1jZ-ucWUsklFmbOrMwZNHagR_ABy0zHSv-RSC2KY6kIk/edit#slide=id.p 9 | 10 | ### Content 11 | * Ajax 12 | * WTF is ajax (sync vs async web app model) 13 | * History 14 | * XHR api (content types, status, readyState, onreadystatechange, props, methods) 15 | * JQuery ajax 16 | * Same origin policy 17 | * JSONP 18 | * CORS 19 | * COMET, WS 20 | * pros/cons 21 | * Promise: 22 | * JQuery deferreds API 23 | * Examples 24 | * Promise 25 | * Promise states 26 | * Promise API 27 | * Example with ajax 28 | -------------------------------------------------------------------------------- /lectures/refactoring.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | https://www.youtube.com/watch?v=L0wL7Vrdl5o 3 | 4 | ### Slides 5 | - https://docs.google.com/presentation/d/1OVhtAQnkVE9w2tBe6_ZVFOtCK-k8Rt1aSxo9pIbdhiY/edit 6 | - https://docs.google.com/presentation/d/1yy9zFOtaSdKhicjb7JPgYcNOrUNLG3yZ9esaHHgmEi0/edit#slide=id.p 7 | -------------------------------------------------------------------------------- /lectures/responsive-web-design.md: -------------------------------------------------------------------------------- 1 | # Responsive Web Design 2 | -------------------------------------------------------------------------------- /lectures/rs-online-development.md: -------------------------------------------------------------------------------- 1 | # Цикл вебинаров "The Rolling Scopes App development" 2 | 3 | В данной серии вебинаров планируется вести разработку RSSchool App попутно разбирая и обсуждая различные темы. 4 | Ведущие: Дима Воробей и Андрей Лесницкий 5 | 6 | # Playlist 7 | https://www.youtube.com/watch?v=pzRiqBZh-O4&list=PLe--kalBDwjhxK4bQHD8zpAp-RuhCHu7k 8 | 9 | # Выпуски 10 | ### #1 Git, commit & pull request 11 | Темы обсуждения: 12 | - git 13 | - git aliases 14 | - interactive rebase 15 | - pull request best practices 16 | - commits templates 17 | - pull request templates 18 | 19 | Запись - https://youtu.be/pzRiqBZh-O4 20 | 21 | ### #2 NPM & Node.js basics 22 | Темы обсуждения: 23 | - что такое nodejs? 24 | - что такое version management на примере `nvm` и `n` 25 | - что такое `d8` 26 | - https://ngrok.com/ 27 | - https://www.npmjs.com/package/http-server 28 | - https://www.npmjs.com/package/live-server 29 | - https://github.com/Unitech/pm2 30 | - Список приложений и инструментов, которые Андрей использует https://github.com/lesnitsky/my-setup 31 | - node.js debugging basics 32 | - .gitignore 33 | - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 34 | - https://expressjs.com/, request/response lifecycle 35 | 36 | Запись - https://youtu.be/jX9fJwHq6VU 37 | 38 | ### #3 Типовая стуректура проекта, package.json best practices 39 | Темы обсуждения: 40 | - Semantic Versioning https://semver.org/ 41 | - https://www.npmjs.com/ 42 | - yarn vs npm 43 | - package.json structure 44 | - https://help.github.com/articles/licensing-a-repository/ 45 | - npm shrinkwrap 46 | - npm scripts 47 | - .editorconfig 48 | - yeoman / create react app 49 | - basics of unit testing 50 | - eslint 51 | 52 | Запись - https://www.youtube.com/watch?v=4psWjsQOSAQ 53 | 54 | ### #4 REST API 55 | Запись - https://www.youtube.com/watch?v=1EmtUW47o2g 56 | 57 | - https://www.getpostman.com/ 58 | - mz-modules 59 | 60 | ### #5 REST API 61 | Запись - https://youtu.be/2XBnzkugvJI 62 | 63 | - генерация нового express проекта 64 | - структура express проекта 65 | - express middleware 66 | - проблемы с обработкой ошибок 67 | - unit tests 68 | - proxyquire 69 | 70 | 71 | # Backlog 72 | http://www.passportjs.org/, MongoDB 73 | - pre commit hooks 74 | - merge conflicts 75 | - PR review 76 | 77 | ### Обсуждение и вопросы ведутся в Slack 78 | https://join.slack.com/t/rsschool-app/shared_invite/enQtNDU4Mjc5MDQyODUzLTEzMWIzMDNkNGQwZTBiYzBmYThjOTY5NWIzNGMxOTIwN2RhZDFlYzNkMDU1MDM4OGE3OWY2ZWIxMTM1NTZhMDE 79 | -------------------------------------------------------------------------------- /lectures/rsschool_for_humanities.md: -------------------------------------------------------------------------------- 1 | # RSSchool для гуманитария 2 | 3 | ### Описание 4 | ``` 5 | LuffiLast Saturday at 9:20 PM 6 | В понедельник стартует новый набор и в субботу я бы хотел провести небольшую лайфкодинг 7 | сессию под тегом "RSSchool для гуманитария" 8 | Смысл в том, что я сам когда начинал учиться то по сути все команды вроде npm git и т.п. 9 | делал зачастую не понимая их значения и в кодинг сессии я просто вместе с теми 10 | кто придет разберу первый таск от момента как его скачать, что такое npm и зачем мы его жмем, 11 | разберу зачем нужен package.json, помогу поставить VSCode и объясню как в нем дебажить 12 | ``` 13 | -------------------------------------------------------------------------------- /lectures/screencast/git-ru.md: -------------------------------------------------------------------------------- 1 | # RS School - git 2 | 3 | ## 1. Git Basics 4 | 5 | #### Автор: Антон Белый 6 | 7 | #### Видео 8 | 9 | [RSSchool](https://www.youtube.com/watch?v=p2cwXO9Nkrc&feature=youtu.be "GIT Basics") 10 | 11 | #### Лекция 12 | 13 | [RSSchool](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/git.md "GIT Basics") 14 | 15 | #### Дополнительные материалы 16 | 17 | [Git Screencast on learn.javascript.ru](https://learn.javascript.ru/screencast/git "Git Screencast on learn.javascript.ru") 18 | 19 | -------------------------------------------------------------------------------- /lectures/screencast/stage-1-en.md: -------------------------------------------------------------------------------- 1 | Screencasts for stage #1 2 | -------------------------------------------------------------------------------- /lectures/screencast/stage-1-ru.md: -------------------------------------------------------------------------------- 1 | # RS School - stage 1 2 | 3 | ## 2. Browsers & IDEs 4 | 5 | #### Author: Сергей Шаляпин 6 | 7 | #### Video 8 | 9 | IMAGE ALT TEXT HERE 12 | 13 | [RSSchool](https://www.youtube.com/watch?v=soN8Qxe56Zw&list=PLe--kalBDwjj81fKdWlvpLsizajSAK-lh&index=9 "Browsers & IDEs") 14 | 15 | [01:35](https://youtu.be/soN8Qxe56Zw?t=95) - Файлы в вебе и протоколы их передачи 16 | [11:30](https://youtu.be/soN8Qxe56Zw?t=690) - Текстовые редакторы и IDE 17 | [29:25](https://youtu.be/soN8Qxe56Zw?t=1765) - Браузеры 18 | [44:50](https://youtu.be/soN8Qxe56Zw?t=2690) - Практика 19 | [01:14:52](https://youtu.be/soN8Qxe56Zw?t=4492) - Как работать с файлами PSD 20 | 21 | #### Slides 22 | 23 | [RSSchool](https://slides.com/sergeyshalyapin/front-end#/ "Browsers & IDEs") 24 | 25 | ## 3. HTML and CSS Basics 26 | 27 | #### Author: Сергей Шаляпин 28 | 29 | #### Video 30 | 31 | [RSSchool. HTML and CSS Basics. Part 1](https://www.youtube.com/watch?v=FCuMPo-omJ4&list=PLe--kalBDwjhni4LpATaJscPwZUudxVHS&index=4 "HTML and CSS Basics. Part 1") 32 | 33 | [RSSchool. HTML and CSS Basics. Part 2](https://www.youtube.com/watch?v=OOVayP9HDTg&list=PLe--kalBDwjhni4LpATaJscPwZUudxVHS&index=5 "HTML and CSS Basics. Part 2") 34 | 35 | #### Slides 36 | 37 | [HTML and CSS Basics](https://slides.com/sergeyshalyapin/html_css_basics#/ "HTML and CSS Basics") 38 | -------------------------------------------------------------------------------- /lectures/screencast_stage_1.md: -------------------------------------------------------------------------------- 1 | # DEPRECATED / Устарел 2 | 3 | RS School - stage 1 4 | 5 | ## 1. Browsers & IDEs 6 | 7 | #### Author: Сергей Шаляпин 8 | 9 | #### Video 10 | 11 | IMAGE ALT TEXT HERE 14 | 15 | [RSSchool](https://www.youtube.com/watch?v=soN8Qxe56Zw&list=PLe--kalBDwjj81fKdWlvpLsizajSAK-lh&index=9 "Browsers & IDEs") 16 | 17 | [01:35](https://youtu.be/soN8Qxe56Zw?t=95) - Файлы в вебе и протоколы их передачи 18 | [11:30](https://youtu.be/soN8Qxe56Zw?t=690) - Текстовые редакторы и IDE 19 | [29:25](https://youtu.be/soN8Qxe56Zw?t=1765) - Браузеры 20 | [44:50](https://youtu.be/soN8Qxe56Zw?t=2690) - Практика 21 | [01:14:52](https://youtu.be/soN8Qxe56Zw?t=4492) - Как работать с файлами PSD 22 | 23 | #### Slides 24 | 25 | [RSSchool](https://slides.com/sergeyshalyapin/front-end#/ "Browsers & IDEs") 26 | 27 | ## 2. HTML and CSS Basics 28 | 29 | #### Author: Сергей Шаляпин 30 | 31 | #### Video 32 | 33 | [RSSchool. HTML and CSS Basics. Part 1](https://www.youtube.com/watch?v=FCuMPo-omJ4&list=PLe--kalBDwjhni4LpATaJscPwZUudxVHS&index=4 "HTML and CSS Basics. Part 1") 34 | 35 | [RSSchool. HTML and CSS Basics. Part 2](https://www.youtube.com/watch?v=OOVayP9HDTg&list=PLe--kalBDwjhni4LpATaJscPwZUudxVHS&index=5 "HTML and CSS Basics. Part 2") 36 | 37 | #### Slides 38 | 39 | [HTML and CSS Basics](https://slides.com/sergeyshalyapin/html_css_basics#/ "HTML and CSS Basics") 40 | 41 | #### Rewind 42 | 43 | https://github.com/rolling-scopes-school/lectures/blob/master/lectures/html-css-basics.md 44 | -------------------------------------------------------------------------------- /lectures/software-development-process.md: -------------------------------------------------------------------------------- 1 | ### Trainer: Anton Kulikov 2 | 3 | 1. Requirements source 4 | - Business goals 5 | - Stakeholders 6 | - Customer 7 | - End users 8 | 2. Development processes 9 | - Ancient time 10 | - RUP/ Water fall 11 | - Nowadays 12 | - Agile philosophy 13 | - Methodologies 14 | - Scrum 15 | - Kanban 16 | - Roles 17 | 1. Scrum Master 18 | 2. Product Owner 19 | 3. Scrum Team 20 | - Attributes 21 | - User Stories 22 | - Demo 23 | - Retrospective 24 | - Standup 25 | - Tools 26 | - JIRA 27 | - KB 28 | - Repository 29 | 3. Delivery process 30 | 1. CI & CD 31 | 2. Environments 32 | - Dev/QA 33 | - PPE/UAT/PROD 34 | 3. Build 35 | - Unit Tests 36 | - Static Analysis 37 | 4. Release 38 | - Integration Tests 39 | - End-user Tests 40 | 41 | ###Links 42 | - https://www.targetprocess.com/articles/agile-software-development-process-90-months-of-evolution/ 43 | - https://www.targetprocess.com/blog/2016/01/bulidboard-our-tool-for-developers-workflow-automatization/ 44 | -------------------------------------------------------------------------------- /lectures/tdd.md: -------------------------------------------------------------------------------- 1 | ### Trainer: Dzmitry Herasimov 2 | ### Slides: 3 | [here](http://rolling-scopes.github.io/slides/school/jstesting-talk/#/) 4 | 5 | ### Content 6 | 7 | - почему всё таки тесты? 8 | - фундаментальные принципы TDD (test-driven development) 9 | - структура тестов 10 | - принципы и терминология BDD (behavior-driven development) 11 | - функциональные тесты 12 | - техники, используемые в тестировании 13 | - jasmine, mocha, chai, sinon, Istanbul 14 | - тесты и CI 15 | - будущее юнит тестов 16 | -------------------------------------------------------------------------------- /lectures/ux.md: -------------------------------------------------------------------------------- 1 | ###Trainer: Andrei Vouchanka 2 | 3 | ###Content 4 | 1. User Experience Best Practices 5 | * Atomic Design Technique 6 | * Documented CSS Profit 7 | * Content Choreography 8 | * gov.uk redisign 9 | * Responsive typography 10 | * Responsive navigation 11 | * Multilevel menu UX 12 | * Responsive tables 13 | * Responsive iconography 14 | * Optimistic Interfaces 15 | * Mobile input UX 16 | -------------------------------------------------------------------------------- /lectures/web-typography.md: -------------------------------------------------------------------------------- 1 | ### Web Typography: 2 | - Typography principles 3 | - Using quotes 4 | - Hyphenation and dash/hyphen types 5 | - Kerning 6 | - OpenType font features and font-feature-settings property 7 | 8 | ### Video: 9 | - https://youtu.be/rs011J8cT-4 10 | 11 | ### Links: 12 | * http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326 13 | * http://webtypography.net/intro/ 14 | * Про вертикальный ритм: http://typecast.com/blog/4-simple-steps-to-vertical-rhythm 15 | * Responsive Web Typography: http://www.slideshare.net/clarissapeterson/responsive-typography-27460071 16 | * Игра с кернингом http://type.method.ac/ 17 | -------------------------------------------------------------------------------- /lectures/webpack.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | - https://youtu.be/ssORHjHHCzU 3 | 4 | ### Slides 5 | - https://docs.google.com/presentation/d/1NTxLzTdci-wvVq0GYAMA7BQYPQKnHEBYt0bOZN-SEMo/mobilepresent?slide=id.g29603f67f0_0_50 6 | 7 | 8 | ### Content 9 | - history 10 | - modules vs flat files (gulp vs webpack) 11 | - modules & dependences 12 | - code splitting 13 | - Webpack vs AMD, CommonJS, ES6, Browserify 14 | - performance 15 | - config: 16 | - entry 17 | - output 18 | - plugins 19 | - loaders 20 | - preLoaders 21 | - devtool 22 | - tips & tricks 23 | - limitations 24 | - webpack power in real life 25 | 26 | ###Additional materials 27 | https://www.youtube.com/watch?v=VkTCL6Nqm6Y&feature=youtu.be&spfreload=1 28 | -------------------------------------------------------------------------------- /lectures/websocket-challenge.md: -------------------------------------------------------------------------------- 1 | ### Slides 2 | - http://rolling-scopes.github.io/slides/school/ws/WebSockets.pptx 3 | 4 | ### Content 5 | - What is websocket? 6 | - Websocket API 7 | - Typed arrays 8 | - Сompetition Slides 9 | -------------------------------------------------------------------------------- /modules/css-flex-grid/css-flex-grid-en.md: -------------------------------------------------------------------------------- 1 | # Flexbox and Grid layout 2 | 3 | ## Agenda: 4 | 1. Flexbox layout 5 | 2. Grid layout 6 | 7 | ## Educational materials: 8 | [**Video for Flexbox**](https://www.youtube.com/watch?v=JJSoEo8JSnc&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=4 "Traversy Media") 9 | [**Video for Grid**](https://www.youtube.com/watch?v=jV8B24rSN5o&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=5 "Traversy Media") 10 | 11 | #### Timestamps for HTML and CSS Crash Course Tutorials could be found in comments for video 12 | 13 | ## Tasks 14 | [**THEYALLOW**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-1/theyalow/theyalow-en.md "THEYALOW") 15 | 16 | ## Tutorials 17 | [Complete guide to **Flexbox**](https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "css-tricks") 18 | [Complete guide to **Grid**](https://css-tricks.com/snippets/css/complete-guide-grid/ "css-tricks") 19 | -------------------------------------------------------------------------------- /modules/css-flex-grid/css-flex-grid-ru.md: -------------------------------------------------------------------------------- 1 | # Расположение элементов на странице с помощью FlexBox и Grid 2 | 3 | ## Темы: 4 | 1. Расположение элементов на странице с помощью FlexBox 5 | 2. Расположение элементов на странице с помощью Grid 6 | 3. Верстка макета с использованием FlexBox и Grid 7 | 8 | ## Материалы: 9 | [**Слайды онлайн по теме CSS Grid**](https://slides.com/sergeyshalyapin/deck#/ "CSS Grid") 10 | [**Видео набора 2017 Q3**](https://www.youtube.com/watch?v=k2GtDJKC6HQ "CSS Recipes and Layouts") 11 | [**Видео набора 2019 Q1**](https://www.youtube.com/watch?v=MlscLbyFbAI "Responsive Web Design. Flexbox. CSS Grid Layout") 12 | 13 | #### Таймкоды можно найти под видео в комментариях 14 | 15 | ## Задачи 16 | [**Singolo. Part 1**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-1/singolo-1-ru.md "Singolo. Part 1") 17 | [**Singolo. Part 2**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-2/singolo-2-ru.md "Singolo. Part 2") 18 | [**Singolo. Part 3**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-3/singolo-3-ru.md "Singolo. Part 3") 19 | 20 | ## Справочник и руководство 21 | [Визуальное руководство по свойствам **flexbox**](https://webref.ru/layout/visual-guide-flexbox "webref") 22 | [Вёрстка на **Grid** в CSS](https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%D1%80%D1%81%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-grid-%D0%B2-css-%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%B8-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-220508316f8b "medium") 23 | -------------------------------------------------------------------------------- /modules/css-positioning-layout/css-positioning-layout-ru.md: -------------------------------------------------------------------------------- 1 | # CSS Позационирование и расположение 2 | Позиционирование и расположение элементов на странице. Обтекание текстом. Подходы Flexbox. 3 | css-positioning-layout-ru.md 4 | 5 | ## Темы: 6 | 1. Позационирование в CSS 7 | 2. Обтекание текстом и Floats 8 | 3. Расположение элементов с помощью Flexbox 9 | 4. Семантика в CSS 10 | 5. CSS3 11 | 12 | ## Материалы: 13 | [**Видео о Position. Floats. Flex. Semantic. CSS3**](https://www.youtube.com/watch?v=iSQcOjxttNg) 14 | 15 | ## Задачи 16 | [**Singolo. Part 1**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-1/singolo-1-ru.md "Singolo. Part 1") 17 | [**Singolo. Part 2**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-2/singolo-2-ru.md "Singolo. Part 2") 18 | [**Singolo. Part 3**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-3/singolo-3-ru.md "Singolo. Part 3") 19 | 20 | ## Справочник и руководство 21 | [**Float** в теории и на практике](https://webref.ru/course/float "webref/float") 22 | [**Позиционирование в CSS**](https://webref.ru/course/positioning "webref/positioning") 23 | [**Позиционирование содержимого**](https://webref.ru/layout/learn-html-css/positioning-content "webref/positioning-content") 24 | -------------------------------------------------------------------------------- /modules/css-responsive-adaptive/css-responsive-adaptive-en.md: -------------------------------------------------------------------------------- 1 | # Responsive and Adaptive Web Design 2 | Responsice CSS. Adaptive CSS. Relative and absolute values. 3 | 4 | ## Agenda: 5 | 1. What is responsive web design? 6 | 2. What is adaptive web design? 7 | 3. Media queries 8 | 4. Principles mobile-first, desktop-first 9 | 5. Using Flex 10 | 6. Using Grid 11 | 12 | ## Educational materials: 13 | [**Video: Build An HTML5 Website With A Responsive Layout**](https://www.youtube.com/watch?v=Wm6CUkswsNw&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=3 "Traversy Media") 14 | [**Video: Build a Responsive, Mobile First Website - HTML5 & CSS3**](https://www.youtube.com/watch?v=XsEnj-1hG2o&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=11 "Traversy Media") 15 | 16 | #### Timestamps for HTML and CSS Crash Course Tutorials could be found in comments for video 17 | 18 | ## Tasks 19 | [**THEYALLOW**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-1/theyalow/theyalow-en.md "THEYALOW") 20 | 21 | ## Tutorial 22 | [Sections **Learn HTML** and **Learn CSS**](https://www.w3schools.com/ "w3schools") 23 | ![https://www.w3schools.com/](https://github.com/rolling-scopes-school/lectures/blob/%D1%81urriculum-2020/modules/css-responsive-adaptive/images/css-responsive-adaptive-en.png "w3schools") 24 | -------------------------------------------------------------------------------- /modules/css-responsive-adaptive/css-responsive-adaptive-ru.md: -------------------------------------------------------------------------------- 1 | # Резиновая и адаптивная верстка 2 | Резиновый CSS. Адаптивный CSS. Относительные величины. 3 | 4 | ## Темы: 5 | 1. Что такое responsive web design 6 | 2. Что такое adaptive web design 7 | 3. Точки перехода media-query 8 | 4. Подходы mobile-first, desktop-first 9 | 5. Применение Flex 10 | 6. Применение Grid 11 | 12 | ## Материалы: 13 | [**Видео набора 2019 Q1. Flexbox. CSS Grid Layout**](https://www.youtube.com/watch?v=MlscLbyFbAI "Responsive Web Design. Flexbox. CSS Grid Layout") 14 | [**Видео набора 2019 Q3. Responsive Web**](https://www.youtube.com/watch?v=XKA-FX6ie8k&list=PLzLiprpVuH8f9k_DqeXE8neFEU9iv3OQA&index=9 "Responsive Web") 15 | 16 | #### Таймкоды можно найти под видео в комментариях 17 | 18 | ## Задачи 19 | [**Singolo. Responsive**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/singolo-responsive-ru.md "Singolo. Responsive") 20 | [**Portfolio. Markup only**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-1/portfolio/portfolio-ru.md "Portfolio. Markup only") 21 | 22 | ## Справочник и руководство 23 | [**Отзывчивый веб-дизайн**](https://webref.ru/layout/advanced-html-css/responsive-web-design "webref") 24 | [**Адаптивный веб-дизайн**](https://webref.ru/layout/bootstrap/responsive "webref") 25 | [**Адаптивный макет на флексбоксах**](https://webref.ru/layout/flexbox-tutorial/create-responsive-flexbox-layout "webref") 26 | [**Относительные и абсолютные величины**](https://webref.ru/css/value/size "webref") 27 | 28 | -------------------------------------------------------------------------------- /modules/css-responsive-adaptive/images/css-responsive-adaptive-en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/lectures/ba886b2ca3ddb98a26f1f9255abeb0eda42bd1ca/modules/css-responsive-adaptive/images/css-responsive-adaptive-en.png -------------------------------------------------------------------------------- /modules/html-css-basics/html-css-basics-en.md: -------------------------------------------------------------------------------- 1 | # HTML / CSS Basics 2 | HTML5 and CSS3 Basics. HTML5 Semantic. 3 | 4 | ## Agenda: 5 | 1. What is HTML? 6 | 2. Creating an HTML file 7 | 3. HTML Page Structure 8 | 4. Tags And Elements 9 | 5. HTML5 Semantic Tags 10 | 6. What is CSS? 11 | 7. Creating a CSS file 12 | 8. CSS Selectors 13 | 9. Box Model, Margin and Padding Shorthand, and Borders 14 | 10. Positioning in CSS 15 | 16 | ## Educational materials: 17 | [**HTML Crash Course Tutorial**](https://www.youtube.com/watch?v=UB1O30fR-EE&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU "Traversy Media") 18 | [**CSS Crash Course Tutorial**](https://www.youtube.com/watch?v=yfoY53QXEnI&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=2 "Traversy Media") 19 | 20 | #### Timestamps for HTML and CSS Crash Course Tutorials could be found in comments for video 21 | 22 | ## Tasks 23 | [**THEYALLOW**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-1/theyalow/theyalow-en.md "THEYALOW") 24 | 25 | ## Tutorial 26 | [Sections **Learn HTML** and **Learn CSS**](https://www.w3schools.com/ "w3schools") 27 | ![https://www.w3schools.com/](https://github.com/rolling-scopes-school/lectures/blob/%D1%81urriculum-2020/modules/html-css-basics/images/html-css-basics-en-1.png "w3schools") 28 | 29 | ## Handbook 30 | [Sections **HTML — Structuring the Web** and **CSS — Styling the Web**](https://developer.mozilla.org/en-US/docs/Learn/HTML "MDN") 31 | ![https://developer.mozilla.org/en-US/docs/Learn/HTML](https://github.com/rolling-scopes-school/lectures/blob/%D1%81urriculum-2020/modules/html-css-basics/images/html-css-basics-en-2.png "MDN") 32 | 33 | 34 | -------------------------------------------------------------------------------- /modules/html-css-basics/html-css-basics-ru.md: -------------------------------------------------------------------------------- 1 | # Основы HTML / CSS 2 | Основы HTML5 и CSS3. Семантика. Примеры. 3 | 4 | ## Темы: 5 | 1. Как работать с браузером на примере браузера Google Chrome 6 | 2. Что такое тэг и что он из себя представляет 7 | 3. Какие HTML тэги бывают? Одиночные/двойные. Строчные/Блочные 8 | 4. Какие HTML тэги бывают с точки зрения логики? Логические/Семантические/Физические 9 | 5. Семантика приложения 10 | 6. CSS Селекторы 11 | 7. CSS Свойства 12 | 8. Абсолютные и относительные единицы 13 | 9. Позиционирование 14 | 10. Боксовая модель элемента 15 | 16 | ## Материалы: 17 | [**Слайды онлайн**](https://slides.com/sergeyshalyapin/html_css_basics "Основы HTML / CSS") 18 | [**Видео набора 2019 Q3**](https://www.youtube.com/watch?v=2iCgf03rx1I&list=PLzLiprpVuH8f9k_DqeXE8neFEU9iv3OQA&index=2 "HTML5 and CSS3 Tips + FAQ") 19 | 20 | #### Таймкоды можно найти под видео в комментариях 21 | 22 | ## Задачи 23 | [**Самостоятельное обучение**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-1/HTML-CSS-self-ru.md "Самостоятельное обучение") 24 | [**Singolo. Part 1**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-1/singolo-1-ru.md "Singolo. Part 1") 25 | [**Singolo. Part 2**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-2/singolo-2-ru.md "Singolo. Part 2") 26 | [**Singolo. Part 3**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-2/singolo/part-3/singolo-3-ru.md "Singolo. Part 3") 27 | 28 | ## Справочник и руководство 29 | [Раздел **Рекомендуемое прохождение курсов**](https://webref.ru/#block-22 "webref") 30 | ![https://webref.ru/#block-22](https://github.com/rolling-scopes-school/lectures/blob/%D1%81urriculum-2020/modules/html-css-basics/images/html-css-basics-ru-1.png "webref") 31 | -------------------------------------------------------------------------------- /modules/html-css-basics/images/html-css-basics-en-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/lectures/ba886b2ca3ddb98a26f1f9255abeb0eda42bd1ca/modules/html-css-basics/images/html-css-basics-en-1.png -------------------------------------------------------------------------------- /modules/html-css-basics/images/html-css-basics-en-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/lectures/ba886b2ca3ddb98a26f1f9255abeb0eda42bd1ca/modules/html-css-basics/images/html-css-basics-en-2.png -------------------------------------------------------------------------------- /modules/html-css-basics/images/html-css-basics-ru-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/lectures/ba886b2ca3ddb98a26f1f9255abeb0eda42bd1ca/modules/html-css-basics/images/html-css-basics-ru-1.png -------------------------------------------------------------------------------- /modules/js-modules.md: -------------------------------------------------------------------------------- 1 | # Modules in JavaScript 2 | In the lesson scope will be covered such topics as, Modules Basics (scope, syntax, features), 3 | also Modules Types and their Development History. 4 | 5 | ## Agenda 6 | - What is module / module pattern? For what purposes they were created? 7 | - Modules types (AMD, ES6, CommonJS, UMD). 8 | - Modules syntax. 9 | - Common modules features (export default, named exports, exports as, etc). 10 | - Dynamic imports. 11 | 12 | ## Required to self-study 13 | - [Modules basics](https://javascript.info/modules) 14 | - [A 10 minute primer to JavaScript modules, module formats, module loaders and module bundlers](https://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/) 15 | 16 | ## To further self-education 17 | - [Learn the basics of the JavaScript module system and build your own library](https://www.freecodecamp.org/news/anatomy-of-js-module-systems-and-building-libraries-fadcd8dbd0e/) 18 | - [Module history in practice](https://www.youtube.com/watch?v=JDDn57_z5Og) 19 | - [JavaScript Modules Past & Present](https://www.youtube.com/watch?v=GQ96b_u7rGc) 20 | - [4 Best Practices to Write Quality JavaScript Modules](https://dmitripavlutin.com/javascript-modules-best-practices/) 21 | 22 | ## Time consumption 23 | - 2.5 hours for main block 24 | - 3.5 hours for additional block 25 | 26 | ## RS School Video 27 | - https://youtu.be/7e-5P6iPFzY 28 | 29 | ### Slides - http://kirilknysh.github.io/js-modules-talk/#/ 30 | 31 | ### Content 32 | 1. CommonJS modules 33 | - Node.js and require 34 | - NPM and package.json 35 | - Bower and bower.json 36 | 2. Modules in JavaScript 37 | - ECMAScript 5 module systems 38 | - ECMAScript 6 modules 39 | 3. The basics of ES6 modules 40 | - Named exports 41 | - Default exports 42 | - Cyclic dependencies 43 | 4. Import and Export in details 44 | - Babel 45 | - System.js 46 | 47 | ### Further reading 48 | - http://exploringjs.com/es6/ch_modules.html 49 | - http://jsmodules.io/cjs.html 50 | 51 | ### Timeline - https://youtu.be/7e-5P6iPFzY
52 | 1. начало лекции https://youtu.be/7e-5P6iPFzY?t=171 53 | 1. зачем нужны модули https://youtu.be/7e-5P6iPFzY?t=193 54 | 1. пример без модульности https://youtu.be/7e-5P6iPFzY?t=299 55 | 1. как организовать модули https://youtu.be/7e-5P6iPFzY?t=353 56 |

57 | 1. одиночный модуль (самовызывающиеся функции) - https://youtu.be/7e-5P6iPFzY?t=422 58 | 1. много-файловый модуль - https://youtu.be/7e-5P6iPFzY?t=633 59 |

60 | 1. commonJS - https://youtu.be/7e-5P6iPFzY?t=893 61 | 1. commonJS loaders - https://youtu.be/7e-5P6iPFzY?t=1083 62 |

63 | 1. AMD - https://youtu.be/7e-5P6iPFzY?t=1337 64 | 1. AMD loaders - https://youtu.be/7e-5P6iPFzY?t=1473 65 | 1. AMD loaders optimizer - https://youtu.be/7e-5P6iPFzY?t=2029 66 |

67 | 1. ES6 modules - https://youtu.be/7e-5P6iPFzY?t=2258 68 | * ES6 modules loaders - https://youtu.be/7e-5P6iPFzY?t=2396 69 | * ES6 modules loaders webpack - https://youtu.be/7e-5P6iPFzY?t=2426 70 | * ES6 modules подробнее - https://youtu.be/7e-5P6iPFzY?t=2670 71 | * ES6 modules exports - https://youtu.be/7e-5P6iPFzY?t=2782 72 | * ES6 modules default (function / class) exports - https://youtu.be/7e-5P6iPFzY?t=2870 73 | * ES6 modules inline vs clause exports - https://youtu.be/7e-5P6iPFzY?t=3009 74 |

75 | 1. ES6 modules imports - https://youtu.be/7e-5P6iPFzY?t=3177 76 | * ES6 modules named imports - https://youtu.be/7e-5P6iPFzY?t=3201 77 | * ES6 modules default imports - https://youtu.be/7e-5P6iPFzY?t=3300 78 | * ES6 modules empty imports - https://youtu.be/7e-5P6iPFzY?t=3345 79 | * ES6 modules imports are hoisted - https://youtu.be/7e-5P6iPFzY?t=3418 80 | * ES6 modules imports are read-only views on export - https://youtu.be/7e-5P6iPFzY?t=3479 81 | * ES6 modules cyclic dependencies (циклические зависимости это плохо) - https://youtu.be/7e-5P6iPFzY?t=3883 82 |

83 | 1. ES6 modules loader API - https://youtu.be/7e-5P6iPFzY?t=4502 84 |

85 | 1. лексика : 86 | - require (рекваер) - требовать-запрашивать 87 | - resolve - разрешить 88 | - parsing - разбираться на части 89 | - implementation - (имплементить) - выполненить, осуществить 90 | -------------------------------------------------------------------------------- /modules/pre-post-processors/pre-post-processors-en.md: -------------------------------------------------------------------------------- 1 | # Pre- and Post- processors. Sass 2 | 3 | ## Agenda: 4 | 1. What is preprocessors? 5 | 2. Less, Sass (SCSS), Stylus 6 | 3. SASS VS SCSS 7 | 4. Sass Quick Start 8 | 5. Variables 9 | 6. Nesting 10 | 7. Mixins 11 | 8. @media 12 | 9. Functions 13 | 10. 7-1 pattern 14 | 11. What is postprocessors? 15 | 12. Postcss 16 | 17 | ## Educational materials: 18 | [**Sass crash course**](https://www.youtube.com/watch?v=nu5mdN2JIwM&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=50 "Sass crash course") 19 | 20 | [**PostCSS Tutorials**](https://www.youtube.com/watch?v=bJShpMC7xFM "PostCSS Tutorials") 21 | 22 | #### Timestamps for HTML and CSS Crash Course Tutorials could be found in comments for video 23 | 24 | ## Tasks 25 | [**Repair-design-project**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-3/repair-design-project/repair-design-project-en.md "Repair-design-project") 26 | 27 | ## Tutorial 28 | [**Sass** guide](https://sass-lang.com/guide "sass-lang") 29 | -------------------------------------------------------------------------------- /modules/pre-post-processors/pre-post-processors-ru.md: -------------------------------------------------------------------------------- 1 | # Пре- и Пост- процесссоры. Sass 2 | 3 | ## Темы: 4 | 1. Что такое препроцессоры? 5 | 2. Less, Sass (SCSS), Stylus 6 | 3. SASS VS SCSS 7 | 4. Быстрый старт Sass 8 | 5. Variables 9 | 6. Nesting 10 | 7. Mixins 11 | 8. @media 12 | 9. Functions 13 | 10. 7-1 pattern 14 | 11. Что такое постпроцессоры? 15 | 12. Postcss 16 | 17 | ## Материалы: 18 | [**Слайды онлайн. Sass**](https://slides.com/viktoryiavorozhun/deck "Preprocessors. Sass") 19 | [**Видео набора 2019 Q3. Sass**](https://www.youtube.com/watch?v=JO8DvVZbxDw&list=PLzLiprpVuH8f9k_DqeXE8neFEU9iv3OQA&index=11 "Preprocessors. SASS") 20 | 21 | [**Постпроцессоры. Postcss**](https://www.youtube.com/watch?v=-CAtaoBgxzk "Постпроцессоры. Postcss") 22 | 23 | #### Таймкоды можно найти под видео в комментариях 24 | 25 | ## Задачи 26 | [**Repair-design-project**](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/markups/level-3/repair-design-project/repair-design-project-en.md "Repair-design-project") 27 | 28 | ## Справочник и руководство 29 | [Препроцессоры. **Sass**](https://webref.ru/layout/sass "webref") 30 | -------------------------------------------------------------------------------- /nodejs-course.md: -------------------------------------------------------------------------------- 1 | # NodeJS Spring 2020 2 | 3 | ### Course Introduction 4 | 5 | - [Course Introduction](https://youtu.be/R4dk80aym4g?t=892) - [Sergei Karaulov](https://github.com/sixtyXi) 6 | 7 | * [Course schedule](https://docs.google.com/spreadsheets/d/10ZZEGPbwtj3EzkFwuQkOl3hnu7Qza1tn5CS7DgNAbhw/edit) 8 | 9 | ### Week #1 10 | 11 | - [Node.JS 2020Q1. Modules. NPM + Debugging](https://www.youtube.com/watch?v=dcdjTqKV2_Q) - [Anton Griadchenko](https://github.com/RidgeA) 12 | 13 | * [Slides](https://www.youtube.com/redirect?event=video_description&v=dcdjTqKV2_Q&redir_token=NGGbR4iCJEchjogOrs_SlpkHHhp8MTU5MDQ0NTg0N0AxNTkwMzU5NDQ3&q=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F17mfsoyorpfemo2qU2Qcqapj4N2zV9UumQjamCAjTI_s%2Fedit%3Fusp%3Dsharing) 14 | * [Examples](https://github.com/RidgeA/rss-school-20200323) 15 | * [NodeJS debugging](https://nodejs.org/en/docs/guides/debugging-getting-started/) 16 | * [Event loop](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/) 17 | * [NodeJS Streams](https://youtu.be/TEuDTl8SdZo?t=3637) 18 | 19 | - [Node.JS 2020Q1. Lecture Events and Event Loop + Async Development Introduction + Filesystem and Streams](https://www.youtube.com/watch?v=Jqn7KRAvuUw) - Dmitry Kornev 20 | 21 | * [Slides](https://drive.google.com/file/d/1ueNViQQCcsWDG4AowLbvXupz02-Rc_Hy/view?usp=sharing) 22 | 23 | ### Week #2 24 | 25 | - [Node.JS 2020Q1 Task1 solution discussion. Task2 Presentation](https://www.youtube.com/watch?v=sPeOfWVkbKQ) - Sergei Karaulov 26 | 27 | - [Node.JS 2020Q1 ExpressJS (Express. Middleware. Validation.)](https://www.youtube.com/watch?v=C8fSG6a9Sjc) - Vladislav Lomako 28 | 29 | * [Slides](https://cdn.discordapp.com/attachments/691674957079642132/696356859011006464/03._NodeJS_RSS_-_Express._Middleware._Validation.pdf) 30 | * [Express Service Example](https://youtu.be/3Pp0K_rgk8U?t=4189) 31 | 32 | - [Node.JS 2020Q1 Layered structure and REST API](https://www.youtube.com/watch?v=tCQ7tNX6kwo) - Hovhannes Gasparyan 33 | 34 | * [Slides](https://docs.google.com/presentation/d/18PJzVeO_on_f35TAjCeG8_O_p2oKPXSFSDoGPt5v2yA) 35 | 36 | ### Week #3 37 | 38 | - [Node.JS 2020Q1 Task2 Solution, Task3 Presentation](https://www.youtube.com/watch?v=7BLFXNyCoZo) - Sergei Karaulov 39 | 40 | - [Node.JS 2020Q1 Lecture Logging & Error Handling](https://youtu.be/hJ-iN2NARX8) - Anton Griadchenko 41 | 42 | * [GitHub repo](https://github.com/RidgeA/rss-school-20200408) 43 | 44 | ### Week #4 45 | 46 | - [Node.JS 2020Q1. Task3 Solution, Task4 discussion + MongoDB](https://www.youtube.com/watch?v=TM-Uur4Wdo4) - Sergei Karaulov 47 | 48 | * [Free MongoDB Official Courses](https://university.mongodb.com/) 49 | * [Express + MongoDB + Mongoose](https://developer.mozilla.org/ru/docs/Learn/Server-side/Express_Nodejs/mongoose) 50 | * [Mongoose Official Documentation](https://mongoosejs.com/docs/index.html) 51 | 52 | - [Node.JS 2020Q1. Authentication. Security + CORS](https://www.youtube.com/watch?v=K0K4bCQAfUM) - Vladislav Lomako 53 | 54 | * [Slides](https://cdn.discordapp.com/attachments/691674957079642132/700003043089055824/05._NodeJS_RSS_-_Authentication._Security.pdf) 55 | * [GitHub repo](https://github.com/RidgeA/rss-school-20200408) 56 | 57 | - [Node.JS 2020Q1. Testing Experience + Unit tests & Integration Tests](https://www.youtube.com/watch?v=JwM1E630sms) - Konstantin Tsepelev 58 | 59 | ### Week #5 60 | 61 | - [Node.JS 2020Q1. Task 4 solution. Task 5 discussion.](https://www.youtube.com/watch?v=OgI59CNTjSk) - Sergei Karaulov 62 | 63 | * [JWT Authentication & Authorization in NodeJs/Express & MongoDB REST APIs(2019)](https://medium.com/swlh/jwt-authentication-authorization-in-nodejs-express-mongodb-rest-apis-2019-ad14ec818122) 64 | * [JWT official site](https://jwt.io) 65 | 66 | - [NodeJS 2020Q1 Task5 solution discussion](https://www.youtube.com/watch?v=_FmFv8g4JDY) - Sergei Karaulov 67 | -------------------------------------------------------------------------------- /react-course.md: -------------------------------------------------------------------------------- 1 | # React 2 | ### Before the course: 3 | - You should have basic knowledge of JavaScript and HTML 4 | - Be able to work with Git 5 | - Join Discord chats https://discord.gg/Uazp6s, category REACT. 6 | 7 | #### The course Trainers: 8 | - Yuliya Haluza 9 | - Artёm Sinicyn 10 | - Alexey Farbotko 11 | - Ander Rios 12 | - Andre Gloukhmantchouk 13 | 14 | #### Communication 15 | For any questions use Discord. 16 | 17 | # Learning Plan 18 | 19 | ## React. 1 Lecture. Webpack 20 | 21 | * Overview 22 | * Webpack Config 23 | * Plugins 24 | * Loaders 25 | * Webpack Dev Server 26 | * react app creation from scratch 27 | * webpack configuration 28 | 29 | ### Materials: 30 | - [Lecture (video)](https://youtu.be/r1LbeeWzlhc) 31 | - [Slides](https://drive.google.com/file/d/10psw_ZPJYyT0Kkz-1vqLhsDyuSZgxTOu/view?usp=sharing) 32 | - [Code Examples](https://github.com/yuliaHope/webpac-react/branches) 33 | - [Webpack screencast](https://www.youtube.com/playlist?list=PLOQDek48BpZFadeo_SJUNDggOKouA-nyM) 34 | - Articles:
35 |
36 | 37 | 38 | ## Task 1. Song Bird 39 | 40 | https://github.com/rolling-scopes-school/tasks/blob/master/tasks/songbird.md 41 | 42 | Form for questions: https://docs.google.com/spreadsheets/d/1CKx6BcS7DgFHPhdaB3IUoaNLUcGDlqHqus3wms5b1V4/edit#gid=0 43 | 44 | ## React. 2 Lecture. Components (Main) 45 | 46 | ### Before the lecture
47 | [Hello, world](https://reactjs.org/docs/hello-world.html)
48 | [Introducing JSX](https://reactjs.org/docs/introducing-jsx.html)
49 | [Rendering Elements](https://reactjs.org/docs/rendering-elements.html)
50 | [Components and Props](https://reactjs.org/docs/components-and-props.html)
51 | [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
52 | [Handling Events](https://reactjs.org/docs/handling-events.html)
53 | [Conditional Rendering](https://reactjs.org/docs/conditional-rendering.html)
54 | [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html) 55 | 56 | Form for questions: https://docs.google.com/document/d/1u86RSOAVfrSmiziIB3gXwI9yOw0Xty8QIvNG0GPB7FI/edit?usp=sharing 57 | 58 | ### 1 part 59 | * What is react? 60 | * Virtual DOM as approach to build fast UI components, Why V-DOM instead of direct DOM manipualtion 61 | * JSX introduction 62 | * the comoponent approach 63 | * stateless, statefull components 64 | * lifecycle hooks (React 16) and how they could be useful 65 | * how to pass data to child components 66 | * state. how to use it, how to change it (how react batches updates, async setState) 67 | * how to handle DOM events 68 | * how to create list, key prop 69 | * conditional rendering 70 | 71 | ### 2 part (practice) 72 | * hello world stateless component (basic syntax, jsx) 73 | * statefull counter component (event handling, ```this``` binding problem) 74 | * users list component (key prop explained) 75 | * TBA 76 | 77 | ### Materials: 78 | - [Lecture (video)](https://youtu.be/xo66V7lrinU) 79 | - [Slides](https://slides.com/yuliaka71/react-856420) 80 | - [Everything you want and may need to know about React](https://reactjs.org/) 81 | - [Split app on components(examples)](https://drive.google.com/open?id=16kjgPAtIXpKKvpf4x_4-cbA_edWM01OT) 82 | 83 | ## React. 3 Lecture. Components(Advanced) 84 | 85 | ### Before the lecture
86 | [Reconciliation](https://reactjs.org/docs/reconciliation.html)
87 | [Typechecking With PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
88 | [Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html)
89 | [Context](https://reactjs.org/docs/context.html)
90 | [Higher-Order Components](https://reactjs.org/docs/higher-order-components.html)
91 | [Portals](https://reactjs.org/docs/portals.html)
92 | [Render Props](https://reactjs.org/docs/render-props.html) 93 | 94 | Form for questions: https://docs.google.com/document/d/1UEm5-YvbDbyk75gvfeFjXS_PhP5cFQNzvztL99RR1_A/edit?usp=sharing 95 | 96 | ### 1 part 97 | * Quick revison of Lecture #1 98 | * Reconciliation algorithm 99 | * propTypes and why it is important 100 | * refs, uncontrolled components 101 | * new context API 102 | * advanced JSX (hoc, render prop, portal) 103 | * lazy, suspense, memo 104 | * performance optimisations 105 | 106 | ### 2 part (practice) 107 | * todo app development 108 | * add todo, remove todo 109 | * mark todo as completed 110 | * edit todo 111 | * filter todos 112 | * todos statistics (completed counter, uncompleted counter) 113 | * TBA 114 | 115 | ### Materials: 116 | - [Lecture (video)](https://youtu.be/WSK3MlZ-W4g) 117 | - [Slides]() 118 | - [Code Examples]() 119 | 120 | ## React. 4 Lecture. Hooks 121 | 122 | ### Before the lecture
123 | [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
124 | [Hooks at a Glance](https://reactjs.org/docs/hooks-overview.html)
125 | [Using the State Hook](https://reactjs.org/docs/hooks-state.html)
126 | [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)
127 | [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
128 | [Building Your Own Hooks](https://reactjs.org/docs/hooks-custom.html) 129 | 130 | Form for questions: https://docs.google.com/document/d/1Uz08VF7V33UHGB7-o4AMI-CMzyI1B-IspWwP1msRfco/edit?usp=sharing 131 | 132 | * The useState Hook 133 | * useState vs. setState 134 | * Complex State with useState 135 | * The useEffect Hook 136 | * useEffect Dependencies 137 | * Cleaning up Effects 138 | * The Context API & useContext Hook 139 | * TBA 140 | 141 | ## Task 2. Data Grid 142 | 143 | https://github.com/rolling-scopes-school/tasks/blob/master/tasks/datagrid.md 144 | 145 | Form for questions: https://docs.google.com/document/d/1KRc6ahRG6UW8CpvJm8OTySNqS9shP2sxSyuVTOD-pJw/edit?usp=sharing 146 | 147 | ## React. 5 Lecture. Routing 148 | 149 | ### Before the lecture
150 | [The philosophy of React Router](https://reacttraining.com/react-router/web/guides/philosophy)
151 | 152 | Form for questions: https://docs.google.com/document/d/1EYVxVrQMSYe7djvljAvcYtxtNvmFF6zL9_Psl85CeEc/edit?usp=sharing 153 | 154 | ### 1 part 155 | * what is SPA 156 | * React-router 157 | * hash routing 158 | * browser routing 159 | * problems of SPAs 160 | * TBA 161 | ### 2 part (practice) 162 | * react-router usage 163 | 164 | ### Materials: 165 | - [Lecture (video)](https://youtu.be/YwOkBljMNpc) 166 | - [Slides](https://andre-gl.github.io/talks-react-router/) 167 | - Articles:
168 | [The philosophy of React Router](https://reacttraining.com/react-router/web/guides/philosophy)
169 | [Run the React Router v4 Examples with Create React App](https://egghead.io/lessons/react-run-the-react-router-v4-examples-with-create-react-app) 170 | 171 | ## React. 6 Lecture. Flux+Redux 172 | 173 | ### Before the lecture
174 | [Redux motivation](https://redux.js.org/introduction/motivation)
175 | [Redux core concepts](https://redux.js.org/introduction/core-concepts)
176 | [Three Principles](https://redux.js.org/introduction/three-principles)
177 | [Ecosystem](https://redux.js.org/introduction/ecosystem) 178 | 179 | Form for questions: https://docs.google.com/document/d/1IZpVZTCegi7rmVXcZpp-rE_Z_UZbWjgrT06qszGFBaU/edit?usp=sharing 180 | 181 | ### 1 part 182 | * the problem with app state managment in react 183 | * the problem with passing props from root component to leaf components 184 | * what is flux architecture 185 | * what is redux 186 | * immutability 187 | * pure functions 188 | * main redux principles (read-only state, reducer, actions) 189 | * middlewares 190 | * redux hooks 191 | 192 | ### 2 part (practice) 193 | * redux implementation 194 | * redux usage 195 | 196 | ### Materials: 197 | - [Lecture (video)](https://youtu.be/s060_ZWWhVE) 198 | - [Slides](https://slides.com/artemsinicyn/deck) 199 | - [Code Examples](https://github.com/cardamo/redux-with-tests-example-4rss) 200 | - Articles:
201 | [MobX github readme](https://github.com/mobxjs/mobx)
202 | [ReactN github readme](https://github.com/CharlesStover/reactn)
203 | [use-global-hook github readme](https://github.com/andregardi/use-global-hook#readme)
204 | [React Redux hooks documentation](https://react-redux.js.org/next/api/hooks) 205 | 206 | ## React. 7 Lecture. Grapgql 207 | 208 | TBA 209 | 210 | ## React. 8 Lecture. SSR 211 | 212 | Form for questions: https://docs.google.com/document/d/12i8sSn5K8qbDjYmOUYWY1kaii_60C4dm6gZ2Bt5RXho/edit?usp=sharing 213 | 214 | ### 1 part 215 | * serverside rendering as a way to solve the main problems of SPAs 216 | * why serverside rendering isn't silver bullet 217 | * TBA 218 | 219 | ### 2 part (practice) 220 | * ssr implementation (live) 221 | 222 | ### Materials: 223 | - [Lecture (video)](https://youtu.be/4cGApe7DsGY) 224 | - [Slides](https://slides.com/yuliaka71/deck) 225 | - [Code Examples](https://github.com/yuliaHope/ssr-test-example) 226 | - Articles:
227 | [Why you should render React on the server side](https://blog.logrocket.com/why-you-should-render-react-on-the-server-side-a50507163b79/)
228 | [ReactDOMServer documentation](https://ru.reactjs.org/docs/react-dom-server.html)
229 | [Server-Side Rendering with React, Redux, and React-Router](https://itnext.io/server-side-rendering-with-react-redux-and-react-router-fa5b67d4965e) 230 | 231 | ## React. 9 Lecture. Testing 232 | 233 | Form for questions: https://docs.google.com/document/d/1yl5g74K3Ohd407PRpG34LoQWGRXl_DSQzbzKmAzHewE/edit?usp=sharing 234 | 235 | * Testing react apps 236 | * jest 237 | * enzyme 238 | * TBA 239 | 240 | ### Materials: 241 | - [Lecture (video)](https://youtu.be/gK5I7bq72Fw) 242 | - [Code Examples](https://github.com/cardamo/redux-with-tests-example-4rss) 243 | -------------------------------------------------------------------------------- /rs-epam-lab/score.md: -------------------------------------------------------------------------------- 1 | ### Максимальные баллы за работы 2 | | Task | Max score | 3 | |------|-----------| 4 | | HTML-basics | 41 | 5 | |CSS-basics | 33| 6 | | JS-basics | 79| 7 | |Markdown & Git | 20| 8 | | HTML, CSS & Git Basics | 40| 9 | |Simple Singolo | 200 | 10 | | Task 1. Calculator | 50 | 11 | |Task 2. Dynamic Landing Page | 30 | 12 | |Task 3. Meditation App | 20| 13 | |Task 4. Drum Kit | 20 | 14 | |Task 5. CSS Variables and JS |20| 15 | |Task 6. Flex Panel GalleryCodewars Basic| 10| 16 | |Task 7. Fun with HTML5 Canvas |40| 17 | |Task 8. Custom Video Player| 20| 18 | |Task 9. Video Speed Controller| 10| 19 | |Task 10. Whack-A-Mole| 40| 20 | |Task 11. Virtual Keyboard| 40| 21 | |Task 12. Chat on socket.io| 20| 22 | |Codewars Basic| 50| 23 | |Codewars Basic-1| 50| 24 | |Codewars Basic-2| 50| 25 | |raindrops| 180| 26 | |fancy-weather| 270| 27 | |portfolio |100| 28 | | **Итого** | **1433**| 29 | -------------------------------------------------------------------------------- /rs-epam-lab/week-0.md: -------------------------------------------------------------------------------- 1 | ## Подготовительная неделя 2 | 3 | 1. [Computer Science Basics](http://epa.ms/upskill-start). Время на прохождение курса - 16 часов 4 | 2. [HTML для начинающих](https://ru.code-basics.com/languages/html). Время на прохождение курса - 8 часов. 5 | 3. [CSS для начинающих](https://ru.code-basics.com/languages/css). Время на прохождение курса - 8 часов. 6 | 4. [JavaScript для начинающих](https://ru.code-basics.com/languages/javascript). Время на прохождение курса - 20 часов. 7 | 8 | *Эти online курсы познакомят вас с основными инструментами front-end разработчика.* 9 | 10 | **Желаю приятного и продуткивного прохождения курсов!** 11 | -------------------------------------------------------------------------------- /rs-epam-lab/week-1.md: -------------------------------------------------------------------------------- 1 | ## Неделя №1 2 | ### Git & GitHub 3 | 1. [Регистрация на Гитхабе](https://htmlacademy.ru/blog/boost/tools/register-on-github-work-with-console) - 30 мин 4 | 2. [Полезные команды для работы с Git](https://htmlacademy.ru/blog/boost/tools/useful-commands-for-working-with-git) - 30 мин 5 | 3. [Требования к именам коммитов](https://docs.rs.school/#/git-convention) - 30 мин 6 | 4. [Как разместить приложение на GitHub Pages](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/create-github-pages.md) - 30 мин 7 | 8 | ### IDE 9 | 1. [VS Code – установка и настройка](https://www.youtube.com/watch?v=5M6RL3MAGJU&feature=youtu.be) - 1 час 10 | 2. [Как написать и запустить HTML на компьютере?](https://htmlacademy.ru/blog/education/all/how-to-run-html) - 30 мин 11 | 12 | ### Markdown 13 | 1. [Что такое Markdown](https://guides.hexlet.io/markdown/) - 30 мин 14 | 15 | ### *!!! Практическое задание* 16 | [Markdown & Git](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/git-markdown.md) - 4 часа. 17 | 18 | 19 | ### HTML/Css Basic. Semantic. 20 | 1. [HTML для самых маленьких](https://www.youtube.com/playlist?list=PL3LQJkGQtzc7aWRyr-GaxyO_dwj5inJ1t) - 2,5 часа 21 | 2. [HTML для начинающих](https://www.youtube.com/playlist?list=PLY4rE9dstrJyeZlPWoKJr1xKVVnG4w-Hc) - 2,5 часа 22 | 3. [Справочник EMMET сокращений для ускорения верстки](https://webdesign-master.ru/blog/html-css/2.html) - 30 мин 23 | 4. [Плагин Emmet - обзор](https://www.youtube.com/watch?v=WeNN9So5DTs) 24 | 5. [Семантические теги в HTML](https://www.youtube.com/watch?v=bQRmGxhARhc) - 30 мин 25 | 6. [HTML5 Семантические элементы](https://html5css.ru/html/html5_semantic_elements.php) - 30 мин 26 | 27 | ### *!!! Практическое задание* 28 | [Task HTML, CSS & Git Basics](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codejam-cv.md) - 2 часа. Создать файл Index.html, использовать семантические теги. Стилизация будет выполнена в ходе следующего практического задания 29 | 30 | 31 | ### CSS3 32 | 1. [Видео лекция HTML/Css Basic](https://www.youtube.com/watch?v=xdBTX4RMoBE&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=2) - 2,5 часа 33 | 2. [CSS для самых маленьких](https://www.youtube.com/playlist?list=PL3LQJkGQtzc6_KA1AZy9O6kVWwX1hoaTn) - 1 час 34 | 3. [30 CSS-селекторов, которые вы должны знать](http://rightblog.ru/2606) - 30 мин 35 | 4. [Изучение селекторов посредством игры](https://flukeout.github.io/) - 1 час 36 | 37 | ### *!!! Практическое задание* 38 | [Task HTML, CSS & Git Basics](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codejam-cv.md) - 2 часа. Начать стилизовать ваше cv на основе созданного index.html. Окончательная стилизация будет в ходе следующего практического задания. [Пример](https://drive.google.com/file/d/1GOT8bp6g_UAJ5iOX3orj1W0NDa5wDwvw/view) оформленной работы. Обратите внимание, это только пример. Вы можете оформить на свое усмотрение. 39 | 40 | [Build a Tribute Page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page) - 4 часа 41 | 42 | ### CSS positioning and layout (Flex) 43 | 1. [Видео лекция Position. Floats. Flex. Semantic. CSS3](https://www.youtube.com/watch?v=iSQcOjxttNg&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=3) - 2 часа 44 | 2. [CSS: Flexbox](https://www.evernote.com/shard/s368/client/snv?noteGuid=4346cdea-9386-4738-bfff-f9faafc05e94¬eKey=fb6ec76312f7111b&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs368%2Fsh%2F4346cdea-9386-4738-bfff-f9faafc05e94%2Ffb6ec76312f7111b&title=CSS%253A%2BFlexbox%2B%2528htmlacademy.ru%2529) - 30 мин 45 | 3. [Шпаргалка по Flexbox](https://habr.com/ru/post/313938/) - 30 мин 46 | 4. [Изучение флексбоксов посредством игры](https://flexboxfroggy.com/#ru) - 1 час 47 | 48 | ### *!!! Практическое задание* 49 | [Task HTML, CSS & Git Basics](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codejam-cv.md) - 2 часа. Завершить стилизацию вашего cv 50 | 51 | 52 | ### Медиазапросы 53 | 1. [CSS3-медиазапросы](https://html5book.ru/css3-mediazaprosy/) - 30 мин 54 | 2. [Уроки CSS - Медиа запросы основы](https://www.youtube.com/watch?v=M-xc1EOMOIE) - 30 мин 55 | 56 | ### *!!! Практическое задание* 57 | [Task HTML, CSS & Git Basics](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/codejam-cv.md) - 3 часа. Сделайте ваш cv адаптивным, используя медиазапросы 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /rs-epam-lab/week-10-11.md: -------------------------------------------------------------------------------- 1 | ## Неделя №10-11 2 | ### Event Loop, Async programming, RESTful API 3 | #### Async programming 4 | 1. [Асинхронность в JavaScript. Таймеры, промисы, async/await](https://www.youtube.com/watch?v=Ih6Q7ka2eSQ&feature=youtu.be) - 2,5 часа 5 | 2. [Полное понимание синхронного и асинхронного JavaScript с Async/Await](https://medium.com/@stasonmars/%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5-%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE-%D0%B8-%D0%B0%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE-javascript-%D1%81-async-await-ba5f47f4436) - 1 час 6 | 3. [Про цикл событий в JavaScript или "как на самом деле работает асинхронность"?](https://www.youtube.com/watch?v=8cV4ZvHXQL4&feature=youtu.be) - 1 час 7 | 4. [Использование Fetch](https://developer.mozilla.org/ru/docs/Web/API/Fetch_API/Using_Fetch) - 1 час 8 | 5. [Асинхронные функции (async/await)](https://youtu.be/5kAPExqSZ1I) - 1 час 9 | 6. [JavaScript Fetch API and using Async/Await](https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp) - 1 час (статья на английском языке. В случае сложностей с переводом - обратитесь к ментору за помощью) 10 | 11 | 12 | #### RESTful API Style 13 | 1. [Разбираемся с REST и RESTful API](https://code.tutsplus.com/ru/tutorials/code-your-first-api-with-nodejs-and-express-understanding-rest-apis--cms-31697) - 1 час 14 | 2. [REST: простым языком](https://medium.com/@andr.ivas12/rest-%D0%BF%D1%80%D0%BE%D1%81%D1%82%D1%8B%D0%BC-%D1%8F%D0%B7%D1%8B%D0%BA%D0%BE%D0%BC-90a0bca0bc78) - 1 час 15 | 16 | 17 | ### *!!! Практическое задание* 18 | 1. [Fancy-weather](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/fancy-weather.md) - 60 часов 19 | 20 | 21 | -------------------------------------------------------------------------------- /rs-epam-lab/week-12.md: -------------------------------------------------------------------------------- 1 | ## Неделя №12 2 | ### HTTP/ HTTPS, WebSocket 3 | #### HTTP/ HTTPS 4 | 1. [Разница между HTTP и HTTPS](https://hostiq.ua/wiki/http-https/) - 30 мин 5 | 6 | 7 | #### WebSocket 8 | 1. [Знакомство с WebSocket](https://www.youtube.com/watch?v=DKOaL94VyFY&feature=youtu.be) - 30 мин 9 | 2. [Echo Test](https://www.websocket.org/echo.html) - 30 мин 10 | 3. [WebSockets](https://www.youtube.com/watch?v=rpyk9JGAPZs&feature=youtu.be) - 1,5 часа 11 | 12 | 13 | #### Практический JavaScript 14 | 1. [Практика JavaScript](https://www.youtube.com/playlist?list=PLqKQF2ojwm3n-ufn3E-l6Y0VxDrj3hM5M) 15 | 16 | 17 | ### *!!! Практическое задание* 18 | 1. [Chat on socket.io](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-12-chat-on-socketio-20) - 4 часа 19 | 2. [Portfolio](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/Portfolio.md) - 20 часов 20 | -------------------------------------------------------------------------------- /rs-epam-lab/week-13.md: -------------------------------------------------------------------------------- 1 | ## Неделя №13 2 | ### Interview 3 | 1. [Список (продвинутых) вопросов по JavaScript](https://github.com/lydiahallie/javascript-questions/blob/master/ru-RU/README.md) - 10 часов ( прочитайте внимательно вопрос, дайте на него ответ и только после этого сравните с предложенным ответом) 4 | 2. [Подготовка к собеседованию](https://github.com/irinainina/rsschool-materials#%D0%BF%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0-%D0%BA-%D1%81%D0%BE%D0%B1%D0%B5%D1%81%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E) - 30 часов 5 | -------------------------------------------------------------------------------- /rs-epam-lab/week-2-3.md: -------------------------------------------------------------------------------- 1 | ## Неделя №2-3 2 | ### Git & GitHub 3 | 1. [Конспект](https://www.evernote.com/shard/s368/client/snv?noteGuid=b1359883-2b9e-419a-b9de-dd959fc05f05¬eKey=97c0f19486d851b3&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs368%2Fsh%2Fb1359883-2b9e-419a-b9de-dd959fc05f05%2F97c0f19486d851b3&title=Git) - 1 час 4 | 2. [Интерактивный курс](https://learngitbranching.js.org/?locale=ru_RU) - 1,5 часа 5 | 6 | ### Chrome DevTools 7 | 1. [Видео лекция по Chrome DevTools](https://www.youtube.com/watch?v=gvB0qoio-Ic&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=7) - 1,5 часа 8 | 9 | 10 | ### HTML/Css 11 | 1. [Основы CSS/CSS3](https://www.youtube.com/playlist?list=PL026CCEB5125879C2) - 5 часов 12 | 2. [Вебинар Сергея Шаляпина. FAQ Broswers and IDEs FAQ HTML and CSS Basics](https://www.youtube.com/watch?v=UQavTWiTpnA) - 1,5 часа 13 | 3. [Вебинар Сергея Шаляпина. Forms & Inputs. Flexbox & Grid example. Singolo 1 review](https://www.youtube.com/watch?v=PhRVJC0kBGE&feature=youtu.be) - 2,5 часа 14 | 4. [Вебинар Сергея Шаляпина. DOM events exampes. Singolo 3 review](https://www.youtube.com/watch?v=_5f0kznOM_A&feature=youtu.be) - 2,5 часа 15 | 5. [Вебинар Сергея Шаляпина. DOM examples. Singolo DOM FAQ. Singolo responsive details](https://www.youtube.com/watch?v=0M9Rz-wXYas) - 2 часа 16 | 6. [Вебинар Сергея Шаляпина. Singolo FAQ](https://www.youtube.com/watch?v=fFDw7AH2OXo&feature=youtu.be) - 1,5 часа 17 | 7. [Вебинар Виктории Ворожун. Часть 1](https://www.youtube.com/watch?v=ZAde-IJAHzo&feature=youtu.be) - 2,5 часа 18 | 8. [Вебинар Виктории Ворожун. Часть 2](https://www.youtube.com/watch?v=BJENQIX2e2o&feature=youtu.be) - 2,5 часа 19 | 9. [Вебинар Виктории Ворожун. Часть 3](https://www.youtube.com/watch?v=fooyYgIuZe8&feature=youtu.be) - 3 часа 20 | 10. [Вебинар Виктории Ворожун. Часть 4](https://www.youtube.com/watch?v=Qk2UGlFNKPE) - 3 часа 21 | 11. [Вебинар Виктории Ворожун. Часть 5](https://www.youtube.com/watch?v=ouZnGUefneQ&feature=youtu.be) - 3,5 часа 22 | 23 | 24 | ### Sass 25 | 1. [Preprocessors. SASS](https://www.youtube.com/watch?v=JO8DvVZbxDw&feature=youtu.be) - 2 часа 26 | 2. [Основы Sass](https://sass-scss.ru/guide/) - 1 час 27 | 28 | 29 | ### JavaScript для верстальщика 30 | 1. [JavaScript для верстальщика](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/js-for-frontend.md) - 1 час 31 | 32 | 33 | ### Grid 34 | 1. [Вёрстка на Grid в CSS](https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%D1%80%D1%81%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-grid-%D0%B2-css-%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%B8-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-220508316f8b) - 30 мин 35 | 2. [Видео курс Css Grid](https://www.youtube.com/watch?v=LHW_M9mf4Is&list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21) - 1,5 часа 36 | 3. [Изучение гридов посредством игры](https://cssgridgarden.com/#ru) - 1 час 37 | 38 | 39 | ### *!!! Практическое задание* 40 | [Simple-singolo](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/simple-singolo.md) - 40 часов 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /rs-epam-lab/week-4.md: -------------------------------------------------------------------------------- 1 | ## Неделя №4 2 | ### JavaScript Basic 3 | 1. [Введение в JavaScript](https://learn.javascript.ru/intro) - 30 мин 4 | 2. [Привет, мир!](https://learn.javascript.ru/hello-world) - 30 мин 5 | 3. [Переменные](https://learn.javascript.ru/variables) - 1 час 6 | 4. [Основы JavaScript. Видеокурс](https://www.youtube.com/playlist?list=PL363QX7S8MfSxcHzvkNEqMYbOyhLeWwem) - 10 часов (изучить все 35 видео) 7 | 5. [Типы данных](https://learn.javascript.ru/types) - 1 час 8 | 6. [Вы не знаете JS: типы данных и значения](https://medium.com/@Dimetrio89/%D0%B2%D1%8B-%D0%BD%D0%B5-%D0%B7%D0%BD%D0%B0%D0%B5%D1%82%D0%B5-js-%D1%82%D0%B8%D0%BF%D1%8B-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85-%D0%B8-%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-f95a605de82) - 1 час 9 | 7. [Преобразование типов](https://learn.javascript.ru/type-conversions) - 30 мин 10 | 8. [Операторы](https://learn.javascript.ru/operators) - 30 мин 11 | 9. [Видео лекция JS Data types](https://www.youtube.com/watch?v=w420Ullz2cw&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=4) - 1 час (смотреть только первый час, те до массивов) 12 | 10. [Операторы сравнения](https://learn.javascript.ru/comparison) - 30 мин 13 | 11. [Условные операторы: if, '?'](https://learn.javascript.ru/ifelse) - 30 мин 14 | 12. [Логические операторы](https://learn.javascript.ru/logical-operators) - 30 мин 15 | 13. [Циклы while и for](https://learn.javascript.ru/while-for) - 30 мин 16 | 14. [Конструкция "switch"](https://learn.javascript.ru/switch) - 30 мин 17 | 18 | ### *!!! Практическое задание* 19 | 1. [Codewars](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/codewars-basic.md) - 10 часов (минимум 10 задач на ваш выбор, оставшиеся задания будут решены в ходе следующей практики) 20 | 2. [Calculator](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-1-calculator) - 10 часов 21 | 22 | 23 | -------------------------------------------------------------------------------- /rs-epam-lab/week-5.md: -------------------------------------------------------------------------------- 1 | ## Неделя №5 2 | ### JavaScript. 3 | #### Array. Object. 4 | 1. [Видео лекция JS Data types](https://www.youtube.com/watch?v=w420Ullz2cw&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=4) - 1 час (смотреть часть, посвященную массивам) 5 | 2. [Объекты](https://learn.javascript.ru/object) - 1 час 6 | 3. [Работа с объектами](https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Working_with_Objects) - 1 час 7 | 4. [Основы Javascript](https://www.youtube.com/playlist?list=PLY4rE9dstrJymG1GyPLgOKsJNq9r-p6pX) - 8 часов 8 | 9 | 10 | #### Function 11 | 1. [Функции](https://learn.javascript.ru/function-basics) - 1 час 12 | 2. [Function Expression](https://learn.javascript.ru/function-expressions) - 1 час 13 | 3. [Функции-стрелки, основы](https://learn.javascript.ru/arrow-functions-basics) - 30 мин 14 | 4. [Видео лекция. Functions](https://www.youtube.com/watch?v=fShrn50Fkhw&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=6) - 2,5 часа 15 | 16 | 17 | #### Data mapping. Basic operations 18 | 1. [Методы у примитивов](https://learn.javascript.ru/primitives-methods) - 30 мин 19 | 2. [Числа](https://learn.javascript.ru/number) - 1 час 20 | 3. [Строки](https://learn.javascript.ru/string) - 1 час 21 | 4. [Массивы](https://learn.javascript.ru/array) - 1 час 22 | 5. [Методы массивов](https://learn.javascript.ru/array-methods) - 1 час 23 | 6. [Object.keys, values, entries](https://learn.javascript.ru/keys-values-entries) - 1 час 24 | 7. [Деструктурирующее присваивание](https://learn.javascript.ru/destructuring-assignment) - 1 час 25 | 26 | 27 | ### *!!! Практическое задание* 28 | 1. [Dynamic Landing Page](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-2-dynamic-landing-page-30) - 6 часов 29 | 2. [Meditation App](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-3-meditation-app-20) - 4 часа 30 | 3. [Drum Kit](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-4-drum-kit-20) - 4 часа 31 | 4. [CSS Variables and JS](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-5-css-variables-and-js-20) - 4 часа 32 | 5. [Flex Panel Gallery](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-6-flex-panel-gallery-10) - 2 часа 33 | -------------------------------------------------------------------------------- /rs-epam-lab/week-6-7.md: -------------------------------------------------------------------------------- 1 | ## Неделя №6-7 2 | ### JavaScript. DOM elements, Browser events, other events. 3 | #### Дата и время 4 | 1. [Дата и время](https://learn.javascript.ru/date) - 1 час 5 | 6 | 7 | #### DOM, elements 8 | 1. [Браузерное окружение, спецификации](https://learn.javascript.ru/browser-environment) - 1 час 9 | 2. [DOM-дерево](https://learn.javascript.ru/dom-nodes) - 1 час 10 | 3. [Навигация по DOM-элементам](https://learn.javascript.ru/dom-navigation) - 1 час 11 | 4. [Поиск: getElement*, querySelector*](https://learn.javascript.ru/searching-elements-dom) - 1 час 12 | 5. [Свойства узлов: тип, тег и содержимое](https://learn.javascript.ru/basic-dom-node-properties) - 1 час 13 | 6. [Атрибуты и свойства](https://learn.javascript.ru/dom-attributes-and-properties) - 1 час 14 | 7. [Изменение документа](https://learn.javascript.ru/modifying-document) - 1 час 15 | 8. [Стили и классы](https://learn.javascript.ru/styles-and-classes) - 1 час 16 | 9. [Размеры и прокрутка элементов](https://learn.javascript.ru/size-and-scroll) - 1 час 17 | 10. [Размеры и прокрутка окна](https://learn.javascript.ru/size-and-scroll-window) - 1 час 18 | 11. [Координаты](https://learn.javascript.ru/coordinates) - 1 час 19 | 20 | 21 | #### Browser events, other events 22 | 1. [Введение в браузерные события](https://learn.javascript.ru/introduction-browser-events) - 1 час 23 | 2. [Всплытие и погружение](https://learn.javascript.ru/bubbling-and-capturing) - 1 час 24 | 3. [Делегирование событий](https://learn.javascript.ru/event-delegation) - 1 час 25 | 4. [Действия браузера по умолчанию](https://learn.javascript.ru/default-browser-action) - 1 час 26 | 5. [Генерация пользовательских событий](https://learn.javascript.ru/dispatch-events) - 1 час 27 | 6. [Основы событий мыши](https://learn.javascript.ru/mouse-events-basics) - 1 час 28 | 7. [Движение мыши: mouseover/out, mouseenter/leave](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) - 1 час 29 | 8. [Drag'n'Drop с событиями мыши](https://learn.javascript.ru/mouse-drag-and-drop) - 1 час 30 | 9. [Понимание javascript - работа с DOM](https://www.youtube.com/watch?v=-2WiaSvOj78&feature=youtu.be) - 2 часа 31 | 10. [Javascript. Стандарт ES6. Смысл, основные фишки и подвохи](https://www.youtube.com/watch?v=Spme1IW1ejg&feature=youtu.be) - 2 часа 32 | 11. [Внутренний мир javascript: объекты и прототипы](https://www.youtube.com/watch?v=zWjT_2hFkMw&feature=youtu.be) - 2 часа 33 | 12. [Понимание javascript - замыкания, контекст, callback](https://www.youtube.com/watch?v=LM0tW2MZJZ4&list=PLyeqauxei6jezJsOYzsxZFPv8OJe5fb6a&index=4) - 2 часа 34 | 13. [Javascipt и анимации - взаимодействие с CSS](https://www.youtube.com/watch?v=0TLnIQbk5qo&feature=youtu.be) - 2 часа 35 | 36 | 37 | #### Webpack 38 | 1. [Webpack 4 - простая сборка проекта](https://www.youtube.com/watch?v=MRlBKfGktwI&feature=youtu.be) - 2 часа 39 | 2. [Webpack. Полный курс 2020](https://www.youtube.com/watch?v=eSaF8NXeNsA&feature=youtu.be) - 3 часа 40 | 41 | 42 | ### *!!! Практическое задание* 43 | 1. [Codewars Basic-1](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/codewars-basic-1.md) - 10 часов 44 | 2. [Fun with HTML5 Canvas](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-7-fun-with-html5-canvas-40) - 8 часов 45 | 3. [Custom Video Player](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-8-custom-video-player-20) - 4 часа 46 | 4. [Video Speed Controlle](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-9-video-speed-controller-10) - 2 часа 47 | 5. [Whack-A-Mole](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-10-whack-a-mole-40) - 8 часов 48 | 6. [Virtual Keyboard](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/projects.md#task-11-virtual-keyboard-40) - 8 часов 49 | 50 | 51 | -------------------------------------------------------------------------------- /rs-epam-lab/week-8-9.md: -------------------------------------------------------------------------------- 1 | ## Неделя №8-9 2 | ### Продвинутый JavaScript: this, scope, closure, ES6 3 | #### This. Scope. Closure 4 | 1. [Сложный JavaScript простым языком](https://www.youtube.com/watch?v=aQkgUUmUJy4&list=PLqKQF2ojwm3l4oPjsB9chrJmlhZ-zOzWT) - 20 часов (плейлист состоит из 17 видео лекций) 5 | 2. [Контексты исполнения](http://dmitrysoshnikov.com/ecmascript/ru-chapter-1-execution-contexts/) - 1 час 6 | 3. [Объект переменных](http://dmitrysoshnikov.com/ecmascript/ru-chapter-2-variable-object/) - 1 час 7 | 4. [This](http://dmitrysoshnikov.com/ecmascript/ru-chapter-3-this/) - 1 час 8 | 5. [Цепь областей видимости](http://dmitrysoshnikov.com/ecmascript/ru-chapter-4-scope-chain/) - 1 час 9 | 6. [Функции](http://dmitrysoshnikov.com/ecmascript/ru-chapter-5-functions/) - 1 час 10 | 7. [Замыкания](http://dmitrysoshnikov.com/ecmascript/ru-chapter-6-closures/) - 1 час 11 | 12 | 13 | #### ООП 14 | 1. [Открытый вебинар по javascript - [J]u[S]t prototype this!](https://www.youtube.com/watch?v=5l01s6Vkqp0&feature=youtu.be) 1,5 часа 15 | 16 | 17 | #### Наследование 18 | 1. [Класс: базовый синтаксис](https://learn.javascript.ru/class) - 1 час 19 | 2. [Наследование классов](https://learn.javascript.ru/class-inheritance) - 1 час 20 | 3. [Статические свойства и методы](https://learn.javascript.ru/static-properties-methods) - 1 час 21 | 4. [Приватные и защищённые методы и свойства](https://learn.javascript.ru/private-protected-properties-methods) - 1 час 22 | 5. [Расширение встроенных классов](https://learn.javascript.ru/extend-natives) - 1 час 23 | 6. [Проверка класса: "instanceof"](https://learn.javascript.ru/instanceof) - 1 час 24 | 7. [Примеси](https://learn.javascript.ru/mixins) - 1 час 25 | 26 | 27 | 28 | #### ES6+ 29 | 1. [EcmaScript - Полный курс (ES6, ES7, ES8)](https://www.youtube.com/watch?v=Ti2Q4sQkNdU) - 2,5 часа 30 | 2. [ES6 по-человечески](https://habr.com/ru/post/305900/) - 1 час 31 | 3. [Что нового в JavaScript 2020?](https://www.youtube.com/watch?v=7TpAN4FISeI&feature=youtu.be) - 1 час 32 | 33 | 34 | ### *!!! Практическое задание* 35 | 1. [Codewars Basic-2](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/codewars-basic-2.md) - 10 часов 36 | 2. [Raindrops](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/stage-0/raindrops.md) - 40 часов 37 | -------------------------------------------------------------------------------- /trash.md: -------------------------------------------------------------------------------- 1 | ## RS School Stage #1 2 | - [Git & GitHub Fundamentals](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/git.md) 3 | - GIT Basics 4 | - GitHub 5 | - Pull Request Workflow 6 | - Terminal Usage 7 | - [Windows](https://www.digitalcitizen.life/command-prompt-how-use-basic-commands) 8 | - [Mac](https://www.imore.com/how-use-terminal-mac-when-you-have-no-idea-where-start) 9 | - [IDE](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/IDE-battle.md) 10 | - [Data Structures & Alogrithms](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/basic-algorithms.md) 11 | - [HTML & CSS Fundamentals](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/html-css-basics.md) 12 | - HTML/Css Basic. Semantic. CSS3 13 | - CSS positioning and layout (Flex/Grid/Table/...) 14 | - JS Basics 15 | - [JS Intro](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-intro.md) 16 | - [JS Data Types](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/js-data-types.md) 17 | - HTML/CSS Advanced 18 | - CSS media queries 19 | - Responsive/Adaptive Web Design 20 | - CSS Frameworks: Bootstrap 21 | - CSS pre-/post-processors 22 | - Simple CSS animations (transition/@keyframes) 23 | 24 | TODO: Time management, How to learn 25 | ## Old 26 | ``` 27 | - HTML/CSS 28 | - [Photoshop basics](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/photoshop-basics.md) 29 | - [Position. Floats. Semantics. CSS3](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/position-floats-semantics-css3.md) 30 | - [Float & Positioning. Error Analysis](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/float-positioning-error-analysis.md) 31 | - [Web typography](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/web-typography.md) 32 | - [Responsive Web Design. Flexbox. CSS Grid Layout. CSS Recipes & Layouts](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/css-recipies-and-layouts.md) 33 | - [CSS Preprocessors. SASS](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/css-preprocessors.md) 34 | - [CSS Frameworks](https://github.com/rolling-scopes-school/lectures/blob/master/lectures/css-frameworks.md) 35 | ``` 36 | ## RS School Stage #2 37 | - [Javascript. Modules](modules/js-modules.md) --------------------------------------------------------------------------------