Frontend разработчик на HTML, CSS и JavaScript [Stepik] [Исмаил Усеинов]
Чему вы научитесь
Этот курс направлен на обучение созданию сайтов и программированию на языке JavaScript, весь материал подносится простым языком. Вы получите много полезных материалов и мы вместе будем применять изученное на практике создавая интересные проекты шаг за шагом.
Что в этом курсе?
Мы с вами пройдем путь от установки своего первого редактора кода до создания сайтов. Мы будем изучать теоретическую часть и сразу же применять её на практике. Все ссылки на ресурсы, дополнительные материалы, шпаргалки и готовые фрагменты кода будут предоставлены внутри курса.
На все вопросы внутри курса отвечаю лично в разделе "Комментарии" (этот раздел есть под каждым шагом). Так же есть Телеграм канал для вопросов и обсуждений не только по данному курсу. Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования.
Каждый урок состоит из отдельных шагов (до 16 шагов) - это может быть, теория в виде текста, видео, тестовое задание.
Почему стоит начать обучение сейчас? Создание сайтов и программирование - это очень востребованные навыки, который хорошо оплачиваются. Изучив и освоив всю данную вам информацию вы сможете создавать свои продукты и работать как на фрилансе, так и в студии, потому что в этом курсе вы заложите крепкий фундамент для дальнейшего обучения и работы. Владея этими навыками вы сможете освоить любую CMS, понять и изучить как работает backend, создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках.
Данный курс содержит все уроки и задания из семи других моих курсов:
Для кого этот курс
Исмаил Усеинов. Автор канала ITDoctor. Занимаюсь веб-разработкой с 2013 года.
Как проходит обучение
Обучение построено на видео уроках. Для лучшего усвоения материала рекомендуется смотреть урок и пробовать повторить все самостоятельно. Почти в каждом уроке доступно одно или более заданий в виде теста, задачи на сопоставление, заполнение пропусков, сортировки и другие. В некоторых уроках есть шаги с заданием в видео формате, где подробно изложены условия и цель задачи. Обязательно читайте всю текстовую информацию к уроку там могут быть полезные ссылки на сторонние ресурсы или на материалы, которые нужны для урока. По желанию можете конспектировать изучаемый материал в любом удобном для вас формате (бумага, цифра). Задействовав дополнительный вид памяти вы улучшите усвоение материала.
Если после изучения всей информации на этой странице у вас ещё остались вопросы, то вы можете задать их.
Что вы получаете
Чему вы научитесь
- Устанавливать редактор для написания кода 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 с рекомендациями на тему "Как пройти любое собеседование" и чек-лист "Эффективное обучение на примере изучения английского языка"
Этот курс направлен на обучение созданию сайтов и программированию на языке JavaScript, весь материал подносится простым языком. Вы получите много полезных материалов и мы вместе будем применять изученное на практике создавая интересные проекты шаг за шагом.
Что в этом курсе?
Мы с вами пройдем путь от установки своего первого редактора кода до создания сайтов. Мы будем изучать теоретическую часть и сразу же применять её на практике. Все ссылки на ресурсы, дополнительные материалы, шпаргалки и готовые фрагменты кода будут предоставлены внутри курса.
На все вопросы внутри курса отвечаю лично в разделе "Комментарии" (этот раздел есть под каждым шагом). Так же есть Телеграм канал для вопросов и обсуждений не только по данному курсу. Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования.
Каждый урок состоит из отдельных шагов (до 16 шагов) - это может быть, теория в виде текста, видео, тестовое задание.
Почему стоит начать обучение сейчас? Создание сайтов и программирование - это очень востребованные навыки, который хорошо оплачиваются. Изучив и освоив всю данную вам информацию вы сможете создавать свои продукты и работать как на фрилансе, так и в студии, потому что в этом курсе вы заложите крепкий фундамент для дальнейшего обучения и работы. Владея этими навыками вы сможете освоить любую CMS, понять и изучить как работает backend, создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках.
Данный курс содержит все уроки и задания из семи других моих курсов:
- Вёрстка на HTML & CSS для начинающих
- Супер курс по языку JavaScript
- Bootstrap 5 для начинающих
- Git и GitHub для разработчика
- Игра на Vue.js
- Планировщик задач Gulp 4
- Верстаем 10 сайтов по макету из Figma в портфолио
Для кого этот курс
- Для тех, кто уже делал свои первые попытки в создании сайтов, но не очень успешно или давно.
- Для тех, кто хочет освоить HTML, CSS, JavaScript, Bootstrap, Vue, Git, GitHub, Gulp, и начать применять эти навыки в работе.
- Для тех, кто мало что понял из предыдущих пунктов, но очень хочет понять, так как чувствует, что эти навыки будут полезны.
- Для тех, кто хочет стать крутым разработчиком, зарабатывать на этом деньги и быть востребованным на современном рынке труда.
- Желание освоить создание сайтов и начать зарабатывать на этом
- Любой компьютер или ноутбук с доступом в интернет и базовые навыки работы с ним
- Немного целеустремленности, трудолюбия, терпения и щепотка веры в свои силы
- Никакой другой предварительной подготовки
Исмаил Усеинов. Автор канала ITDoctor. Занимаюсь веб-разработкой с 2013 года.
Как проходит обучение
Обучение построено на видео уроках. Для лучшего усвоения материала рекомендуется смотреть урок и пробовать повторить все самостоятельно. Почти в каждом уроке доступно одно или более заданий в виде теста, задачи на сопоставление, заполнение пропусков, сортировки и другие. В некоторых уроках есть шаги с заданием в видео формате, где подробно изложены условия и цель задачи. Обязательно читайте всю текстовую информацию к уроку там могут быть полезные ссылки на сторонние ресурсы или на материалы, которые нужны для урока. По желанию можете конспектировать изучаемый материал в любом удобном для вас формате (бумага, цифра). Задействовав дополнительный вид памяти вы улучшите усвоение материала.
Если после изучения всей информации на этой странице у вас ещё остались вопросы, то вы можете задать их.
Основы языка HTML
1 Введение
2 Браузер и редактор
3 Первые HTML теги
4 Путь к файлу
5 Создание списка
6 Создание таблиц
7 Работа с текстом
8 Создание форм
9 Атрибуты тегов
10 Цвет RGB и символы
11 Тест по HTML, Часть 1
12 Итоги модуля
Основы языка CSS
1 CSS селекторы
2 Работа с картинками
3 Границы элементов
4 Размеры элементов
5 Шрифт текста
6 Блочная модель
7 Псевдоклассы и псевдоэлементы
8 Основы CSS Flexbox
9 Тест по CSS, Часть 1
10 Итоги модуля
Практика по HTML и CSS
1 Создаем меню + ДЗ
2 Верстаем блок + ДЗ
3 Текст и иконки + ДЗ
4 Урок по Photoshop
5 Верстка по макету + ДЗ
6 Финальное задание
7 Тест по HTML, Часть 2
8 Тест по CSS, Часть 2
9 Итоги модуля
Работа с Git и GitHub
1 Что такое Git
2 Установка Git
3 Регистрация на GitHub
4 Первые команды Git
5 Работа с Git в VS Code
6 Удаление репозитория
7 Клонирование
8 Расширение Git Graph
9 Алиасы для Git
10 Отмена изменений
11 Работа с ветками
12 Слияние веток Git
13 Синтаксис Markdown
14 Фрагменты кода Gist
15 Хостинг GitHub Pages
16 Портфолио на GitHub
17 Fork и Pull Request
18 Файл .gitignore
19 Итоги модуля
Продвинутый HTML и CSS
Редактор кода, Иконки и Emmet
1 Основы CSS Grid
2 Позиционирование, Размеры и Блочная модель
3 Методология БЭМ, Как называть классы в HTML
4 margin или padding, Что лучше использовать
5 Выравнивание по центру и анимация
6 Переменные root и Функция calc
7 Тест по HTML, Часть 3
8 Тест по CSS, Часть 3
9 Итоги модуля
Верстка на Bootstrap
1 Обзор, загрузка и подключение
2 Шапка, модальное окно, градиент, треугольник, адаптивное видео
3 Сетка 3 на 3 и иконки
4 Сетка 2 на 2
5 Аккордеон
6 Адаптивные изображения
7 Практика + ДЗ
8 Форма сбора средств
9 Создание футера
10 Обзор документации
11 Библиотека иконок
12 Адаптивный сайт, Создание своей сетки
13 Тест по CSS, Часть 4
14 Тест по CSS, Часть 5
15 Итоги модуля
Верстка по макету Figma
1 Работа с Figma и создание проекта
2 Pixel Perfect и верстка Grid + Flexbox
3 Верстаем несколько разделов сайта
4 О работе верстальщика
5 Интерактивные элементы на сайте
6 ДЗ по верстке сайта
7 Фриланс, первый заказ
8 Тест по CSS, Часть 6
9 Тест по CSS, Часть 7
10 Структура проекта
11 Обзор макета
12 Работа с Perfect Pixel
13 Адаптивная версия
14 Экспорт SVG
15 Верстаем раздел
16 Тень блока вручную
17 Публикуем код
18 Плагин Inspect Styles
19 Итоги модуля
Верстка в портфолио
1 Сайт 1 - Konstruct
2 Сайт 2 - Alivio
3 Сайт 3 - WD
4 Сайт 4 - Britlex
5 Сайт 5 - Archi Web
6 Сайт 6 - Cloud Budget
7 Сайт 7 - Dae
8 Знакомство с Pixso
9 Работа с SVG
10 Шрифты Google Fonts
11 Perfect Pixel в браузере
12 Раздел сайта Features
13 Раздел сайта Stats
14 Раздел сайта Blog
15 Домашнее задание
16 Макеты для верстки
17 Итоги модуля
Основы JavaScript
1 Работа с JavaScript
2 Строки и логика
3 Шаблонные строки, Случайные числа, Округление чисел
4 Массивы
5 Объекты
6 Диалоговые окна, Тернарный оператор, Переключатель Switch
7 Циклы + практика
8 Функции + практика
9 Дата и время
10 JSDoc и Исключения
11 ООП
12 ECMAScript 2015 (ES6)
13 Задачи на JS, Часть 1
14 Задачи на JS, Часть 2
15 Задачи на JS, Часть 3
16 Задачи на JS, Часть 4
17 Итоги модуля
DOM на JavaScript
1 Работа с DOM
2 Атрибуты, Элементы
3 Генерация списков
4 Календарь + ДЗ
5 Сортировка таблицы
6 Часы
7 Классы и метрики
8 Таблица из массива
9 Таблица из объекта
10 Таблица из данных
11 Карточки часть 1
12 Карточки часть 2
13 Прогресс-бар
14 Генератор имен
15 Работа с localStorage
16 Тест по JS, Часть 1
17 Итоги модуля
События на JavaScript
1 Обработчики событий
2 Скрыть / Показать
3 Простой слайдер
4 Тёмная тема
5 ООП на практике
6 Делегирование и Фазы события
7 Счётчик
8 Переключатель
9 Удаление карточек
10 Разворачиваемые подменю
11 Сортировка таблицы
12 Всплывающая подсказка
13 Отмена стандартного поведения
14 Сочетание клавиш
15 Выделение через CTRL
16 Range-Слайдер
17 События клавиатуры
18 Работа с формами
19 Фокус и потеря фокуса
20 Перемещение по стрелкам
21 События форм и буфера обмена
22 События страницы, async и defer
23 Диапазон и Выделение
24 Проект №1
25 Проект №2
26 Проект №3
27 Тест по JS, Часть 2
28 Тест по JS, Часть 3
29 Итоги модуля
Библиотеки JavaScript
1 Работа с файлами
2 Анимация на JS и CSS
3 Регулярные выражения
4 list.js: Поиск и сортировка
5 sweetalert2.js: Модальные окна
6 popper.js: Всплывающие подсказки
7 baguetteBox.js: Галерея изображений
8 lightgallery.js: Галерея изображений
9 flatpickr.js: Календарь
10 cleave.js: Формы
11 mixItUp3.js: Фильтрация элементов
12 swiper.js: Слайдер
13 Тест по JS, Часть 4
14 Тест по JS, Часть 5
15 Итоги модуля
Планировщик Gulp
1 Что такое Gulp
2 Установка Node.js
3 Инициализация
4 NPM Пакеты
5 Константа с путями
6 Обработка стилей
7 Отслеживание
8 Обработка скриптов
9 Готовая сборка
10 Autoprefixer, Sourcemaps, Babel
11 Сжатие изображений
12 Минификация HTML
13 Размеры файлов
14 Отслеживание только новых файлов
15 Синхронизация кода с браузером
16 Работа с Pug
17 Работа с Stylus
18 Работа с SASS и SCSS
19 Работа с TypeScript
20 Работа с CoffeeScript
21 Скачать сборку Gulp
22 Итоги модуля
Фреймворк Vue.js
1 Что такое Vue
2 Структура проекта
3 Интерфейс игры
4 Достижения в игре
5 Экран с вопросами
6 Экран с результатами
7 Начало работы с Vue
8 Обработка событий
9 Циклы и методы
10 Конец игры на Vue
11 Вычисляемые свойства
12 Звук на JavaScript
13 Работа с Git и GitHub
14 Приложение в VK
15 Идеи для практики
16 Изучаем Vue 3
17 Условия и циклы
18 Интерполяция
19 Стили и классы
20 События и формы
21 Финальный проект
22 Чат-бот + ДЗ
23 Итоги модуля
24 Итоги курса
1 Введение
2 Браузер и редактор
3 Первые HTML теги
4 Путь к файлу
5 Создание списка
6 Создание таблиц
7 Работа с текстом
8 Создание форм
9 Атрибуты тегов
10 Цвет RGB и символы
11 Тест по HTML, Часть 1
12 Итоги модуля
Основы языка CSS
1 CSS селекторы
2 Работа с картинками
3 Границы элементов
4 Размеры элементов
5 Шрифт текста
6 Блочная модель
7 Псевдоклассы и псевдоэлементы
8 Основы CSS Flexbox
9 Тест по CSS, Часть 1
10 Итоги модуля
Практика по HTML и CSS
1 Создаем меню + ДЗ
2 Верстаем блок + ДЗ
3 Текст и иконки + ДЗ
4 Урок по Photoshop
5 Верстка по макету + ДЗ
6 Финальное задание
7 Тест по HTML, Часть 2
8 Тест по CSS, Часть 2
9 Итоги модуля
Работа с Git и GitHub
1 Что такое Git
2 Установка Git
3 Регистрация на GitHub
4 Первые команды Git
5 Работа с Git в VS Code
6 Удаление репозитория
7 Клонирование
8 Расширение Git Graph
9 Алиасы для Git
10 Отмена изменений
11 Работа с ветками
12 Слияние веток Git
13 Синтаксис Markdown
14 Фрагменты кода Gist
15 Хостинг GitHub Pages
16 Портфолио на GitHub
17 Fork и Pull Request
18 Файл .gitignore
19 Итоги модуля
Продвинутый HTML и CSS
Редактор кода, Иконки и Emmet
1 Основы CSS Grid
2 Позиционирование, Размеры и Блочная модель
3 Методология БЭМ, Как называть классы в HTML
4 margin или padding, Что лучше использовать
5 Выравнивание по центру и анимация
6 Переменные root и Функция calc
7 Тест по HTML, Часть 3
8 Тест по CSS, Часть 3
9 Итоги модуля
Верстка на Bootstrap
1 Обзор, загрузка и подключение
2 Шапка, модальное окно, градиент, треугольник, адаптивное видео
3 Сетка 3 на 3 и иконки
4 Сетка 2 на 2
5 Аккордеон
6 Адаптивные изображения
7 Практика + ДЗ
8 Форма сбора средств
9 Создание футера
10 Обзор документации
11 Библиотека иконок
12 Адаптивный сайт, Создание своей сетки
13 Тест по CSS, Часть 4
14 Тест по CSS, Часть 5
15 Итоги модуля
Верстка по макету Figma
1 Работа с Figma и создание проекта
2 Pixel Perfect и верстка Grid + Flexbox
3 Верстаем несколько разделов сайта
4 О работе верстальщика
5 Интерактивные элементы на сайте
6 ДЗ по верстке сайта
7 Фриланс, первый заказ
8 Тест по CSS, Часть 6
9 Тест по CSS, Часть 7
10 Структура проекта
11 Обзор макета
12 Работа с Perfect Pixel
13 Адаптивная версия
14 Экспорт SVG
15 Верстаем раздел
16 Тень блока вручную
17 Публикуем код
18 Плагин Inspect Styles
19 Итоги модуля
Верстка в портфолио
1 Сайт 1 - Konstruct
2 Сайт 2 - Alivio
3 Сайт 3 - WD
4 Сайт 4 - Britlex
5 Сайт 5 - Archi Web
6 Сайт 6 - Cloud Budget
7 Сайт 7 - Dae
8 Знакомство с Pixso
9 Работа с SVG
10 Шрифты Google Fonts
11 Perfect Pixel в браузере
12 Раздел сайта Features
13 Раздел сайта Stats
14 Раздел сайта Blog
15 Домашнее задание
16 Макеты для верстки
17 Итоги модуля
Основы JavaScript
1 Работа с JavaScript
2 Строки и логика
3 Шаблонные строки, Случайные числа, Округление чисел
4 Массивы
5 Объекты
6 Диалоговые окна, Тернарный оператор, Переключатель Switch
7 Циклы + практика
8 Функции + практика
9 Дата и время
10 JSDoc и Исключения
11 ООП
12 ECMAScript 2015 (ES6)
13 Задачи на JS, Часть 1
14 Задачи на JS, Часть 2
15 Задачи на JS, Часть 3
16 Задачи на JS, Часть 4
17 Итоги модуля
DOM на JavaScript
1 Работа с DOM
2 Атрибуты, Элементы
3 Генерация списков
4 Календарь + ДЗ
5 Сортировка таблицы
6 Часы
7 Классы и метрики
8 Таблица из массива
9 Таблица из объекта
10 Таблица из данных
11 Карточки часть 1
12 Карточки часть 2
13 Прогресс-бар
14 Генератор имен
15 Работа с localStorage
16 Тест по JS, Часть 1
17 Итоги модуля
События на JavaScript
1 Обработчики событий
2 Скрыть / Показать
3 Простой слайдер
4 Тёмная тема
5 ООП на практике
6 Делегирование и Фазы события
7 Счётчик
8 Переключатель
9 Удаление карточек
10 Разворачиваемые подменю
11 Сортировка таблицы
12 Всплывающая подсказка
13 Отмена стандартного поведения
14 Сочетание клавиш
15 Выделение через CTRL
16 Range-Слайдер
17 События клавиатуры
18 Работа с формами
19 Фокус и потеря фокуса
20 Перемещение по стрелкам
21 События форм и буфера обмена
22 События страницы, async и defer
23 Диапазон и Выделение
24 Проект №1
25 Проект №2
26 Проект №3
27 Тест по JS, Часть 2
28 Тест по JS, Часть 3
29 Итоги модуля
Библиотеки JavaScript
1 Работа с файлами
2 Анимация на JS и CSS
3 Регулярные выражения
4 list.js: Поиск и сортировка
5 sweetalert2.js: Модальные окна
6 popper.js: Всплывающие подсказки
7 baguetteBox.js: Галерея изображений
8 lightgallery.js: Галерея изображений
9 flatpickr.js: Календарь
10 cleave.js: Формы
11 mixItUp3.js: Фильтрация элементов
12 swiper.js: Слайдер
13 Тест по JS, Часть 4
14 Тест по JS, Часть 5
15 Итоги модуля
Планировщик Gulp
1 Что такое Gulp
2 Установка Node.js
3 Инициализация
4 NPM Пакеты
5 Константа с путями
6 Обработка стилей
7 Отслеживание
8 Обработка скриптов
9 Готовая сборка
10 Autoprefixer, Sourcemaps, Babel
11 Сжатие изображений
12 Минификация HTML
13 Размеры файлов
14 Отслеживание только новых файлов
15 Синхронизация кода с браузером
16 Работа с Pug
17 Работа с Stylus
18 Работа с SASS и SCSS
19 Работа с TypeScript
20 Работа с CoffeeScript
21 Скачать сборку Gulp
22 Итоги модуля
Фреймворк Vue.js
1 Что такое Vue
2 Структура проекта
3 Интерфейс игры
4 Достижения в игре
5 Экран с вопросами
6 Экран с результатами
7 Начало работы с Vue
8 Обработка событий
9 Циклы и методы
10 Конец игры на Vue
11 Вычисляемые свойства
12 Звук на JavaScript
13 Работа с Git и GitHub
14 Приложение в VK
15 Идеи для практики
16 Изучаем Vue 3
17 Условия и циклы
18 Интерполяция
19 Стили и классы
20 События и формы
21 Финальный проект
22 Чат-бот + ДЗ
23 Итоги модуля
24 Итоги курса
- 14 модулей, в которых вы научитесь работать с HTML, CSS, Figma, Photoshop, VS Code, Emmet, BEM, JavaScript, Git, GitHub, Bootstrap, Vue, Gulp
- 235 уроков, 14 уроков доступны бесплатно до покупки курса (обязательно изучите их перед принятием решения о покупке курса)
- общая продолжительность видео уроков около 60-ти часов
- 540 тестовых заданий
- 62 интерактивные задачи по программированию
- более 20 макетов сайта в ваше портфолио
- более 150 ресурсов для скачивания (ссылки на полезные сервисы, статьи, готовые шпаргалки, макеты сайтов и примеры кода)
- работа с нейросетями, на фриланс бирже, поиск заказов и советы по трудоустройству
- этот курс содержит в себе все материалы из 7-ми других моих курсов по самой выгодной цене
- обучение может занять от 4-х до 12-ти месяцев, в зависимости от уделенного вами времени
- много домашних заданий по написанию кода, вся теория закрепляется на практике на наглядных примерах
- выдается сертификат Stepik
- общение с автором и другими учениками, обсуждение уроков и отдельных шагов
- обучение по шагам - учитесь когда вам удобно, уроки разбиты на маленькие шаги (это может быть, текст, видео, тестовое задание)
- курс предоставляется вам навсегда, без каких-либо лимитов, дедлайнов и ограничений по времени, все материалы доступны сразу после покупки
- вы получите огромный багаж знаний и сможете освоить современную востребованную профессию
https://stepik.org/course/113402/