Курс «Разработка Front-End» предусматривает изучение целого ряда языков и технологий, среди которых HTML5, CSS3, JavaScript(ES6), React.js, WordPress. С их помощью можно создавать пользовательский интерфейс, задавать параметры веб-страницы, которая при открывании в браузере будет реагировать на команды пользователя должным образом.
На курсе вы сможете быстро и основательно развить навыки Разработчика и Программиста. Полученные знания позволят претендовать на позиции «Верстальщик», «Junior Front-End Developer», «Junior JavaScript Developer». Хорошее начало для успешной профессиональной деятельности! Чтобы стать разработчиком Front-End, нужно быть мастером на все руки и развивать в себе способности к дизайну.
На занятиях вы:
Программирование Front-End больше не будет для вас незнакомым полем деятельности!
Знакомство
Что такое IT в целом и какое место занимает front-end в веб разработке в частности. Этапы разработки проекта
Обзор инструментов для разработки
Стртура HTML документа. Основные теги
Особенности HTML5. Понятие кроссбраузерности и валидности
Таблицы в HTML
Маркированные,нумерованные списки
Виды ссылок
Форматы изображений
Формы и их элементы
Внутренние стили.
Рендеринг страницы. Поведение элементов.
Способы объявления CSS
Комментирование кода
Синтаксис
Свойства Стилей CSS
Селекторы. Глобальные таблицы стилей
Значимость селектора, вес от типа обращения
Взаимоотношение блоков: вложенный, дочерний, соседствующий, родительский.
Группировка стилей CSS
Абсолютный и относительный путь
Внешние таблицы стилей. Импорт стилей
Вложенность
Приорететы стилей в CSS
Ссылки. Многостраничные сайты
FTP. Работа с сервером.
Псевдоклассы
Выстраивание элементов с использованием свойства inline-block. Особенности
Выстраивание элементов с использованием свойства float. Отмена обтекания. Распорка.
Псевдоэлементы. Использование, назначение. Использование псевдоэлемента, как распорки.
Сравнение способов взаимодействия. Плюсы и минусы
Позиционирование элементов, свойство position.
static, relative, absolute, fixed, sticky: детальное рассмотрение каждого поведения
Выравнивание absolute и fixed.
Использование нестандартных шрифтов. Как это “безопасные шрифты”
google fonts обзор, применение
Построение меню. Теги
Многоуровневое, выпадающее меню
Что такое фоновая картинка. Отличия от image.
Зона отображения фона
Позиционирование, размеры фоновой картинки
Свойство Display
Формирование блочной модели
Позиционирование блоков
Работа с блочным макетом
Назначение, применение, анимирование
Скругления, примеры использования.
Бордеры. Треугольники
Тени блоков
Составные фигуры. Рисование картинок.
Формы. Назначение, принцип работы
Стилизация элементов форм
Новые элементы в HTML5
Стилизация checkbox
Векторная графика. SVG. Анимирование
Тестирование по пройденной теории
Семантические теги. Назначение, использование, преимущества
Ускорение и автоматизация верстки
Программы для работы с макетами: PhotoShop, figma, zeplin
Принцип верстки макета
Проверка сделанного. Рекомендации. Индивидуальные консультации
Идеальность верстки.
Особенности верстки под IE. Скрипты
Условное комментирование
Сдача макетов
Понятие адаптивной верстки. История появления. “Резиновые сайты”
Поведение контента при изменении размеров.
Медиазапросы, как условия для изменения верстки. Варианты использования.
Принципы построение адаптивной верстки. Desktop and mobile first. Сравнение.
Сравнение breakpoints, популярные брикпойнты
DPR. Viewport
Визуальные особенности мобильных версий
Тестирование, инструменты для тестирования и дебаггинга: mobile-friendly test, google chrome
Что такое FlexBox и зачем он нужен.
Свойства FlexBox
Особенности Bootstrap 4. Миграция
Работа с Bootstrap4
Что такое FrameWork, актуальность использования.
Bootstrap. Подключение, принцип работы
Bootstrap компоненты.
Less(Принцип работы, Миксины, Переменные).
Bootstrap JS. Owl carousel.
Недостатки BS slider. owl carousel, как аналог. Преимущества, подключение, опции
JS фреймворк Fullpage js
Проверка сделанного. Рекомендации. Индивидуальные консультации
Идеальность верстки в адаптиве
Исправление популярных ошибок
Сдача макетов
Что такое WordPress
Посадка верстки на WordPress
Functions.php
Создаем свою тему
Изменияемые поля на сайте
Advanced Custom Fields
Что такое JS, как работает
Основы синтаксиса. Построение функции.
Зависимые функции js
Литература по теме
Переменные. Кеширование
Условия (if else)
Популярные функции на примерах
Циклы while for
Функции
Стрелочные функции
Методы функции
Методы getElement(s).
Методы querySelector
Работа с DOM Деревом
Работа с Ajax.
Async Await.
Promise.
Массивы.
Обьекты в JS.
Тип данных Symbol.
Работа с объектами.
Рекомендации по самостоятельному изучению JS. Подборка литературы.
Prototype.
Классы ES6.
Наследование.
Установка терминала
Принцип работы NodeJS.
Работа с компонентами.
Webpack(Основы работы сборщика).
Собираем свой проект с помощью Webpack.
Запуск первого проекта
Компонентный подход. Как это работает?
Жизненный цикл компонента
Синтаксис Jsx
Подключение модульного css
Локальное состояние компонента
Глобальное состояние компонента
Props
React hoocks
Жизненный цикл функциональных компонентов
React Router
Окончил Политех программная инженерия . Знаю языки basic, pascal, c++ , python , JavaScript, swift, sql. Изучал data science, frontend, iOS . Преподаю frontend разработку и iOS . В сфере программирование 6 лет , в сфере frontend 3 года . Опыт преподавания 3 года.
Окончила курсы по Front End разработке в школе It-Academy. Работает в компании Program-Ace. Опыт работы в сфере IT 5 лет.
Увлечение - любопытство к тому, как устроены разные вещи.
В нашей школе самые демократичные цены, ментора действующие разработчики, 80% практики и максимум материала.
Достаточно иметь желание обучаться новому ,ноутбук, и быть уверенным пользователем ПК!
Необходимо уделять минимум 3 часа в день на учебу. Для достижения видимых результатов. Так же можем предложить вечерние группы обучения.
Да, в нашу школу приходят с абсолютно нулевой базой знаний. Наша школа и методика преподавания нацелена на новичков в программировании.
Это было бы плюсом, но на начальных парах не обязательно.
Вы можете пройти бесплатный пробный урок, где мы поможем сможем помочь Вам выбрать ваше направление.
Да. Необходимо иметь свой ноутбук. Характеристики: минимум 4 ГБ оперативной памяти, 2-х ядерный процессор. В идеале: 8 ГБ оперативной памяти и процессор с 4 ядрами.
«Пришел на данный курс не имея базовых знаний в Front-End. Вышел с хорошим багажом знаний, достаточным для дальнейшего саморазвития в Front-End. Теперь о преподавателе, Эржан дает материал грамотно, лаконично и стртурированно, часто задает вопрос ""Понятно?"" если вдруг тишина в группе он повторяет ""Ну говорите если не понятно"", а затем приводит пример изложенного материала взаимодействуя с аудиторией. Даже если не понял после примера, можно пересмотреть видео в домашних условиях где тебя никто не отвлекает и разобраться в теме. Об аудитории: только после ремонта, первые пол месяца пахло краской, поэтому ходили заниматься в главный офис. Понравился куллер с постоянно подогретой водой для чая, кофе. Хорошие условия для обучения.
«Очень насыщенный, интересный и дающий уверенность в своих силах курс. Огромнейший плюс – это видеозапись каждого урока. Если бы их не было, я бы и половины материала не усвоил, потому что на каждом уроке дается очень много, и человеку неподготовленному сложно сразу въехать в суть. Ну или я просто часто отвлекался на уроке )) Пока пытаешься осознать суть и смириться с отрицательным марджином, преподаватель в объяснениях уже ушел вперед. А дома сел спокойненько, пересмотрел, написал конспект и думаешь: «Ну все же ясно, как это можно было не понять сразу! )))
«"...Школа дает отличный фундамент для старта в IT сфере (даже новичкам). Преподаватель Эржан, мастер своего дела) Мне всё заходило, что не заходило переспрашивала) Остались одни положительные эмоции) По поводу устройства на работу, всё зависит от вас, захотите устроитесь, не захотите не устроитесь. Нужно всё время развиваться и познавать что-то новое (развивать свои скилы). И еще важно - это поставить пред собой цель, и тогда точно всё получится)".»
«Безумно довольна обучением в Clear Code School! Эржан потрясающий преподаватель))учит не просто front-end, учит быть настоящим профессионалом своего дела))уроки с ним очень мотивируют и вдохновляют! Когда курс закончился даже уходить не хотелось)) спасибо за все!))Курсы Clear Code School буду рекомендовать всем!»
«Закончила курсы Front-end у преподавателя Эржан и осталась очень довольна)) теплая и дружественная обстановка в школе, преподаватель преподносит материал доступно и понятно для каждого, помогает в случаях, если что-то не получается))темы уроков хорошо подобраны и вся информация обязательно пригодится в дальнейшем) рекомендую всем, приходите в Clear Code School, станете крутыми специалистами!»
«Недавно закончил курс «Front-End: HTML+CSS+JS», преподаватель Эржан. Курсом остался очень доволен. До этого никогда не интересовался фронт-эндом, и даже не знал что это такое. Но Эржан настолько все доходчиво объяснял, что я все понимал и всерьёз заинтересовался данным направлением. По окончанию курса знаний хватает, что бы самому создавать простейшие сайты и искать работу. Если кто-то интересуется данным направлением, то обязательно идите учиться в Clear Code School к Эржан!»