курс
‍Веб-верстальщик
с нуля

Если вы никогда раньше не писали ни строчки кода, этот курс для вас!
Вы научитесь верстать сайты на HTML и CSS  и сделаете первые проекты для портфолио.

Записаться
JS

JAVASCRIPT

курс программирования

Что входит в программу курса

Во время курса вы будете работать как настоящие верстальщики: поработаете с системой контроля версий в GitHub Desktop. Изучите HTML (язык разметки гипертекста), язык, общий для каждого веб-сайта. HTML описывает основную структуру и содержание веб-страницы. Если вы хотите создать сайт или веб-приложение, вам нужно знать HTML.

Работа в Adobe Photoshop

На первом этапе курса вы освоите все необходимые для программирования инструменты Photoshop.

Получить консультацию

Верстка сайтов из PSD макета.

Вы научитесь создавать сайты, адаптированные под мобильные устройства.

Получить консультацию

Разработка front-end части интернет-магазина на JavaScript

На этом этапе курса у студентов есть возможность выполнять коммерческие проекты.

Получить консультацию

Разработка веб-приложения на React.js

На заключительном этапе курса, вы освоите все необходимые навыки для работы. К этому времени ввашем портфолио будет 8 учебных и 1 коммерческий проект.

Получить консультацию

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

Начните создавать веб-страницы с помощью HTML и CSS, основных строительных блоков веб-разработки. Если вы программируете для развлечения или планируете начать карьеру в веб-разработке, изучение HTML и CSS - это отличное место для начала.
1 этап (HTML/CSS)

ДЛИТЕЛЬНОСТЬ: 2 месяца
Кол-во занятий : 10 практико-ориентированных занятия + 3 занятия во время дипломного проекта.

Во время курса вы изучите HTML, или язык разметки гипертекста, - это стандартный набор тегов, который вы будете использовать, чтобы сообщать веб-браузеру, как структурируется содержимое ваших веб-страниц и приложений. Научитесь использовать CSS или каскадные таблицы стилей, чтобы выбрать HTML-теги и сообщить браузеру, как должен выглядеть ваш контент.

Введение в HTML. Основы Git.

Проанализируем макет перед вёрсткой, узнаем синтаксис HTML и базовую структуру страницы.

Вы научитесь описывать структуру веб-страницы, поработаете с заголовками, списками, иллюстрациями.

Цель занятия:

Познакомиться с участниками и процессом на курсе, рассмотреть устройство веба и ваше место в профессии, подготовить инструменты для работы.

Темы занятия:

·      Понятие об HTML, атрибутах и тегах. Понятие о разметке.

·      Понятие о документе HTML.

·      Понятие о кодировке.

·      Понятие об URL.

·      Гиперссылки.

·      Git.

Введение в CSS. Шрифты. Позиционирование элементов.

Погрузимся в основы CSS. Разберем внутренние стили, основные CSS свойства, рендеринг страницы, поведение элементов.

Цель занятия:

Разобраться с устройством и логическими частями макета. Понять структуру файлов веб-страницы.

Темы занятия:

·      Введение в CSS.

·      Форматы изображений, выбор оптимального формата, приёмы оптимизации.

·      Кэширование изображений.

·      Позиционирование элементов.

·      Основные свойства CSS.

·      Работа со шрифтами.

Верстка первого проекта.

На этом занятии вы сверстаете свой первый одностраничный сайт.

Цель занятия:

Закрепить на практике полученные знания. Научиться верстать вносить изменения в существующую вёрстку.

Освоить работу с Adobe Photoshop.

Темы занятия:

·      Табличная и блочная вёрстка, приёмы.

·      Adobe Photoshop.

·      Выделение блоков из макета.

·      Разделение контента и интерфейса.

Адаптивная верстка.

Полученный опыт, позволит вам верстать сайты для всех типов устройств. Освоите адаптивную и отзывчивую вёрстку.

Цель занятия:

Научиться верстать под тач- и мобильные устройства.

Темы занятия:

·      Адаптивная вёрстка.

·      Мобильная вёрстка, приёмы, подходы mobile-first, desktop-first.

·      Стилевые файлы.

Flexbox.

Flex позволяет автоматически организовывать соответствующие элементы в контейнере в зависимости от размера экрана.

Цель занятия:

Изучить основы механизма «гибкой» раскладки — Flexbox. Потренироваться  выравнивать и переносить элементы. Научимся простому применению флексбокса в реальных интерфейсах.

Темы занятия:

·      Flexbox.

·      Свойство display: flex, flex-элемент.

·      Flex-выравнивания.

·      Сортировка элементов на CSS.


Практическое занятие.

На этот раз ваш проект будет более сложным. Вы создадите адаптивный сайт. Получите практический опыт, который позволит лучше понимать проектирование и создание современных отзывчивых веб-интерфейсов.

Цель занятия:

На практике разобрать принципы адаптивной верстки. Flexbox.

Темы занятия:

·      Верстка из PSD макета.

·      Адаптация сайта под мобильные устройства.

·      Стандарты W3C

CSS3 Grid.

CSS Grid стал неотъемлемой частью набора инструментов любого фронт-энд разработчика. Это лучшая модель для  всего, что требует точного и отзывчивого позиционирования (шаблонов сайтов, форм, галерей).

Цель занятия:

Изучить новый инструмент позволяющий строить двумерные сетки и создавать удобные пользовательские интерфейсы.

Темы занятия:

·      Система сеток.

·      Позиционирование системы координат для контента.

Bootstrap 4.

Bootstrap 4 - это библиотека, которая шаблоны оформления для текста, веб-форм, кнопок, меток.

Цель занятия:

Рассмотреть основные понятия, которые нужно освоить для дальнейшей работы.

Темы занятия:

·      Система cеток.

·     Какие существуют компоненты в Bootstrap 4.

·      Как создавать верстку страниц с помощью Bootstrap 4.

·      Модальные окна.

·      Формы.

Анимация CSS3.

CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем.

Цель занятия:

Узнать про основные виды анимации и о том, как создать анимации только при помощи CSS. Разумеется, попрактиковаться в создании анимаций разных уровней сложности.

Темы занятия:

·      Ключевые кадры.

·      Временная функция для ключевых кадров.

·      Название анимации: свойство animation-name.

·      Продолжительность анимации: свойство animation-duration.

·      Повтор анимации: свойство animation-iteration-count.

·      Направление анимации: свойство animation-direction.

·      Проигрывание анимации: свойство animation-play-state.

·      Задержка анимации: свойство animation-delay.

·      Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode.

Введение в JavaScript

Погрузитесь в JavaScript — один из самых популярных и гибких языков программирования. В рамках итогового проекта по этому модулю вы самостоятельно создадите свое первое веб-приложение.

Цель занятия:

Ознакомиться с работой JavaScript в веб-интерфейсах. Узнать о дополнительных возможностях, которые дает браузер.

Темы занятия:

·      Знакомство с JavaScript.

·      Переменные, типы данных, выражения.

·      Условные операторы.

·      Циклы.

·      Функции.

·      Области видимости переменных.

·      Стратегия поиска ошибок и отладка кода.

·      Массивы и хэши.

Препроцессоры SASS/SCSS.

Когда таблица стилей становится огромной, то приходится тратить много времени на её обслуживание. Препроцессор создан именно для такого случая. Sass позволяет использовать функции недоступные в самом CSS (переменные, вложенности, миксины, наследование).

Цель занятия:

Понять принципы работы препроцессоров.

Темы занятия:

·      Переменные.

·      Вложенности.

·      Фрагментирование.

·      Импорт.

·      Миксины (примеси).

·      Расширение/Наследование.

·      Математические операторы.

Разработка дипломного проекта.

Дипломный проект представляет собой полноценный сайт.

Формат написания дипломного проекта:

На написание дипломного проекта дается 1 неделя. Во время дипломного проекта у учеников будет 3 встречи с преподавателем в нашем офисе.

Формат сдачи дипломного проекта:

Код дипломного проекта должен быть залит на GitHub. Дипломный проект так же оценивается по 10-ти балльной шкале. Оценка за дипломный проект формирует общий рейтинг ученика и дает возможность получить скидку на следующий этап курса.

Записаться

Наши студенты
работают в ведущих компаниях СНГ

03 / Актуальные профессии

Наши студенты
работают в ведущих компаниях РБ.

#ormedia_career

Каждый ученик получает поддержку от Центра развития карьеры.

Помощь в подготовке резюме и прохождении собеседования

Консультация с HR-специалистом по поиску работы и развитию вашей карьеры

Возможность прохождения стажировки на наших собственных проектах.

Организация и проведение преддипломной практики для студентов ВУЗов.

Перейти
Testimonial Image

Наша программа обучения составлена таким образом, что с 6-ой недели обучения мы даем возможность нашим ученикам выполнять тестовые задания от наших заказчиков.

Каждый выпускник получает 2 сертификата (online,а также в виде документа). Это не просто “корочка”, которую можно показать друзьям, а реальное доказательство ваших знаний.

Поможем в выборе

Если у вас остались вопросы о формате или вы не знаете, что выбрать.
Ohhh Yes!!

Your submission has been staged.
We'll check it out and submit it within 24 hours.
This is some text inside of a div block.
Oops! Something went wrong while submitting the form.