Верстка и веб разработка сайтов. Продвинутый уровень Web Develop
Этот курс сделает вас настоящим "PRO" верстальщиком веб сайтов! Освойте современные методы создания CSS анимаций, работу с GRID CSS и продвинутые методы адаптации сайтов. Бонус: работа с Git и NPM
Необходимы базовые знания по HTML и CSS. Знание FlexBox По окончании курса вы будете владеть всеми современными способами верстки и создания сайтов. Привет!
Меня зовут Дима. И я предлагаю вам окунуться в самые глубины создания и верстки веб сайтов!
Этот курс для тех кто уже знает основы, но хочет перейти от хорошего уровня создания сайтов к отличному
Курс для тех, кто владеет базой HTML и CSS но знает что внутри осталось еще множество техник, приемов разработки и технологий, которые используют настоящие pro девелоперы
Если это звучит знакомо, тогда этот курс для вас)
Вдохните жизнь в ваши сайты с помощью современной анимации через CSS
Мы начнём с того что внесём динамики в наши сайты, то есть займёмся анимацией. Изучим как на чистом CSS анимировать кнопки, тексты и заголовки, научимся создавать анимацию карточек, создадим динамичное навигационное меню и все это без единой строчки JS кода, только чистый CSS.
В этом курсе собраны лучшие практики по адаптивному дизайну
Вы научитесь новым способам и трюкам адаптивного дизайна ваших сайтов, используете новые методы определения и записи медиа запросов и научитесь адаптировать все элементы страницы, изменяя всего лишь одно CSS свойство, что бы ваш сайт, выглядел как никогда лучше на любом мобильном устройстве
Изучите все тонкости и преимущества современных пре процессоров
Вы узнаете как ускориться в создании сайтов в несколько раз, используя по полной возможности препроцессора SASS, такие как миксины, переменные и функции.
Необходимая база по использованию NPM
Так же NPM пакеты с необходимыми каждому про разработчику плагинами внутри, дадут нам возможность создавать и оптимизировать сайты как никогда быстро и качественно .
Система контроля версий Git поможет вам в вашей разработке
Дополнительно вы изучите необходимую базу по работе с системой контроля версий git, чтобы у вас всегда была возможность вернуться к нужной версии вашего сайта, независимо от того как сильно вы напортачили при последнем абдейте сайта)
Вы сверстаете 2 современных сайта для своего портфолио
Этот курс построен на практике и разбит на небольшие видео уроки, в которых мы будем шаг за шагом создавать 2 больших современных проектах, основанных на системе float - чтобы вы могли поддерживать старые проекты и конечно на системе GRID CSS, которая позволяет создавать лейауты невероятной сложности.
И конечно, эти проекты будет не стыдно показать своим потенциальным заказчикам или будущим работодателям.
Я всегда на связи!
И будьте уверены, вы не останетесь одни, ведь после каждого небольшого урока, у вас будет возможность сравнить ваш код с моим или просто задать вопрос, ответы обычно не заставляют себя долго ждать.
Гарантия возврата денег!
И если у вас все еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него если он вам не понравится в течении 30 дней.
Присоединяйтесь ко мне и вместе, мы изучим как то как создавать профессиональные, современные веб сайты.
До встречи на уроках! Это практический видео курс. Курс состоит из множества видео где вместе с преподавателем вы будет создавать несколько проектов выполняя практические задания по новому материалу
Программа курса
Привет!) Скачиваем материалы к курсу
Устанавливаем и настраиваем необходимое программное обеспечение
Новое свойство clip-path. Начинаем создавать первую секцию сайта
Если у вас не работает scout-app
Практика: Создайте свою фигуру с помощью Clip-path
Выравнивание элементов по вертикали абсолютным позиционированием
Знакомство с @KeyFrames. Создаем первую анимацию.
Backface-visibility и создание кнопок через псевдо-классы
Анимируем кнопку с помощью псевдо-элементов
Animation-fill-mode. Запуск анимации из определенной точки.
3 принципа веб разработки
Используйте REM вместо PX
О чем этот блок
Базовые команды в терминале
Как редактировать файлы через терминал
Устанавливаем систему git на наш компьютер
Как запустить гит в определенном проекте
Создаем первый коммит
Отправка проекта GitHub
Если у вас ошибка при отправке вашего проекта на GitHub
Ошибка с логином при попытке отправить проект на GitHub
Практика: создайте собственный репозиторий
Как удалить репозиторий GitHub
Как скачивать репозитории из GitHub
Эмулируем работу 2-х разработчиков на одном репозитории
Как вывести информацию о коммитах в терминал. Git log
Что такое ветки
Как создавать ветки и перемещаться по ним.
Закрываем пробел из начала мини курса с обозначениями -u и -M
Ошибка не сохраненного коммита при checkout
Как перекинуть созданные изменения на новую ветку
Как перекинуть несколько коммитов на новую ветку
Что такое состояние открепленной головы. Detached HEAD
Как восстановить конкретный файл из прошлого коммита
Продвинутый git log и git show
Как объединять ветки с помощью Git merge. Способ Fast-forward
Как удалять ветки
Как удалить файлы директории из состояния untracked
Git reset --hard. Способ жесткого отката к коммиту
Второй способ найти подвисший коммит с помощью ORIG_HEAD
Git reset --soft
Git commit --amend изменение комментария прошлого коммита
Git reset --mixed
Разница git reset и git restore
Введение в git diff. Вывод разницы нескольких коммитов в консоль
Практический пример применения git diff
Как вывести схему веток в терминал. Git log --graph
Объединяем ветки с помощью git merge. Способ "Истинное слияние"
Как откатиться назад после слияния
Как скопировать определенный коммит с помощью git cherry-pick
Слияние веток с помощью git rebase
Что лучше git rebase или git merge
Как использовать файл .gitignore
Заключительное слово
О чем этот блок
Как работают SASS переменные
Как работают миксины
Как добавлять аргументы для миксинов
Что такое шаблоны SASS
Как работают SASS функции
Организация файлов SASS большого проекта
3 способа позиционирования элементов
Как работает float
Создаем собственную систему grid
Применение градиента к тексту. Backgroud-clip
Как создавать символы с помощью HTML
Анимируем и доделываем вторую секцию
Как создавать собственные иконочные шрифты
Используем свойство perspective для отражения перспективы элемен
Как работает blending mode в CSS
Доделываем секцию с карточками
Как закруглить текст с помощью свойства shape-outside
Как работают CSS фильтры
Как добавить видео на страницу
Знакомимся с тегом form и его содержимым
Анимируем форму
Делаем собственные radio button с помощью CSS
Создаем footer сайта
Создаем навигационное меню на чистом CSS ч.-1
Настраиваем переходы скорости анимаций, с помощью cubic-bezier
Анимируем гамбургер
О чем этот блок
Как создают адаптивные сайты
Создаем миксин с медиа правилами
Адаптация проекта ч.1
Адаптация проекта ч.2
Адаптация проекта ч.3
Что такое адаптивные изображения
Как адаптировать изображения в HTML
Адаптируем HTML изображения в нашем проекте
Адаптация CSS изображений
Несколько финальных правок сайта
О чем этот блок
Что такое node.js и npm
Готовим к использованию первый npm пакет
Запускаем первый npm пакет
Используем gulp в нашем проекте
Как открыть сайт на мобильном телефоне
О чем этот блок
Подготовка
Как создать шаблон сетки. Grid template
Как работают единицы измерения fr
Как переместить элемент в другую ячейку
Размещение нескольких элементов в одной ячейки
Практика: Создайте layout сайта
Пример преподавателя. Создаем layout
Как переименовать каждую линию в сетке grid
Как создать шаблон сетки с помощью схемы имен
Что такое явные и не явные гриды
Как выравнивать элементы внутри ячеек
Как выравнивать сетку внутри контейнера
Min-Max content
Auto-fill и Auto-fit. Размеры ячеек исходя из контента
Заключение. Grid garden
О чем этот блок
Подготовка
Создаем шаблон grid сетки ч.1
Создаем шаблон grid сетки ч.2
Как работают SVG спрайты
Доделываем вторую секцию сайта
Создаем секцию "Баннер" ч.1
Создаем секцию "Баннер" ч.2
Создаем секцию с карточками
Создаем галерею
Создаем footer
Делаем "Гамбургер"
Создаем header ч.1
Создаем header ч.2
Адаптируем сайт
До свидания!
Что вы получаете
Вы узнаете продвинутые способы верстки сайтов на языках HTML и CSS
Вы научитесь использовать CSS анимации на своих сайтах
Вы узнаете продвинутые способы адаптивного дизайна
Вы научитесь создавать "гибкие, резиновые сайты"
Вы изучите продвинутые техники работы с препроцессором SASS
Вы узнаете как использовать NPM пакеты при разработке сайта
Вы узнаете приемы которые ускорят ваш рабочий процесс в несколько раз
Вы научитесь использовать Gulp в своих проектах
Вы научитесь использовать систему контроля версий Git
Вы узнаете как размещать версии проектов на GitHub
Вы изучите систему создания сайтов на CSS GRID
Вы узнаете современные способы верстки сайтов
Этот курс сделает вас настоящим "PRO" верстальщиком веб сайтов! Освойте современные методы создания CSS анимаций, работу с GRID CSS и продвинутые методы адаптации сайтов. Бонус: работа с Git и NPM
Необходимы базовые знания по HTML и CSS. Знание FlexBox По окончании курса вы будете владеть всеми современными способами верстки и создания сайтов. Привет!
Меня зовут Дима. И я предлагаю вам окунуться в самые глубины создания и верстки веб сайтов!
Этот курс для тех кто уже знает основы, но хочет перейти от хорошего уровня создания сайтов к отличному
Курс для тех, кто владеет базой HTML и CSS но знает что внутри осталось еще множество техник, приемов разработки и технологий, которые используют настоящие pro девелоперы
Если это звучит знакомо, тогда этот курс для вас)
Вдохните жизнь в ваши сайты с помощью современной анимации через CSS
Мы начнём с того что внесём динамики в наши сайты, то есть займёмся анимацией. Изучим как на чистом CSS анимировать кнопки, тексты и заголовки, научимся создавать анимацию карточек, создадим динамичное навигационное меню и все это без единой строчки JS кода, только чистый CSS.
В этом курсе собраны лучшие практики по адаптивному дизайну
Вы научитесь новым способам и трюкам адаптивного дизайна ваших сайтов, используете новые методы определения и записи медиа запросов и научитесь адаптировать все элементы страницы, изменяя всего лишь одно CSS свойство, что бы ваш сайт, выглядел как никогда лучше на любом мобильном устройстве
Изучите все тонкости и преимущества современных пре процессоров
Вы узнаете как ускориться в создании сайтов в несколько раз, используя по полной возможности препроцессора SASS, такие как миксины, переменные и функции.
Необходимая база по использованию NPM
Так же NPM пакеты с необходимыми каждому про разработчику плагинами внутри, дадут нам возможность создавать и оптимизировать сайты как никогда быстро и качественно .
Система контроля версий Git поможет вам в вашей разработке
Дополнительно вы изучите необходимую базу по работе с системой контроля версий git, чтобы у вас всегда была возможность вернуться к нужной версии вашего сайта, независимо от того как сильно вы напортачили при последнем абдейте сайта)
Вы сверстаете 2 современных сайта для своего портфолио
Этот курс построен на практике и разбит на небольшие видео уроки, в которых мы будем шаг за шагом создавать 2 больших современных проектах, основанных на системе float - чтобы вы могли поддерживать старые проекты и конечно на системе GRID CSS, которая позволяет создавать лейауты невероятной сложности.
И конечно, эти проекты будет не стыдно показать своим потенциальным заказчикам или будущим работодателям.
Я всегда на связи!
И будьте уверены, вы не останетесь одни, ведь после каждого небольшого урока, у вас будет возможность сравнить ваш код с моим или просто задать вопрос, ответы обычно не заставляют себя долго ждать.
Гарантия возврата денег!
И если у вас все еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него если он вам не понравится в течении 30 дней.
Присоединяйтесь ко мне и вместе, мы изучим как то как создавать профессиональные, современные веб сайты.
До встречи на уроках! Это практический видео курс. Курс состоит из множества видео где вместе с преподавателем вы будет создавать несколько проектов выполняя практические задания по новому материалу
Программа курса
Привет!) Скачиваем материалы к курсу
Устанавливаем и настраиваем необходимое программное обеспечение
Новое свойство clip-path. Начинаем создавать первую секцию сайта
Если у вас не работает scout-app
Практика: Создайте свою фигуру с помощью Clip-path
Выравнивание элементов по вертикали абсолютным позиционированием
Знакомство с @KeyFrames. Создаем первую анимацию.
Backface-visibility и создание кнопок через псевдо-классы
Анимируем кнопку с помощью псевдо-элементов
Animation-fill-mode. Запуск анимации из определенной точки.
3 принципа веб разработки
Используйте REM вместо PX
О чем этот блок
Базовые команды в терминале
Как редактировать файлы через терминал
Устанавливаем систему git на наш компьютер
Как запустить гит в определенном проекте
Создаем первый коммит
Отправка проекта GitHub
Если у вас ошибка при отправке вашего проекта на GitHub
Ошибка с логином при попытке отправить проект на GitHub
Практика: создайте собственный репозиторий
Как удалить репозиторий GitHub
Как скачивать репозитории из GitHub
Эмулируем работу 2-х разработчиков на одном репозитории
Как вывести информацию о коммитах в терминал. Git log
Что такое ветки
Как создавать ветки и перемещаться по ним.
Закрываем пробел из начала мини курса с обозначениями -u и -M
Ошибка не сохраненного коммита при checkout
Как перекинуть созданные изменения на новую ветку
Как перекинуть несколько коммитов на новую ветку
Что такое состояние открепленной головы. Detached HEAD
Как восстановить конкретный файл из прошлого коммита
Продвинутый git log и git show
Как объединять ветки с помощью Git merge. Способ Fast-forward
Как удалять ветки
Как удалить файлы директории из состояния untracked
Git reset --hard. Способ жесткого отката к коммиту
Второй способ найти подвисший коммит с помощью ORIG_HEAD
Git reset --soft
Git commit --amend изменение комментария прошлого коммита
Git reset --mixed
Разница git reset и git restore
Введение в git diff. Вывод разницы нескольких коммитов в консоль
Практический пример применения git diff
Как вывести схему веток в терминал. Git log --graph
Объединяем ветки с помощью git merge. Способ "Истинное слияние"
Как откатиться назад после слияния
Как скопировать определенный коммит с помощью git cherry-pick
Слияние веток с помощью git rebase
Что лучше git rebase или git merge
Как использовать файл .gitignore
Заключительное слово
О чем этот блок
Как работают SASS переменные
Как работают миксины
Как добавлять аргументы для миксинов
Что такое шаблоны SASS
Как работают SASS функции
Организация файлов SASS большого проекта
3 способа позиционирования элементов
Как работает float
Создаем собственную систему grid
Применение градиента к тексту. Backgroud-clip
Как создавать символы с помощью HTML
Анимируем и доделываем вторую секцию
Как создавать собственные иконочные шрифты
Используем свойство perspective для отражения перспективы элемен
Как работает blending mode в CSS
Доделываем секцию с карточками
Как закруглить текст с помощью свойства shape-outside
Как работают CSS фильтры
Как добавить видео на страницу
Знакомимся с тегом form и его содержимым
Анимируем форму
Делаем собственные radio button с помощью CSS
Создаем footer сайта
Создаем навигационное меню на чистом CSS ч.-1
Настраиваем переходы скорости анимаций, с помощью cubic-bezier
Анимируем гамбургер
О чем этот блок
Как создают адаптивные сайты
Создаем миксин с медиа правилами
Адаптация проекта ч.1
Адаптация проекта ч.2
Адаптация проекта ч.3
Что такое адаптивные изображения
Как адаптировать изображения в HTML
Адаптируем HTML изображения в нашем проекте
Адаптация CSS изображений
Несколько финальных правок сайта
О чем этот блок
Что такое node.js и npm
Готовим к использованию первый npm пакет
Запускаем первый npm пакет
Используем gulp в нашем проекте
Как открыть сайт на мобильном телефоне
О чем этот блок
Подготовка
Как создать шаблон сетки. Grid template
Как работают единицы измерения fr
Как переместить элемент в другую ячейку
Размещение нескольких элементов в одной ячейки
Практика: Создайте layout сайта
Пример преподавателя. Создаем layout
Как переименовать каждую линию в сетке grid
Как создать шаблон сетки с помощью схемы имен
Что такое явные и не явные гриды
Как выравнивать элементы внутри ячеек
Как выравнивать сетку внутри контейнера
Min-Max content
Auto-fill и Auto-fit. Размеры ячеек исходя из контента
Заключение. Grid garden
О чем этот блок
Подготовка
Создаем шаблон grid сетки ч.1
Создаем шаблон grid сетки ч.2
Как работают SVG спрайты
Доделываем вторую секцию сайта
Создаем секцию "Баннер" ч.1
Создаем секцию "Баннер" ч.2
Создаем секцию с карточками
Создаем галерею
Создаем footer
Делаем "Гамбургер"
Создаем header ч.1
Создаем header ч.2
Адаптируем сайт
До свидания!
Что вы получаете
Вы узнаете продвинутые способы верстки сайтов на языках HTML и CSS
Вы научитесь использовать CSS анимации на своих сайтах
Вы узнаете продвинутые способы адаптивного дизайна
Вы научитесь создавать "гибкие, резиновые сайты"
Вы изучите продвинутые техники работы с препроцессором SASS
Вы узнаете как использовать NPM пакеты при разработке сайта
Вы узнаете приемы которые ускорят ваш рабочий процесс в несколько раз
Вы научитесь использовать Gulp в своих проектах
Вы научитесь использовать систему контроля версий Git
Вы узнаете как размещать версии проектов на GitHub
Вы изучите систему создания сайтов на CSS GRID
Вы узнаете современные способы верстки сайтов
Скрытое содержимое могут видеть только пользователи групп(ы): VIP