Этот курс входит в профессию Front end веб-разработчик от ORT DNIPRO. Подробнее

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

Наша цель разобраться как всё устроено в веб-разработке, какие технологии и инструменты сегодня применяются, и закрепить всё практикой. Материал курса разбит на последовательные этапы для получения, студентами, бóльшего объёма актуальной информации.

#01. World Wide Web (Front end/Back end)

Две программы участвуют в работе World Wide Web — браузер и веб-сервер. Front end’ом называют те процессы которые происходят в браузере, а Back end’ом — процессы на стороне веб-сервера. Наша задача разобраться, какие возможности и инструменты есть у веб-разработчика и какие задачи перед ним стоят. А также мы научимся работать с хостингом (размещением сайтов в Интернете) для запуска своих проектов в сети.

#02. Вёрстка страниц (HTML 5.2 & CSS 3)

Всё, что нам показывает браузер описывается кодом. Кодом на языке HTML — который говорит браузеру из каких элементов состоит страница, и кода на языке CSS — благодаря которому браузер узнает как визуально эти элементы оформить. Вёрсткой называют процесс написания HTML и CSS кода. Для написания и работы с кодом мы будем использовать современный редактор кода Microsoft Visual Studio Code. А также мы освоим технологии CSS Box Model, Flexbox, CSS Grid и другие.

#03. Адаптивная вёрстка (Адаптивность)

Сегодня любая веб-страница должна быть гибкой, хорошо выглядеть и оставаться удобной для пользователя, и не важно на каком экране страница отображается, на смартфоне, на мониторе домашнего компьютера или же на экране SmartTV-устройства. Вёрстка страниц, адаптирующихся к размеру экрана, — требование современности и этой теме уделено особое внимание. Мы освоим такие инструменты и технологии как медиа-запросы (media-queries), инструменты разработчка (Chrome DevTools) и эмулятор мобильных устройств.

#04. Bootstrap 5

Признак профессионализма — умение получить результат применяя в работе готовые, сторонние, решения. Веб-разработка не исключение. CSS-библиотека Bootstrap — стандарт де-факто в вёрстке. Компоненты библиотеки — удобные строительные блоки, применяемые в огромном количестве проектов по всему миру. А Bootstrap Grid — одна из самых применяемых техник размещения элементов на странице. Умение работать с библиотекой Bootstrap — то без чего немыслим современный веб-разработчик/верстальщик.

#05. CSS Анимация (Анимационные эффекты)

Анимация и анимационные эффекты стали уже привычными на страницах веб-сайтов. Мы освоим два подхода к построению анимации, а именно: анимацию переходов между состояниями (CSS Transition) и анимацию ключевых кадров, по сценарию (CSS Animation).

#06. Google Fonts & FontAwesome 5

Типографика — искусство оформления печатного текста. Понимание принципов работы с оформлением текстом и шрифтами и умение их применять в работе — отличительная черта профессионалов. Мы научимся работать с базой шрифтов Google Fonts и задействовать при решении задач вёрстки. А также познакомимся с популярной библиотекой векторных иконок FontAwesome 5.

#07. JavaScript

Если с HTML & CSS можно описать, что есть на странице и как это будет выглядеть, то любые действия которые пользователь выполняет на странице это задача для JavaScript. От простейших виджетов вплоть до игр в браузере всё это зона ответственности языка программирования JavaScript.

#08. Основы программирования

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

#09. Ввод, валидация и обработка данных пользователя.

Задача любой программы – обработка данных пользователя (будь это веб-приложение, мобильное приложение или даже приложение для Windows). В рамках курса мы разберём такие задачи как: организация ввода данных пользователем. Проверку данных на корректность — Валидациию данных. И применение (обработка) данных пользователя в работе веб-приложения. Также мы познакомимся с такой технологией как Регулярные Выражения (Regular Expressions).

#10. SEO/SMO оптимизация

Поисковые системы (Google) и социальные сетей (Facebook, Instagram etc) основной источник посетителей, а следовательно, и дохода для сайта. Казалось бы, продвижение сайта это задача маркетолога, но есть и технические аспекты в которых разработчик должен ориентироваться, чтобы Google, Facebook и др. приводили посетителей на сайт.

#11. Процесс разработки

Как и в любом производстве разработка сайта включает множество этапов, не зависимо от того на чём специализируется человек ему необходимо видеть и понимать всю картину. Знания полученные в этом разделе позволят не забыть ни о чём важно при создании и развитии web-сайтов.

#12. Git / GitHub

GitHub — крупнейший сервис для размещения кода IT-проектов и совместной работы над ним. Навыки работы с GitHub, сегодня, необходимы любому, кто работает в сфере IT. В рамках занятия мы узнаем и освоим как работать с кодом в репозиториях, как вносить изменения и какие возможности нам предоставляет система контроля версий Git и cервис хостинга репозиториев GitHub.