Frontend разработчик на HTML, CSS и JavaScript
Начинающий специалист
1 час в день или больше
онлайн
Сертификат Stepik
14 900 ₽
Подробнее о курсе
Документ после выпуска
Сертификат Stepik
Автор курса
Программа курса
Основы языка 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
- Отмена изменений
- Работа с ветками
- Расширение Git Graph
- Удаление репозитория
- Синтаксис Markdown
- Фрагменты кода Gist
- Хостинг GitHub Pages
- Портфолио на GitHub
- Клонирование
- Fork и Pull Request
- Слияние веток Git
- Итоги модуля
- Файл .gitignore
Продвинутый HTML и CSS
- Редактор кода, Иконки и Emmet
- Основы CSS Grid
- Позиционирование, Размеры и Блочная модель
- Методология БЭМ, Как называть классы в HTML
- margin или padding, Что лучше использовать
- Выравнивание по центру и анимация
- Переменные root и Функция calc
- Тест по HTML, Часть 3
- Тест по CSS, Часть 3
- Итоги модуля
Верстка на Bootstrap
- Адаптивный сайт, Создание своей сетки
- Обзор, загрузка и подключение
- Шапка, модальное окно, градиент, треугольник, адаптивное видео
- Сетка 3 на 3 и иконки
- Сетка 2 на 2
- Аккордеон
- Адаптивные изображения
- Практика + ДЗ
- Форма сбора средств
- Создание футера
- Обзор документации
- Библиотека иконок
- Итоги модуля
- Тест по CSS, Часть 4
- Тест по CSS, Часть 5
Верстка по макету Figma
- Работа с Figma и создание проекта
- Pixel Perfect и верстка Grid + Flexbox
- Верстаем несколько разделов сайта
- О работе верстальщика
- Интерактивные элементы на сайте
- ДЗ по верстке сайта
- Фриланс, первый заказ
- Итоги модуля
- Тест по CSS, Часть 6
- Тест по CSS, Часть 7
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
Верстка в портфолио
- Сайт 1 - Konstruct
- Сайт 2 - Alivio
- Сайт 3 - WD
- Сайт 4 - Britlex
- Сайт 5 - Archi Web
- Сайт 6 - Cloud Budget
- Сайт 7 - Dae
- Итоги модуля
- Макеты для верстки
- Знакомство с Pixso
- Работа с SVG
- Шрифты Google Fonts
- Perfect Pixel в браузере
- Раздел сайта Features
- Раздел сайта Stats
- Раздел сайта Blog
- Домашнее задание
Основы JavaScript
- Работа с JavaScript
- Строки и логика
- Шаблонные строки, Случайные числа, Округление чисел
- Массивы
- Объекты
- Диалоговые окна, Тернарный оператор, Переключатель Switch
- Циклы + практика
- Функции + практика
- Дата и время
- JSDoc и Исключения
- ООП
- ECMAScript 2015 (ES6)
- Задачи на JS, Часть 1
- Задачи на JS, Часть 2
- Итоги модуля
- Задачи на JS, Часть 4
- Задачи на JS, Часть 3
DOM на JavaScript
- Работа с DOM
- Атрибуты, Элементы
- Генерация списков
- Календарь + ДЗ
- Сортировка таблицы
- Часы
- Классы и метрики
- Таблица из массива
- Таблица из объекта
- Таблица из данных
- Карточки часть 1
- Карточки часть 2
- Прогресс-бар
- Генератор имен
- Работа с localStorage
- Тест по JS, Часть 1
- Итоги модуля
Для кого этот курс
1. Для тех, кто уже делал свои первые попытки в создании сайтов, но не очень успешно или давно. 2. Для тех, кто хочет освоить HTML, CSS, JavaScript, Bootstrap, Vue, Git, GitHub, Gulp, и начать применять эти навыки в работе. 3. Для тех, кто мало что понял из предыдущих пунктов, но очень хочет понять, так как чувствует, что эти навыки будут полезны. 4. Для тех, кто хочет стать крутым разработчиком, зарабатывать на этом деньги и быть востребованным на современном рынке труда.
Что вы получите
Устанавливать редактор для написания кода 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, CSS, JavaScript, Figma, Photoshop, VS Code, Emmet, BEM, Bootstrap, Vue, Git, GitHub, Gulp. Расскажу как составить портфолио, резюме и взять первый заказ на фрилансе.
Оставьте отзыв
Оставьте заявку
Наши консультанты ответят на все вопросы
И помогут в выборе
Нажимая кнопку, вы даете согласие на обработку персональных данных