Frontend разработчик на HTML, CSS и JavaScript

В этом уроке мы выучим основные CSS Селекторы

В этом видео уроке мы научимся работать с изображениями

Рассмотрим как создавать границы для любого элемента с помощью CSS

В этом уроке мы научимся изменять размеры элементов на странице

В этом уроке мы рассмотри как работать со шрифтом.

В этом уроке я расскажу вам что такое блочная модель CSS и для чего она нужна

Мы изучим псведоклассы и псевдоэлементы которые будут необходимы на начальном этапе для любого веб разработчика

В этом видео мы познакомимся с современной технологией CSS Flexbox и научимя пользоваться некоторыми её возможностями

В этом уроке мы будем учиться создавать адаптивную сетку на CSS. Так же научимся работать с переменными и функцией calc. Узнаем как создавать медиа запросы чтобы сделать адаптивную версию своего сайта для мобильных устройств. Научимся создавать макет с 12-колончатой сеткой в Photoshop, сравним нашу сетку с сеткой Bootstrap 5, а так же научимся её подключать и узнаем как проверять свой сайт на эмуляторе мобильных устроств прямо с браузера на ПК.

Задание для практики по теме "создание адаптивной сетки на CSS".

Практическое занятие  №1

Практическое задание №1

Практическое занятие №2

Практическое задание №2

Практическое занятие №3

Практическое задание №3

Урок по программе Adobe Photoshop, в котором мы научимся основам для веб-разработчиков.

Практическое занятие №4

Практическое задание №4

Заключительное видео в этой главе

Тут вы сможете найти полезные ссылки и файлы которые вам помогу в разработке сайтов.

В этом уроке мы создадим свой первый скрипт на языке JavaScript и научимся пользоваться консолью разработчика в браузере.

Вы узнаете про строковый и логический тип данных и научимся записывать разные значения в переменные.

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

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

Узнаете что такое объекты на JavaScript. Мы рассмотрим их сходства и отличия с массивами и научимся работать с объектами.

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

Я расскажу вам про 5 видов циклов на языке JavaScript и покажу на примерах для чего они нужны и как их создавать.

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

Я расскажу как работать с датой и временем на языке JavaScript, а так же вы получите шпаргалку по работе с объектом Date, разработанную мной.

В этом уроке я расскажу как правильно документировать свой код с помощью JSDoc, а так же мы рассмотрим обработку исключений.

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

В дополнение к основам JavaScript я расскажу вам про некоторые отличные возможности стандарта ES6 который уже отлично поддерживается почти всеми браузерами. В этом уроке мы рассмотрим такие темы как: Babel, Константы, Оператор расширения, Деструктивное присваивание, Стрелочные функции, Сохранение контекста, Двоичные числа, Восьмеричные числа, Проверка на целое число, Проверка на число и значение NaN, Тригонометрические и Алгебраические методы, Определение знака числа, Повторение строки, Поиск в строке, Заполнение массива, Ключи и значения массива, Множества, Удаление дубликатов в массиве.

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

В этом уроке мы начнем знакомство с DOM деревом, и узнаем как можно найти HTML элементы на языке JavaScript для дальнейшей работы с этим элементом.

Я расскажу вам как работать с HTML атрибутами на языке JavaScript. Мы научимся добавлять, удалять, заменять атрибуты и их значения. А так же мы научимся создавать свои новые элементы.

В этом уроке мы научимся генерировать вложенный список UL из обычного JavaScript объекта.

Создадим функцию, которая будет генерировать календарь на любой месяц любого года. Эту функцию можно использовать повторно любое количество раз и она будет отрисовывать календарь каждый раз для того месяца который вы передадите в параметрах функции.

Задание к предыдущему уроку

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

Напишем скрипт который будет генерировать время на странице.

В этом уроке я расскажу вам, как работать с CSS классами из JavaScript. Мы научимся удалять, добавлять и проверять наличие класса у элемента. Так же поговорим про метрики и рассмотрим для чего они нужны.

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

Решим похожую задачу но будем создавать таблицу не из массива, а из объекта. Рассмотрим как можно объединять ячейки таблицы из кода и закрепим ранее полученные знания в Главе 1.

В этом уроке мы поработаем с многомерными структурами данных на JavaScript и сгенерируем таблицу с отсортированными данными.

Создадим универсальную функцию, которая будет генерировать карточки с информацией о пользователях.

Научимся выводить карточки с днями рождения пользователей и добавлять в каждый месяц соответствующие данные о пользователе. Так же мы предусмотрим разные ситуации и обработаем их на JavaScript, чтобы избежать возникновения ошибок.

Создадим функцию, которая будет генерировать прогресс бар для указанного нами времени обратного отсчета.

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

В этом уроке я научу вас работать с localStorage на языке JavaScript. Локальное хранилище позволит нам записывать различные данные и не терять их даже после перезагрузки браузера или компьютера.

В этом уроке мы начнем знакомство с обработчиками событий на языке JavaScript.

Рассмотрим как можно скрыть и показать любой элемент на сайте с помощью JavaScript.

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

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

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

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

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

Рассмотрим еще один часто используемый тип поведения и реализуем функционал переключателя.

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

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

Улучшим код из главы 2, где мы реализовали сортировку таблицы по фиксированному столбцу. Но в этом уроке мы сделаем возможность сортировки таблицы при нажатии на заголовок любого столбца таблицы.

В этом уроке мы научимся работать с событиями мыши, которые срабатывают при наведении на элемент и сделаем всплывающую подсказку при наведении на элемент.

Я расскажу как отменить стандартное поведение различных элементов DOM, мы рассмотрим для чего это нужно и как можно использовать на JavaScript.

В этом уроке я расскажу вам про то как отслеживать нажатые клавиши CTRL, SHIFT, ALT, CMD при разных событиях. Это поможет нам выполнять обработку событий только если произошло нажатие нескольких клавиш.

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

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

В этом уроке рассмотрим основные события клавиатуры и научимся с ними работать.

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

Познакомимся с событиями фокуса и потери фокуса у элементов форм и научимся их обрабатывать.

Реализуем возможность HTML элемента быть под фокусом даже если это не элемент формы и сделаем возможность перемещения элемента на странице по клавишам-стрелкам.

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

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

Мы научимся работать с диапазонами Range и выделением Selection на языке JavaScript.

Напишем свой собственный простой депозитный калькулятор и реализуем работу с формами для ввода пользовательских данных и отображение результата в виде столбчатых гистограмм.

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

Задание к предыдущему уроку

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

В этом уроке мы будем работать с текстовыми файлами и научимся считывать данные из файла на языке JavaScript.

Рассмотрим как создается анимация на языке JavaScript с помощью каскадных таблиц стилей CSS.

Самый длинный урок в этом курсе посвящен регулярным выражениям. Регулярные выражения это мощный инструмент для поиска и замены текста в строках.

В этом уроке мы научимся работать с библиотекой List.js. Эта библиотека позволяет создавать из обычных HTML списков, структуры с возможностью поиска и сортировки.

Библиотека sweetalert2.js позволяет очень просто создавать различные модальные всплывающие окна. Я покажу как подключить эту библиотеку и настроить у себя всплывающее окно.

Чтобы создать всплывающую подсказку возле любого HTML блока мы воспользуемся библиотекой popper.js

Для создания галереи изображений существует простая библиотека baguetteBox.js, с помощью которой можно очень быстро и просто создать галерею у себя на сайте.

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

С помощью библиотеки flatpickr.js можно очень быстро и просто создать календарь у себя на сайте и настроить для него различные фильтры и ограничения.

Библиотека Cleave.js позволяет очень просто настроить валидацию формы для таких типов данных как дата, номер телефона, номер банковской карты и время.

С помощью библиотеки mixItUp3.js можно настроить сортировку и фильтрацию любых элементов у себя на сайте, это может быть каталог товаров или список фильмов все зависит только от ваших задач.

Чтобы создать слайдер любой сложности можно воспользоваться библиотекой Swiper.js, которая написана без каких либо зависимостей от других скриптов и позволяет делать слайдеры любой сложности.

В данном уроке я покажу вам как скачать Bootstrap 5 и подключить его в свой проект через CDN и локально. Мы начнем работу с Bootstrap 5. Это краткий обзор Bootstrap 5, а также руководство по загрузке и подключению Bootstrap 5. Я расскажу про отличия от Bootstrap 4, а если вы впервые знакомитесь с Bootstrap то вы узнаете для чего нужен этот CSS фреймворк.

В этом видео уроке мы создадим шапку сайта на Bootstrap 5. Мы сделаем градиентный фон с помощью генератора градиента, добавим ссылку на footer с плавной прокруткой, создадим кнопку play на чистом css с помощью генератора треугольников, а так же я покажу как сделать модальное окно на Bootstrap 5 и сделать любое видео адаптивным. Мы сразу все проверим на мобильных устройствах и убедимся, что адаптивная версия выполнена корректно.

В этом уроке я расскажу вам как работать с сеткой Bootstrap 5, как устроена сетка Bootstrap 5 и как делать адаптивные элементы с помощью сетки Bootstrap 5 легко и быстро. Мы создадим раздел с информацией о курсе, где будут использоваться иконки и сетка Bootstrap 5 размером 3 на 3.

В этом уроке я расскажу вам как работать с сеткой Bootstrap 5, как устроена сетка Bootstrap 5 и как делать адаптивные элементы с помощью сетки Bootstrap 5 легко и быстро. Мы создадим раздел с информацией о курсе, где будут использоваться иконки и сетка Bootstrap 5 размером 2 на 2.

В этом уроке я расскажу Как сделать Аккордеон на Bootstrap 5 любой сложности. Аккордеон позволяет нам скрывать и показывать различные элементы на сайте. Особенность Аккордеона в том, что одновременно может быть открыт только один элемент, а все остальные скрываются. Сделать Аккордеон на Bootstrap 5 очень просто, посмотрите полностью этот видео урок и вы узнаете как сделать аккордеон на Bootstrap 5, как настроить и стилизовать аккордеон и добавить новые элементы в аккордеон на Bootstrap 5.

В этом уроке я покажу как на Bootstrap 5 добавить адаптивное изображение. Адаптивное изображение на Bootstrap 5 создается очень просто, необходимо использовать специальный класс на любом изображении и оно становится адаптивным.

В этом видео мы создадим очередной раздел нашего сайта на Bootstrap 5. Так же в конце урока вы получите простое задание, которое сможете с легкостью выполнить самостоятельно и закрепить полученные ранее знания по работе с сеткой Bootstrap 5 и другими элементами фреймворка Bootstrap 5.

В этом уроке я покажу как сделать форму для сбора средств Yoomoney. Форма сбора средств Yoomoney создается очень просто. Необходимо создать аккаунт Yoomoney и с помощью специального конструктора создать форму для сбора средства на свой сайт.

В этом уроке мы сделаем футера и завершим создание сайта.

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

В этом видео уроке я расскажу вам, что такое система управления версиями и мы начнем пользоваться системой Git. И в следующих уроках изучи GitHub, будем работать с Git в командной строке и в терминале редактора Visual Studio Code.

В этом видео уроке мы установим Git с официального сайта.

В этом видео уроке я покажу вам как зарегистрировать аккаунт на сайте GitHub и мы создадим наш первый онлайн репозиторий. После этого мы загрузим наш проект на этот онлайн репозиторий и будем в дальнейшем с ним работать через командную строку Windows и терминал в редакторе VS Code. Я покажу как создать репозиторий на github и как залить файлы на онлайн репозиторий github.

В этом уроке я расскажу вам как использовать команды git такие как: git clone, git add, git commit, git push, git status и некоторые другие команды для работы с git. Для работы с git предусмотрено много специальных команд, я покажу как работают некоторые из них на реальных примерах.

В этом уроке я расскажу вам как использовать команды git в редакторе Visual Studio Code с помощью удобного интерфейса, все команды такие как: git add, git commit, git push, git status и некоторые другие команды для работы с git мы рассмотрели в командной строке, а теперь научимся делать то же самое но используя специальное меню в редакторе Visual Studio Code для работы с системой управления версиями.

В этом видео уроке по системе Git я расскажу что такое алиасы, зачем нужны алиасы в Git и как создавать свои собственные команды или Алиасы для работы с git. Алиасы в git это пользовательские сокращенные команды, которые позволяют выполнять стандартные команды git, но использовать при это выбранные нами сокращения.

В этом видео уроке я расскажу вам про то, как отменить все изменения, которые вы внесли в ваш проект Git и вернуться к его первоначальному состоянию. Есть три вида изменения которые вы можете сделать: Сделать изменения и сохранить файл, сохранить файл и применить команду git add и добавить все файлы в stage area и самый сложный случай когда вы сделали git commit. Я покажу вам как отменить любое из этих действий и восстановить прежнюю версию вашего проекта.

В этом видео уроке я расскажу вам что такое ветки и на примере покажу, как создавать ветки (branch) в git, как перемещаться между ветками git, как переименовать ветку в git, как удалить ветку в git, как залить любую ветку на github и многие другие операции по работе с ветками в git. Рассмотрим команды git branch и git checkout.

В этом уроке я расскажу вам про аналогичный способ выполнять команды git используя при этом графический интерфейс редактора VS Code и специальную панель для работы с системой управления версиями. Панель система управления версиями в VS Code является стандартным инструментом редактора и с помощью этой панели можно быстро и удобно применять все те команды которые мы изучали не набирая их при этом в терминале или командной строке.

В этом уроке я покажу как откатиться к любому коммиту. Мы будем использовать расширение Git Graph для редактора кода VS Code.

Я покажу как удалить репозиторий на GitHub. После удаления репозитория восстановить его уже будет невозможно так что будьте внимательны.

В этом уроке мы рассмотрим создание файла README.md для своего репозитория на GitHub с помощью специального синтаксиса Markdown. Синтаксис markdown позволяет создавать ссылки, изображения, списки, цитаты и многое другое для описания своего репозитория и создания наглядной инструкции по вашему коду.

В этом видео уроке я расскажу вам что такое github Gist и как работать с Gist. Gist позволяет нам сохранять любые фрагменты кода и использовать их повторно в своей работе. Вам больше не нужно хранить все наработки, фрагменты кода и скрипты у себя на диске в текстовых документах. Вы можете просто создать новый Gist и в дальнейшем очень быстро и удобно подгрузить Gist с github в своем редакторе и использовать этот код.

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

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

В этом видео уроке мы поговорим про базовую структуру файлов нашего проекта. Скачайте архив, откройте его в редакторе кода и мы приступим к работе над игрой.

В этом уроке мы создадим наш самый главный экран в игре. Главный экран позволит нам начать игру, перейти к достижениям, на страницу с информацией об авторе, а так же тут можно будет включить/отключить звук в игре.

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

В этом уроке мы сделаем два экрана. Первый - это экран с вопросами. На данном экране будет номер вопроса, текст вопроса и возможные варианты ответа. А второй экран - это экран с информацией об авторе.

В этом уроке мы создадим экран с результатами для возможным 7 исходов игры. Для каждого результата мы настроим свой фон и стиль для кнопки "Назад" в зависимости от специального data атрибута.

В этом уроке мы начнем работать с фреймворком Vue.js. Создадим наш главный компонент, свяжем его с HTML кодом и создадим переменные для дальнейшей работы.

В этом уроке мы рассмотрим работу с методами на Vue и научимся назначать методы в качестве обработчиков событий.

В этом уроке мы научимся создавать циклы на Vue.js для динамической отрисовке большого количества однотипных элементов.

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

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

В этом уроке мы настроим звук в нашей игре. Сделаем возможность включать и выключать звук в игре при нажатии на кнопку звука на главном экране.

В этом видео уроке я расскажу как создать репозиторий из нашего кода. После этого мы зальем наш код на GitHub и сделаем приложение работающим онлайн с помощью GitHub Pages.

В этом уроке я покажу как быстро превратить свое приложение в приложение для VK.

В этом видео я расскажу куда двигаться дальше и как закрепить изученный в этом курсе материал.