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

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

4.7

ФорматОнлайн

Длительность1 час в день или больше

Объём15 занятий

УровеньНачальный

По окончанииStepik

О курсе

Подробнее

Этот курс направлен на обучение созданию сайтов и программированию на языке JavaScript, весь материал подносится простым языком. Вы получите много полезных материалов и мы вместе будем применять изученное на практике создавая интересные проекты шаг за шагом. Что в этом курсе? Мы с вами пройдем путь от установки своего первого редактора кода до создания сайтов. Мы будем изучать теоретическую часть и сразу же применять её на практике. Все ссылки на ресурсы, дополнительные материалы, шпаргалки и готовые фрагменты кода будут предоставлены внутри курса. На все вопросы внутри курса отвечаю лично в разделе "Комментарии" (этот раздел есть под каждым шагом). Так же есть Телеграм канал для вопросов и обсуждений не только по данному курсу. Там можно общаться с другими участниками моего сообщества и лично со мной на любые темы касательно разработки и программирования. Каждый урок состоит из отдельных шагов (до 16 шагов) - это может быть, теория в виде текста, видео, тестовое задание. Почему стоит начать обучение сейчас? Создание сайтов и программирование - это очень востребованные навыки, который хорошо оплачиваются. Изучив и освоив всю данную вам информацию вы сможете создавать свои продукты и работать как на фрилансе, так и в студии, потому что в этом курсе вы заложите крепкий фундамент для дальнейшего обучения и работы. Владея этими навыками вы сможете освоить любую CMS, понять и изучить как работает backend, создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках. Данный курс содержит все уроки и задания из семи других моих курсов: Вёрстка на HTML & CSS для начинающих Супер курс по языку JavaScript Bootstrap 5 для начинающих Git и GitHub для разработчика Игра на Vue.js Планировщик задач Gulp 4 Верстаем 10 сайтов по макету из Figma в портфолио Какой курс выбрать? Вам не нужно покупать курсы из списка выше по отдельности и вы можете сэкономить приобретая данный курс. Выбирайте этот курс, если хотите получить всё и сразу. Он более перспективен, так как получает много обновлений и улучшений. Так же цена на него в будущем может быть выше, а купив его сейчас, вам не придется доплачивать даже если цена увеличится. Вы получаете пожизненный доступ к курсу и всем последующим обновлениям заплатив один раз, сейчас. Или можете приобрести отдельный курс только по интересующей вас теме. Выбирайте другие мои курсы, если хотите изучить какую-то определенную тему и при этом не тратить деньги на то, что возможно даже не будите изучать или если вы не хотите делать вклад в своё будущее, сейчас.

Требования

Что нужно для старта

Желание освоить создание сайтов и начать зарабатывать на этом
Любой компьютер или ноутбук с доступом в интернет и базовые навыки работы с ним
Немного целеустремленности, трудолюбия, терпения и щепотка веры в свои силы
Никакой другой предварительной подготовки

Результат

Что вы получите

Устанавливать редактор для написания кода VS Code, настраивать его, устанавливать расширения и темы, работать с плагином Emmet, работать в терминале (командной строке)
Работать с HTML и CSS - это два языка, которые необходимы для создания любого сайта
Работать с системой контроля версий Git и добавлять свой код в удаленные репозитории на GitHub, делать Fork, Pull-request и слияние веток
Работать с Flexbox, Grid и BEM, создавать свою адаптивную сетку на CSS и мы сверстаем много отдельных фрагментов современных сайтов
Работать с Bootstrap и создавать мобильную адаптацию сайтов и приложений
Создавать современные веб-сайты и правильно пользоваться документацией
Работать с Photoshop, Figma и Pixso в контексте верстки, извлекать картинки и текст из макетов
Верстать сайты по макету из Figma и Pixso, добавлять их себе в портфолио
Составлять резюме, портфолио и брать свой первый заказ на фрилансе
Программировать на языке JavaScript. Работать с DOM, с событиями и с современными JavaScript библиотеками для создания слайдеров, галерей, меню и других интерактивных элементов
Автоматизировать процессы при помощи планировщика задач Gulp, работать с NPM и подключать плагины Node.js
Работать с фреймворком Vue.js и создавать свою игру используя изученные ранее языки и технологии, загружать её в VK
Создавать проект React, работать с компонентами, добавлять статику и динамику, работать с свойствами и состояниями, добавлять стили, работать с формами.
🎁 Получите в подарок полезный pdf документ с обзором более 40 нейросетей и ИИ, сможете научится пользоваться ими, а так же применять современные технологии в своей жизни и работе
🎁 Чек-лист в формате pdf с рекомендациями на тему "Как пройти любое собеседование" и чек-лист "Эффективное обучение на примере изучения английского языка"
🎁 Гайд в формате pdf про метод Кайдзен, из которого вы узнаете что это такое и как применять для достижения новых высот в любой сфере деятельности

Аудитория

Для кого этот курс

1. Для тех, кто уже делал свои первые попытки в создании сайтов, но не очень успешно или давно.
2. Для тех, кто хочет освоить HTML, CSS, JavaScript, Bootstrap, Vue, React, Git, GitHub, Gulp, и начать применять эти навыки в работе.
3. Для тех, кто мало что понял из предыдущих пунктов, но очень хочет понять, так как чувствует, что эти навыки будут полезны.
4. Для тех, кто хочет стать крутым разработчиком, зарабатывать на этом деньги и быть востребованным на современном рынке труда.

Содержание

Программа курса

15 занятий

№ТемаЧто внутри

01Основы языка HTML

- Введение
- Браузер и редактор
- Первые HTML теги
- Путь к файлу
- Списки и ссылки
- Таблицы
- Работа с текстом
- Формы
- Атрибуты тегов
- Цвет RGB и символы
- Тест по HTML, Часть 1
- Итоги модуля

02Основы языка CSS

- CSS селекторы
- Работа с картинками
- Границы элементов
- Размеры элементов
- Шрифт текста
- Блочная модель
- Псевдоклассы и псевдоэлементы
- Основы CSS Flexbox
- Тест по CSS, Часть 1
- Итоги модуля

03Практика по HTML и CSS

- Создаем меню + ДЗ
- Верстаем блок + ДЗ
- Текст и иконки + ДЗ
- Урок по Photoshop
- Верстка по макету + ДЗ
- Финальное задание
- Тест по HTML, Часть 2
- Тест по CSS, Часть 2
- Итоги модуля

04Работа с Git и GitHub

- Что такое Git
- Установка Git
- Регистрация на GitHub
- Первые команды Git
- Работа с Git в VS Code
- Удаление репозитория
- Клонирование
- Расширение Git Graph
- Алиасы для Git
- Отмена изменений
- Работа с ветками
- Слияние веток Git
- Синтаксис Markdown
- Фрагменты кода Gist
- Хостинг GitHub Pages
- Портфолио на GitHub
- Fork и Pull Request
- Файл .gitignore
- Итоги модуля

05Продвинутый HTML и CSS

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

06Bootstrap

- Bootstrap 5.0 | 2021
- Обзор и подключение
- Учим основы
- Сетка 3 на 3 и иконки
- Сетка 2 на 2
- Аккордеон
- Адаптивная картинка
- Практика и задание
- Форма сбора средств
- Создание футера
- Обзор документации
- Библиотека иконок
- Адаптивный сайт, Создание своей сетки
- Тест по CSS, Часть 4
- Тест по CSS, Часть 5
- Bootstrap 5.3 | 2025
- Начало работы
- Макет
- Контент
- Формы
- Компоненты, Часть 1
- Компоненты, Часть 2
- Помощники и утилиты
- Дополнительно
- Итоги модуля

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

- Работа с Figma и создание проекта
- Pixel Perfect и верстка Grid + Flexbox
- Верстаем несколько разделов сайта
- О работе верстальщика
- Интерактивные элементы на сайте
- ДЗ по верстке сайта
- Фриланс, первый заказ
- Тест по CSS, Часть 6
- Тест по CSS, Часть 7
- Структура проекта
- Обзор макета
- Работа с Perfect Pixel
- Адаптивная версия
- Экспорт SVG
- Верстаем раздел
- Тень блока вручную
- Публикуем код
- Плагин Inspect Styles
- Итоги модуля

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

- Сайт 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
- Домашнее задание
- Макеты для верстки
- Итоги модуля

09Основы JavaScript

- Работа с JavaScript
- Строки и логика
- Шаблонные строки, Случайные числа, Округление чисел
- Массивы
- Объекты
- Диалоговые окна, Тернарный оператор, Переключатель Switch
- Циклы + практика
- Функции + практика
- Дата и время
- JSDoc и Исключения
- ООП
- ECMAScript 2015 (ES6)
- Задачи на JS, Часть 1
- Задачи на JS, Часть 2
- Задачи на JS, Часть 3
- Задачи на JS, Часть 4
- Итоги модуля

10DOM на JavaScript

- Работа с DOM
- Атрибуты, Элементы
- Генерация списков
- Календарь + ДЗ
- Сортировка таблицы
- Часы
- Классы и метрики
- Таблица из массива
- Таблица из объекта
- Таблица из данных
- Карточки часть 1
- Карточки часть 2
- Прогресс-бар
- Генератор имен
- Работа с localStorage
- Тест по JS, Часть 1
- Задачи на JS, Часть 5
- Итоги модуля

11События на JavaScript

- Обработчики событий
- Скрыть / Показать
- Простой слайдер
- Тёмная тема
- ООП на практике
- Делегирование и Фазы события
- Счётчик
- Переключатель
- Удаление карточек
- Разворачиваемые подменю
- Сортировка таблицы
- Всплывающая подсказка
- Отмена стандартного поведения
- Сочетание клавиш
- Выделение через CTRL
- Range-Слайдер
- События клавиатуры
- Работа с формами
- Фокус и потеря фокуса
- Перемещение по стрелкам
- События форм и буфера обмена
- События страницы, async и defer
- Диапазон и Выделение
- Проект №1
- Проект №2
- Проект №3
- Тест по JS, Часть 2
- Тест по JS, Часть 3
- Задачи на JS, Часть 6
- Итоги модуля

12Библиотеки JavaScript

- Работа с файлами
- Анимация на JS и CSS
- Регулярные выражения
- list.js: Поиск и сортировка
- sweetalert2.js: Модальные окна
- popper.js: Всплывающие подсказки
- baguetteBox.js: Галерея изображений
- lightgallery.js: Галерея изображений
- flatpickr.js: Календарь
- cleave.js: Формы
- mixItUp3.js: Фильтрация элементов
- swiper.js: Слайдер
- Тест по JS, Часть 4
- Тест по JS, Часть 5
- Задачи на JS, Часть 7
- Итоги модуля

13Планировщик Gulp

- Что такое Gulp
- Установка Node.js
- Инициализация
- NPM Пакеты
- Константа с путями
- Обработка стилей
- Отслеживание
- Обработка скриптов
- Готовая сборка
- Autoprefixer, Sourcemaps, Babel
- Сжатие изображений
- Минификация HTML
- Размеры файлов
- Отслеживание только новых файлов
- Синхронизация кода с браузером
- Работа с Pug
- Работа с Stylus
- Работа с SASS и SCSS
- Работа с TypeScript
- Работа с CoffeeScript
- Скачать сборку Gulp
- Итоги модуля

14Фреймворк Vue.js

- Что такое Vue
- Структура проекта
- Интерфейс игры
- Достижения в игре
- Экран с вопросами
- Экран с результатами
- Начало работы с Vue
- Обработка событий
- Циклы и методы
- Конец игры на Vue
- Вычисляемые свойства
- Звук на JavaScript
- Работа с Git и GitHub
- Приложение в VK
- Идеи для практики
- Изучаем Vue 3
- Условия и циклы
- Интерполяция
- Стили и классы
- События и формы
- Финальный проект
- Чат-бот + ДЗ
- Итоги модуля

15Основы React

- Начало работы с React
- Компоненты, статика
- Свойства, динамика
- Состояния, условия
- Стили и формы
- Итоги модуля
- Итоги курса

01Основы языка HTML

02Основы языка CSS

03Практика по HTML и CSS

04Работа с Git и GitHub

05Продвинутый HTML и CSS

06Bootstrap

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

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

09Основы JavaScript

10DOM на JavaScript

11События на JavaScript

12Библиотеки JavaScript

13Планировщик Gulp

14Фреймворк Vue.js

15Основы React

Документ после выпуска

Stepik

Организатор

Автор курса

Stepik

4.6Нет отзывов

Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.

Подробнее об авторе

Мнения учеников