[Stepik] Frontend разработчик на HTML, CSS и JavaScript, 2024 (Исмаил Усеинов)

​ О курсе: Этот курс направлен на обучение созданию сайтов и программированию на языке JavaScript, весь материал подносится простым языком. Вы получите много полезных материалов и мы вместе будем применять изученное на практике создавая интересные проекты шаг за шагом. Мы с вами пройдем путь от установки своего первого редактора кода до создания сайтов. Мы будем изучать теоретическую часть и сразу же применять её на практике. Все ссылки на ресурсы, дополнительные материалы, шпаргалки и готовые фрагменты кода будут предоставлены внутри курса. На все вопросы внутри курса отвечаю лично в разделе "Комментарии" (этот раздел есть под каждым шагом). Так же есть Телеграм канал для вопросов и обсуждений не только по данному курсу. Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования. Каждый урок состоит из отдельных шагов (до 16 шагов) - это может быть, теория в виде текста, видео, тестовое задание. Почему стоит начать обучение сейчас? Создание сайтов и программирование - это очень востребованные навыки, который хорошо оплачиваются. Изучив и освоив всю данную вам информацию вы сможете создавать свои продукты и работать как на фрилансе, так и в студии, потому что в этом курсе вы заложите крепкий фундамент для дальнейшего обучения и работы. Владея этими навыками вы сможете освоить любую CMS, понять и изучить как работает backend, создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках. Данный курс содержит все уроки и задания из семи других моих курсов: Вёрстка на HTML & CSS для начинающих Супер курс по языку JavaScript Bootstrap 5 для начинающих Git и GitHub для разработчика Игра на Vue.js Планировщик задач Gulp 4 Верстаем 8 сайтов по макету из Figma в портфолио Какой курс выбрать? Вам не нужно покупать курсы из списка выше по отдельности и вы можете сэкономить приобретая данный курс. Выбирайте этот курс, если хотите получить всё и сразу. Он более перспективен, так как получает много обновлений и улучшений. Так же цена на него в будущем может быть выше, а купив его сейчас, вам не придется доплачивать даже если цена увеличится. Вы получаете пожизненный доступ к курсу и всем последующим обновлениям заплатив один раз, сейчас. Или можете приобрести отдельный курс только по интересующей вас теме. Выбирайте другие мои курсы, если хотите изучить какую-то определенную тему и при этом не тратить деньги на то, что возможно даже не будите изучать или если вы не хотите делать вклад в своё будущее, сейчас. Для кого этот курс: Для тех, кто уже делал свои первые попытки в создании сайтов, но не очень успешно или давно. Для тех, кто хочет освоить HTML, CSS, JavaScript, Bootstrap, Vue, Git, GitHub, Gulp, и начать применять эти навыки в работе. Для тех, кто мало что понял из предыдущих пунктов, но очень хочет понять, так как чувствует, что эти навыки будут полезны. Для тех, кто хочет стать крутым разработчиком, зарабатывать на этом деньги и быть востребованным на современном рынке труда. Начальные требования: Желание освоить создание сайтов и начать зарабатывать на этом Любой компьютер или ноутбук с доступом в интернет и базовые навыки работы с ним Немного целеустремленности, трудолюбия, терпения и щепотка веры в свои силы Никакой другой предварительной подготовки Чему вы научитесь: Устанавливать редактор для написания кода VS Code, настраивать его, устанавливать расширения и темы, работать с плагином Emmet, работать в терминале (командной строке) Работать с HTML и CSS - это два языка, которые необходимы для создания любого сайта Работать с системой контроля версий Git и добавлять свой код в удаленные репозитории на GitHub, делать Fork, Pull-request и слияние веток Работать с Flexbox, Grid и BEM, создавать свою адаптивную сетку на CSS и мы сверстаем много отдельных фрагментов современных сайтов Работать с Bootstrap и создавать мобильную адаптацию сайтов и приложений Создавать современные веб-сайты и правильно пользоваться документацией Работать с Photoshop и Figma в контексте верстки, извлекать картинки и текст из макетов Верстать сайты по макету из Figma и добавлять их себе в портфолио Составлять резюме, портфолио и брать свой первый заказ на фрилансе Программировать на языке JavaScript. Работать с DOM, с событиями и с современными JavaScript библиотеками для создания слайдеров, галерей, меню и других интерактивных элементов Автоматизировать процессы при помощи планировщика задач Gulp, работать с NPM и подключать плагины Node.js Работать с фреймворком Vue.js и создавать свою игру используя изученные ранее языки и технологии, загружать её в VK Получите в подарок полезный pdf документ с обзором более 40 нейросетей и ИИ, сможете научится пользоваться ими, а так же применять современные технологии в своей жизни и работе Чек-лист в формате pdf с рекомендациями на тему "Как пройти любое собеседование" и чек-лист "Эффективное обучение на примере изучения английского языка" Основы языка HTML Введение Браузер и редактор Первые HTML теги Путь к файлу Создание списка Создание таблиц Работа с текстом Создание форм Атрибуты тегов Цвет RGB и символы Тест по HTML, Часть 1 Итоги модуля Основы языка CSS CSS селекторы Работа с картинками Границы элементов Размеры элементов Шрифт текста Блочная модель Псевдоклассы и псевдоэлементы Основы CSS Flexbox Тест по CSS, Часть 1 Итоги модуля Практика по HTML и CSS Создаем меню + ДЗ Верстаем блок + ДЗ Текст и иконки + ДЗ Урок по Photoshop Верстка по макету + ДЗ Финальное задание Тест по HTML, Часть 2 Тест по CSS, Часть 2 Итоги модуля Работа с Git и GitHub Что такое Git Установка Git Регистрация на GitHub Первые команды Git Работа с Git в VS Code Удаление репозитория Клонирование Расширение Git Graph Алиасы для Git Отмена изменений Работа с ветками Слияние веток Git Синтаксис Markdown Фрагменты кода Gist Хостинг GitHub Pages Портфолио на GitHub Fork и Pull Request Файл .gitignore Итоги модуля Продвинутый HTML и CSS Редактор кода, Иконки и Emmet Основы CSS Grid Позиционирование, Размеры и Блочная модель Методология БЭМ, Как называть классы в HTML margin или padding, Что лучше использовать Выравнивание по центру и анимация Переменные root и Функция calc Тест по HTML, Часть 3 Тест по CSS, Часть 3 Итоги модуля Верстка на Bootstrap Обзор, загрузка и подключение Шапка, модальное окно, градиент, треугольник, адаптивное видео Сетка 3 на 3 и иконки Сетка 2 на 2 Аккордеон Адаптивные изображения Практика + ДЗ Форма сбора средств Создание футера Обзор документации Библиотека иконок Адаптивный сайт, Создание своей сетки Итоги модуля Верстка по макету Figma Работа с Figma и создание проекта Pixel Perfect и верстка Grid + Flexbox Верстаем несколько разделов сайта О работе верстальщика Интерактивные элементы на сайте ДЗ по верстке сайта Фриланс, первый заказ Итоги модуля Верстка в портфолио Сайт 1 - Konstruct Сайт 2 - Alivio Сайт 3 - WD Сайт 4 - Britlex Сайт 5 - Archi Web Сайт 6 - Cloud Budget Сайт 7 - Dae Итоги модуля Основы JavaScript Работа с JavaScript Строки и логика Шаблонные строки, Случайные числа, Округление чисел Массивы Объекты Диалоговые окна, Тернарный оператор, Переключатель Switch Циклы + практика Функции + практика Дата и время JSDoc и Исключения ООП ECMAScript 2015 (ES6) Задачи на JS, Часть 1 Задачи на JS, Часть 2 Итоги модуля DOM на JavaScript Работа с DOM Атрибуты, Элементы Генерация списков Календарь + ДЗ Сортировка таблицы Часы Классы и метрики Таблица из массива Таблица из объекта Таблица из данных Карточки часть 1 Карточки часть 2 Прогресс-бар Генератор имен Работа с localStorage Тест по JS, Часть 1 Итоги модуля События на JavaScript Обработчики событий Скрыть / Показать Простой слайдер Тёмная тема ООП на практике Делегирование и Фазы события Счётчик Переключатель Удаление карточек Разворачиваемые подменю Сортировка таблицы Всплывающая подсказка Отмена стандартного поведения Сочетание клавиш Выделение через CTRL Range-Слайдер События клавиатуры Работа с формами Фокус и потеря фокуса Перемещение по стрелкам События форм и буфера обмена События страницы, async и defer Диапазон и Выделение Проект №1 Проект №2 Проект №3 Тест по JS, Часть 2 Итоги модуля Библиотеки JavaScript Работа с файлами Анимация на JS и CSS Регулярные выражения list.js: Поиск и сортировка sweetalert2.js: Модальные окна popper.js: Всплывающие подсказки baguetteBox.js: Галерея изображений lightgallery.js: Галерея изображений flatpickr.js: Календарь cleave.js: Формы mixItUp3.js: Фильтрация элементов swiper.js: Слайдер Итоги модуля Планировщик Gulp Что такое Gulp Установка Node.js Инициализация NPM Пакеты Константа с путями Обработка стилей Отслеживание Обработка скриптов Готовая сборка Autoprefixer, Sourcemaps, Babel Сжатие изображений Минификация HTML Размеры файлов Отслеживание только новых файлов Синхронизация кода с браузером Работа с Pug Работа с Stylus Работа с SASS и SCSS Работа с TypeScript Работа с CoffeeScript Скачать сборку Gulp Итоги модуля Фреймворк Vue.js Что такое Vue Структура проекта Интерфейс игры Достижения в игре Экран с вопросами Экран с результатами Начало работы с Vue Обработка событий Циклы и методы Конец игры на Vue Вычисляемые свойства Звук на JavaScript Работа с Git и GitHub Приложение в VK Идеи для практики Изучаем Vue 3 Условия и циклы Интерполяция Стили и классы События и формы Финальный проект Чат-бот + ДЗ Итоги модуля Итоги курса