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

​

О курсе:

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

Спойлер: Что в этом курсе:

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

На все вопросы внутри курса отвечаю лично в разделе "Комментарии" (этот раздел есть под каждым шагом). Так же есть Телеграм канал для вопросов и обсуждений не только по данному курсу. Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования.

Каждый урок состоит из отдельных шагов (до 16 шагов) - это может быть, теория в виде текста, видео, тестовое задание.

Почему стоит начать обучение сейчас? Создание сайтов и программирование - это очень востребованные навыки, который хорошо оплачиваются. Изучив и освоив всю данную вам информацию вы сможете создавать свои продукты и работать как на фрилансе, так и в студии, потому что в этом курсе вы заложите крепкий фундамент для дальнейшего обучения и работы. Владея этими навыками вы сможете освоить любую CMS, понять и изучить как работает backend, создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках.

Данный курс содержит все уроки и задания из семи других моих курсов:

1. Вёрстка на HTML & CSS для начинающих
2. Супер курс по языку JavaScript
3. Bootstrap 5 для начинающих
4. Git и GitHub для разработчика
5. Игра на Vue.js
6. Планировщик задач Gulp 4
7. Верстаем 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

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

1. Редактор кода, Иконки и Emmet
2. Основы CSS Grid
3. Позиционирование, Размеры и Блочная модель
4. Методология БЭМ, Как называть классы в HTML
5. margin или padding, Что лучше использовать
6. Выравнивание по центру и анимация
7. Переменные root и Функция calc
8. Тест по HTML, Часть 3
9. Тест по CSS, Часть 3
10. Итоги модуля

Верстка на Bootstrap

1. Обзор, загрузка и подключение
2. Шапка, модальное окно, градиент, треугольник, адаптивное видео
3. Сетка 3 на 3 и иконки
4. Сетка 2 на 2
5. Аккордеон
6. Адаптивные изображения
7. Практика + ДЗ
8. Форма сбора средств
9. Создание футера
10. Обзор документации
11. Библиотека иконок
12. Адаптивный сайт, Создание своей сетки
13. Итоги модуля

Верстка по макету Figma

1. Работа с Figma и создание проекта
2. Pixel Perfect и верстка Grid + Flexbox
3. Верстаем несколько разделов сайта
4. О работе верстальщика
5. Интерактивные элементы на сайте
6. ДЗ по верстке сайта
7. Фриланс, первый заказ
8. Итоги модуля

Верстка в портфолио

1. Сайт 1 - Konstruct
2. Сайт 2 - Alivio
3. Сайт 3 - WD
4. Сайт 4 - Britlex
5. Сайт 5 - Archi Web
6. Сайт 6 - Cloud Budget
7. Сайт 7 - Dae
8. Итоги модуля

Основы 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. Итоги модуля

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. Итоги модуля

Библиотеки 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. Итоги модуля

Планировщик 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. Итоги курса

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