Псевдоэлементы (:before, :after) в CSS

CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11 CSS псевдоэлементы – это селекторы которые, помощью CSS, искусственно создают области в дереве документа. Грубо говоря добавляют к элементу новый элемент, либо выделяют часть содержимого элемента. Рассмотрим такие CSS псевдоэлементы как before, after, first-line и first-letter

1. Синтаксис записи псевдоэлементов - 1:38
2. first-line - 2:14
3. first-letter - 3:25
4. before - 4:37
5. after - 5:40
6. Специфические псевдоэлементы - 9:10
7. Комбинирование псевдоэлементов и псевдоклассов - 12:07

Programmer’s Notes | 👉 Смотреть видео

👨🏻‍💻Словари (dict) и работа с ними

Для хранения пар (ключ-значение) в Питон используются словари. В ходе видео мы научимся создавать, а также использовать словари. Дополнительно мы изучим функции по работе со словарями в Python.

1. Что такое словарь? - 00:17
2. Создание словаря - 00:45
3. Описание объекта - 02:31
4. Альтернативная запись словаря - 04:35
5. Вывод элементов через цикл - 06:20
6. Функции по работе со словарем - 08:31
7. Описание человека - 11:38
8. Заключительная часть - 15:55

Programmer’s Notes | 👉 Смотреть видео

Основы CSS Grid Layou

Сегодня поговорим о свойствах определения сетки, а именно о grid-template-rows, grid-template-columns, grid-template. А так же grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow.

1. Свойства grid-template-rows и grid-template-columns - 00:16
2. Единица гибкости fr – 03:52
3. Применение minmax - 07:00
4. Контентная ширина, fit-content - 09:13
5. Применение repeat - 11:38
6. Свойство grid-template-areas - 12:49
7. Свойство grid-template - 16:19
8. Неявная сетка. grid-auto-rows, grid-auto-columns - 19:13
9. Свойство grid-auto-flow - 20:58

Programmer’s Notes | 👉 Смотреть видео

Всё о ES6 классах в JavaScript

В этом видео мы разберемся, как работают Классы (ES6 Classes), которые появились в редакции Javascript ES6. Посмотрим, зачем они нужны и чем отличаются от использования Прототипов.

1. How to make Classes - 01:01
2. Constructor() – 01:15
3. How to make objects with: new Class() - 02:06
4. Prototypes methods - 03:14
5. Static - 04:00
6. Classes inheritance - 04:52
7. Super(args) - 07:47
8. Parent method - 09:06
9. Class getters, setters - 09:40
10. Practice examples of classes- 11:45

Programmer’s Notes | 👉 Смотреть видео

🖥Объектно-ориентированное программирование простым языком

ООП простым языком. Основные концепции объектно ориентированного программирования. Объекты, классы, инкапсуляция, полиморфизм, наследование, композиция, агрегация, интерфейсы, паттерны, solid, dependency injection.

1. Введение - 00:00
2. Отличие процедурного подхода от объектно-ориентированного. – 00:55
3. Классы. Объекты. Свойства. Методы. Конструктор. - 02:10
4. Инкапсуляция и сокрытие. Модификаторы доступа. - 04:40
5. Наследование - 11:50
6. Полиморфизм. Параметрический и ad-hoc - 16:40
7. Агрегация и композиция. - 23:00
8. Интерфейсы и абстрактные классы. - 26:35
9. Внедрение зависимостей. Dependency injection - 32:30
10. Паттерн singleton - 37:10

Programmer’s Notes | 👉 Смотреть видео

Принцип единственной ответственности

Принцип единственной ответственности — принцип ООП, обозначающий, что каждый объект должен иметь одну ответственность и эта ответственность должна быть полностью инкапсулирована в класс. Все его поведения должны быть направлены исключительно на обеспечение этой ответственности.

1. Все принципы SOLID вкратце- 0:50
2. Для чего нужны принципы SOLID. – 4:02
3. Формулировка принципа SRP. - 5:42
4. SRP на картинке. - 6:47
5. Как следовать SRP - 10:23
6. Антипаттерн GoD object- 11:35
7. Любые SOLID принципы требуют критического осмысления - 12:15
8. Active Record нарушает SRP - 13:20

Programmer’s Notes | 👉 Смотреть видео

Хранение данных, XML, HTML

XML — это способ представить любую информацию в виде древовидной структуры. В жизни очень часто человек организует информацию именно в виде дерева. HTML — грубо говоря, одна из разновидностей XML. Требования к разметке в некоторых версиях HTML, однако (а версий HTML много, сейчас, например, самая актуальная HTML5), могут существенно отличаться о того, что мы рассказали про XML.

1. Зачем нужны форматы хранения даннях - 0:29
2. Как устроен XML (структура, тэги, атрибуты). – 1:48
3. Файл Word-а как пример сложного XML файла. - 7:02
4. Программа «Личные финансы»: постановка задачи. - 8:58
5. Программа «Личные финансы»: проектируем структуру XML файла - 9:12
6. Программа «Личные финансы»: читаем XML в Ruby - 9:44

Programmer’s Notes | 👉 Смотреть видео

Полный курс по React Hooks

Внутри расскажу про: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer. В конце покажу, как можно создавать свои собственные хуки.

1. Введение - 00:00
2. useState (структура, тэги, атрибуты). – 01:11
3. useEffect. - 23:20
4. useRef. - 37:28
5. useMemo - 48:07
6. useCallback - 59:39
7. useContext - 1:09:44
8. useReducer - 1:26:55
9. Создаем свои хуки - 1:34:18

Programmer’s Notes | 👉 Смотреть видео

🖱Тип данных Number в JavaScript

В JavaScript существуют 2 вида чисел. Это обычные числа в 64-битном формате с которыми мы чаще всего и будем работать. И BigInt числа, они дают возможность работать с целыми числами произвольной длины. В этом уроке мы рассмотрим обычные числа типа number, и научимся с ними работать.

1. В уроке - 00:00
2. Запись чисел – 00:26
3. Системы счисления. toString() - 01:38
4. Округление чисел - 03:03
5. Проблема неточных вычислений - 06:02
6. Проверка: isFinite и isNaN - 09:26
7. parseInt и parseFloat - 11:47
8. Некоторые функции Math - 13:53

Programmer’s Notes | 👉 Смотреть видео

Основы верстки сайта с нуля

В этом видео начнем верстать сайт с нуля. Верстка сайта это процесс создания сайта из макета, который нарисовал дизайнер. Видео для начинающих, в нем не будет препроцессоров, сборщиков и каких-либо инструментов, только HTML и CSS!

1. Подготовка к работе - 00:00
2. Создаем проект – 03:10
3. Шрифты - 05:35
4. Can I use? - 09:30
5. Начинаем верстать главный блок - 11:50
6. Верстаем шапку - 16:30
7. Верстаем заголовки - 25:40
8. Совет и ошибки начинающих - 33:30
9. Верстаем кнопку- 34:40
10. Верстаем нижнюю часть - 39:00

Programmer’s Notes | 👉 Смотреть видео

Что выбрать: PHP или Python?

Мы разобрались, под какие задачи и кому больше подходит PHP и Python, какие платформы они поддерживают,какими преимуществами и недостатками обладают и с чего лучше начинать свой путь в IT.

1. Кому нужен PHP или Python? - 00:00
2. Что должен знать бекэнд-разработчик? – 00:28
3. Год появления PHP и Python - 01:21
4. Область применения PHP и Python - 01:44
5. Популярность PHP и Python - 04:09
6. Сложно ли учить PHP и Python - 05:21
7. CMS и фреймворки PHP и Python - 06:56
8. Сколько зарабатывают? - 08:05
9. Что выбрать: PHP или Python? - 11:49

Programmer’s Notes | 👉 Смотреть видео

Переменные и типы данных в Python

Установка, написание первой программы, переменные, операции над числами.

1. Установка python - 5:25
2. Запуск и работа в IDLE, оператор print – 6:50
3. Переменные - 10:00
4. Типы переменных - 12:00

Programmer’s Notes | 👉 Смотреть видео

Что такое React и как его освоить?

В этом уроке разберемся, как работают Ruby on Rails, что это за технология, почему с её помощью создано так много стартапов. Научимся устанавливать ruby с помощью rvm на ubuntu, поставим гем rails и создадим наш новый проект на рельсах. Также расскажу вкратце, для чего какая папка нужна в проекте на Ruby on Rails. После всего этого мы задеплоим наш (пока очень простой) проект в интернет с помощью сервиса Heroku

1. Что такое Ruby on Rails? - 3:09
2. Как работает Ruby on Rails приложение – 4:54
3. Как установить Ruby on Rails на разные ОС - 10:15
4. Про системный руби - 11:49
5. Что такое apt-get - 14:12
6. Установка rvm - 17:07
7. Установка Ruby - 19:50
9. Установка Ruby on Rails - 22:40
10. Установка NodeJS и Yarn - 25:21
11. Создаем проект на rails - 29:19
12. Структура rails-проекта - 31:38
13. Выкладываем сайт на Heroku - 39:28
14. Заключение - 48:36

Programmer’s Notes | 👉 Смотреть видео

Что такое React и как его освоить?

В этом видео речь пойдет про JavaScript библиотеку React JS. На данный момент react самая испульзуемая из всех библиотек javascript. Я покажу что такое react js, сделаем обзор возможностей данной js библиотеки, а так же в конце расскажу плану изучения для начинающих. React js на самом деле на так сложен как кажется на первый взгляд, любой новичек знающий язык программирования javascript способен освоить реакт по урокам буквально за неделю. Вникнуть в react js проще простого особенно зная что вы можете на нем сделать.

1. Обзор React js - 00:00
2. Для чего нужен React js, библиотеки для React – 00:40
3. Марафон React js - 01:50
4. Что вы можете написать на React js - 03:00
5. Преимущества React js, Компонентный подход - 04:13
6. React Hooks: улучшенное управление состоянием - 05:27
7. Использование виртуального DOM - 06:13
9. Кроссплатформенные мобильные приложения React Native - 07:35
10. Актуальный план изучения React js - 07:55

Programmer’s Notes | 👉 Смотреть видео

Что такое React и как его освоить?

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

1. В уроке - 00:00
2. Создание объекта и его свойств – 00:32
3. Имена (ключи) свойств объектов - 02:50
4. Тип данных Symbol - 06:39
5. Вложенность объектов - 07:23
6. Значение свойств объекта из переменных - 08:33
7. Изменение объекта и его свойств - 10:04
9. Проверка существования свойства объекта - 16:18
10. Цикл for in - 20:24
11. Методы объектов. Использование "this" - 22:34
12. Функции-конструкторы - 27:03

Programmer’s Notes | 👉 Смотреть видео

Что такое локальный сервер и для чего нужен?

Язык PHP является серверным языком программирования. Для его работы требуется локальный или удаленный сервер. В ходе видео мы познакомимся с локальными серверами и дополнительно научимся выводить информацию при помощи PHP.

1. Зачем нужен сервер? - 00:19
2. Программы локальных серверов – 00:55
3. Настройка сервера - 01:25
4. Настройка сервера в PhpStorm - 03:13
5. Теги для написания PHP - 06:55
6. Базовая HTML структура - 07:40
7. Вывод текста. Оператор «echo» - 08:20
9. Вывод кавычек - 10:40
10. Создание комментариев - 12:15
11. Заключительная часть - 13:30

Programmer’s Notes | 👉 Смотреть видео

PostgreSQL: введение

Базы данных (БД) вообще и реляционные базы данных в частности - очень широкие темы. Эта серия уроков по SQL посвящена именно разработке реляционных баз данных под управлением PostgreSQL (PostgreSQL - это СУБД т.е. система управления базами данных).

1. Основные концепции: БД, СУБД - 00:00
2. Реляционная модель и SQL – 17:22
3. Почему стоит выбрать PostgreSQL в качестве СУБД? - 30:54
4. Установка PostgreSQL - 36:04
5. Обзор типов данных в PostgreSQL - 42:38
6. Как создать базу данных - 56:48
7. Как создать таблицу в БД - 1:04:22
8. Отношение "один ко многим" - 1:16:03
9. Отношение "один к одному" в теории - 1:35:18
10. Отношение "один к одному" на практике - 1:37:23
11. Отношение "многие ко многим" - 1:44:45
12. Создаём БД Northwind - 1:59:12

Programmer’s Notes | 👉 Смотреть видео

Что такое локальный сервер и для чего нужен?

В этом видео вы увидите на примерах, какие задачи выполняют Junior JavaScript программисты в своей ежедневной работе. Многие начинающие долго учат теорию, не понимая с чем им придется столкнуться в реальной работе программиста, ведь это уже не обучающие проекты. Мы рассмотрим что делают Junior javascript разработчики в напралениях: Frontend, backend и мобильной разработки. Какие части сайта верстает Junior, что делает с серверной частью бэкенда junior и как обстоят дела в мобильных приложениях.

1. Что делают Junior Javascript разработчики - 00:00
2. Чем отличаются Junior в разных компаниях – 01:10
3. Какие бывают IT компании - 01:30
4. Как Middle становится Junior - 02:22
5. Front-end разработка javascript задачи - 03:08
6. Задачи back-end разработчика Javascript - 04:40
7. Задачи мобильной разработки Javascript - 06:00

Programmer’s Notes | 👉 Смотреть видео

Как можно быстро выучить c++?

Как эффективно изучить C++ и не сойти с ума.

1. «Язык» C/C++ - 00:25
2. Зачем изучать C++? – 01:12
3. Чистый Си - 02:25
4. Высокоуровневые конструкции - 03:50
5. Практика - 04:51
6. Техническое интервью - 06:16
7. Отладка и дополнение Open Source без гемора со сборкой - 06:49
8. Ресурсы для профессионалов - 09:42
9. Итог - 10:13

Programmer’s Notes | 👉 Смотреть видео

🔘Статические файлы - Django

Веб-сайты обычно нуждаются в дополнительных файлах, таких как изображения, JavaScript или CSS. В Django мы называем эти файлы «статическими файлами».

1. Подключение Bootstrap - 01:15
2. Статические файлы. Папка «static» – 02:00
3. Написание основного HTML кода - 08:00
4. Пишем основные стили для проекта - 13:14
5. Именованные ссылки- 19:57
6. Дописываем основные стили для сайта - 22:25

Programmer’s Notes | 👉 Смотреть видео

Основы CSS

CSS - язык, который отвечает за описание внешнего вида HTML-документа. Это одна из базовых технологий в современном вебе. В этом видео я своими словами рассказываю про основы css. Разберем синтаксис, подключение стилей, работу с текстом и изображениями.

1. Основы CSS - 0:35
2. Как подключать стили? – 2:29
3. Подключение внешнего CSS - 4:18
4. Работа с текстом - 5:18
5. Блочная модель CSS - 9:44
6. Как сделать адаптивное изображение? - 11:14
7. Добавляем адаптивность текста - 12:24
8. Отступы в блочной модели - 12:59
9. Что изучать дальше? Итоги - 17:04

Programmer’s Notes | 👉 Смотреть видео