Курс «Программирование Front-end» предусматривает изучение целого ряда языков и технологий, среди которых html5, css3, JavaScript (JQuery). С их помощью можно создавать пользовательский интерфейс, задавать параметры веб-страницы, которая при открывании в браузере будет реагировать на команды пользователя должным образом.
На курсе вы сможете быстро и основательно развить навыки верстальщика и программиста. Полученные знания позволят претендовать на позиции «верстальщик», «junior front-end developer», «junior javascript developer». Хорошее начало для успешной профессиональной деятельности! Чтобы стать разработчиком front-end, нужно быть мастером на все руки и развивать в себе способности к дизайну.
На занятиях вы:
Программирование Front-End больше не будет для вас незнакомым полем деятельности!
Знакомство
Что такое IT в целом и какое место занимает front-end в веб разработке в частности. Этапы разработки проекта
Обзор инструментов для разработки
Структура HTML документа. Основные теги
Особенности HTML5. Понятие кроссбраузерности и валидности
Внутренние стили. Основные CSS свойства
Рендеринг страницы. Поведение элементов.
Блочные-строчные. Различия, особенности, их выравнивание
Отступы. Схлопывание. box-sizing
Вендорные префиксы, caniuse
Селекторы. Глобальные таблицы стилей
Значимость селектора, вес от типа обращения. !important
Взаимоотношение блоков: вложенный, дочерний, соседствующий, родительский. Использования взаимоотношения в селекторах. Массовые обращения
Цветообразование. rgb. hex. opacity vs rgba
Комментирование кода
Абсолютный и относительный путь
Внешние таблицы стилей. Импорт стилей
Сброс стилей по-умолчанию. CSS reset
Изображения, как часть контента
Ссылки. Многостраничные сайты
FTP. Работа с сервером.
Выстраивание элементов с использованием свойства table-cell.
Выстраивание элементов с использованием свойства inline-block. Особенности
Выстраивание элементов с использованием свойства float. Отмена обтекания. Распорка.
Псевдоэлементы. Использование, назначение. Использование псевдоэлемента, как распорки при плавающих блоках.
Верстка с использованием flex. Все нюансы flexbox взаимодействия.
Сравнение способов взаимодействия. Плюсы и минусы. Кроссбраузерность взаимодействий.
Единиці измерения в web, абсолютные и относительные, разбор.
Позиционирование элементов, свойство position.
static, relative, absolute, fixed, sticky: детальное рассмотрение каждого поведения
Выравнивание absolute и fixed.
Использование нестандартных шрифтов. Как это “безопасные шрифты”
google fonts обзор, применение
fonts squirrel использование сервиса. Аналоги
Построение меню. Теги
Многоуровневое, выпадающее меню
Что такое фоновая картинка. Отличия от image.
Зона отображения фона. background-clip
Позиционирование, размеры фоновой картинки
Понятие спрайта. Назначение, плюсы и минусы
Построение меню с социальными иконками.
Взаимодействие блока с фиксированной и динамической шириной
Меню с иконками+контент
Линейные и радиальные градиенты. Примеры использования
Трансформация, как преобразование формы, размеров, местоположения обьектов
Матрица преобразования, простые свойства
Анимации с использованием свойства transition
Кривая Безье, простые свойства
Анимации через keyframes
Назначение, применение, анимирование
Скругления, примеры использования.
Бордеры. Треугольники
Тени блоков
Составные фигуры. Рисование картинок. Сервис single div
Формы. Назначение, принцип работы
Стилизация элементов форм
Подсказки, паттерны
Новые элементы в HTML5
Стилизация checkbox
Векторная графика. SVG. Анимирование
Тестирование по пройденной теории
Семантические теги. Назначение, использование, преимущества
Ускорение и автоматизация верстки. Emmet
Программы для работы с макетами: PS, avocode, photopea, figma, zeplin
Принцип верстки макета
Проверка сделанного. Рекомендации. Индивидуальные консультации
Идеальность верстки. PerfectPixel. Обзор плагинов
Особенности верстки под IE. Скрипты
Условное комментирование
Сдача макетов
Понятие адаптивной верстки. История появления. “Резиновые сайты”
Поведение контента при изменении размеров.
Медиазапросы, как условия для изменения верстки. Варианты использования.
Принципы построение адаптивной верстки. Desktop and mobile first. Сравнение.
Сравнение breakpoints, популярные брикпойнты
DPR. Viewport
Визуальные особенности мобильных версий
Тестирование, инструменты для тестирования и дебаггинга
Что такое FrameWork, актуальность использования.
Bootstrap. Подключение, принцип работы
Bootstrap grid
Bootstrap компоненты.
Сравнение отличий версий bootstrap
Отличия в сетке и классах
Отличия в сетке и классах
Bootstrap 4 компоненты
Обзор и построение элементов на bootstrap js.
Недостатки BS slider. owl carousel, как аналог. Преимущества, подключение, опции
Принцип построения сайта AIDA
JS фреймворк Fullpage js
Выдача макетов для адаптивной верстки. Рекомендации по адаптации
Проверка сделанного. Рекомендации. Индивидуальные консультации
Идеальность верстки в адаптиве
Исправление популярных ошибок
Основы JS, принцип его работы
Что такое JS, как работает
Сравнение VanillaJS vs JQuery,React, VUE, Angular. Node.js
Основы синтаксиса. Построение функции.
Зависимые функции
Литература по теме
Переменные. Кеширование
Условия (if else)
Популярные функции на примерах
Практика. Построение scrollUp, popup, carousel, image gallery используя JS и разбор синтаксиса.
Разработка слайдера и карусели с использованием JS
Бесконечность в карусели, клонирование элементов
Фотогаллерея на JS
Разрабатіваем свою фотогалерею с индикацией прокрутки и бесконечными thumnails
Отслеживание скролла, создание “прилипающих” блоков
Получение координат расположений блоков
Смена скорости скролла объектов, принципы параллаксов
Построение параллакс эффекта с “замиранием” блоков и сменой скорости скрола
Рекомендации по самостоятельному изучению JS. Подборка литературы.
Удаленная работа с файлами
Использование препроцессоров, принципы, основы
Разбор препроцессоров на примере LESS
Сборщики. Обзор функциональности. Gulp. Плагины
Что такое GIT и зачем он нужен.
Литература и рекомендации по глубокому самостоятельному изучению рассмотренных тем.
Freelance как возможность трудоустроится. Сам себе предприниматель.
Подводные камни, особенности работы, хитрости.
Что такое CMS и зачем их знать front-end разработчику. Обзор популярных CMS
Как произвести впечатление на работодателя, подготовить оригинальное резюме и в сжатые сроки устроится на работу. Подготовка резюме, портфолио.
Старт новой группы
Дни занятий: Понедельник, Четверг
08.06.2023
старт по мере комплектации
Закончил Харьковский колледж строительства и архитектуры. Инженер-строитель. В Ай-Ти пришел как самоучка, работал на фрилансе около 4 лет, впоследствии открыл свою веб-студию. Суммарный стаж работы порядка 12 лет. Опыт преподавания - 6 лет. Играю в минифутбол, катаюсь на лыжах, велосипеде. Бегаю по утрам, да и всячески стараюсь вести активный и здоровый образ жизни.
Начинал с фриланса, прочувствовал все "прелести" жизни front-end разработчика и теперь готов делиться действительно проверенными лайфхаками. Имеется опыт онлайн преподавания и выступаю ментором в своей компании. Считаю, что Front-End - для истинных творцов и перфекционистов, которые хотят увидеть свой результат сразу. В свободное время судья в пейнтболе, жму от груди 135кг и путешествую.
«Пришел на данный курс не имея базовых знаний в Front-End. Вышел с хорошим багажом знаний, достаточным для дальнейшего саморазвития в Front-End. Теперь о преподавателе, Паша дает материал грамотно, лаконично и структурированно, часто задает вопрос ""Понятно?"" если вдруг тишина в группе он повторяет ""Ну говорите если не понятно"", а затем приводит пример изложенного материала взаимодействуя с аудиторией. Даже если не понял после примера, можно пересмотреть видео в домашних условиях где тебя никто не отвлекает и разобраться в теме. Об аудитории: только после ремонта, первые пол месяца пахло краской, поэтому ходили заниматься в главный офис. Понравился куллер с постоянно подогретой водой для чая, кофе. Хорошие условия для обучения.
Плюсы:
«Очень насыщенный, интересный и дающий уверенность в своих силах курс. Огромнейший плюс – это видеозапись каждого урока. Если бы их не было, я бы и половины материала не усвоила, потому что на каждом уроке дается очень много, и человеку неподготовленному сложно сразу въехать в суть. Ну или я просто часто отвлекалась на уроке )) Пока пытаешься осознать суть и смириться с отрицательным марджином, преподаватель в объяснениях уже ушел вперед. А дома сел спокойненько, пересмотрел, написал конспект и думаешь: «Ну все же ясно, как это можно было не понять сразу! )))
Хочется сказать большое человеческое спасибо Леше за открытость, желание и, что немаловажно, умение рассказать и объяснить материал так и столько раз, что это становится понятно даже если думал, что никогда этого не поймешь))) Спасибо за то количество и качество знаний, которое ты перегнал из своей головы в наши)) (а сколько еще мог бы на продвинутом курсе ;) Объем материала преподаваемого на курсе возрастал с каждым уроком. Если первую часть курса мы постепенно и методично разбирались в верстке, делали свои учебные макеты, то последние уроки были перенасыщены информацией о том, куда еще развиваться, что еще учить, в какую сторону смотреть, если планируешь преуспеть в этом направлении. JQuery, препроцессоры, микроразметка, CMS, SVG, Flexbox - все это хотелось бы тоже освоить в спокойном темпе, с домашними заданиями и еще парочкой макетов )) Я это к чему - это я обращаюсь к руководству школы все-таки запустить продвинутый курс, где можно было бы со всем этим спокойно разобраться - и процент устраиваемости ваших выпускников в крутые IT-компании существенно увеличился бы, как и рейтинг школы в целом! Особенно, если этот курс будет преподавать Леша ;)»
«"...Школа дает отличный фундамент для старта в IT сфере (даже новичкам). Преподаватель Алексей Пузич, мастер своего дела) Мне всё заходило, что не заходило переспрашивал) Остались одни положительные эмоции) По поводу устройства на работу, всё зависит от вас, захотите устроитесь, не захотите не устроитесь. Нужно всё время развиваться и познавать что-то новое (развивать свои скилы). И еще важно - это поставить пред собой цель, и тогда точно всё получится)".»
«Безумно довольна обучением в UItSchool! Алексей Пузич потрясающий преподаватель))учит не просто front-end, учит быть настоящим профессионалом своего дела))уроки с ним очень мотивируют и вдохновляют! Когда курс закончился даже уходить не хотелось)) спасибо за все!))Курсы UItSchool буду рекомендовать всем!»
«Закончила курсы Front-end у преподавателя Алексея Пузича и осталась очень довольна)) теплая и дружественная обстановка в школе, преподаватель преподносит материал доступно и понятно для каждого, помогает в случаях, если что-то не получается))темы уроков хорошо подобраны и вся информация обязательно пригодится в дальнейшем) рекомендую всем, приходите в UIT School, станете крутыми специалистами!»
«Недавно закончил курс «Front-End: HTML+CSS+JS», преподаватель Алексей Пузич. Курсом остался очень доволен. До этого никогда не интересовался фронт-эндом, и даже не знал что это такое. Но Алексей настолько все доходчиво объяснял, что я все понимал и всерьёз заинтересовался данным направлением. По окончанию курса знаний хватает, что бы самому создавать простейшие сайты и искать работу. Если кто-то интересуется данным направлением, то обязательно идите учиться в Ukrainian IT School к Алексею Пузичу!»