FRONT-END: HTML+CSS+WP+LESS+JS+REACT.js+Node.js

Курс «Разработка Front-End» сотоит из ряда изучения: HTML5, CSS3, JavaScript(ES6), React.js, WordPress. С их помощью можно создавать пользовательский интерфейс, задавать параметры веб-страницы, и многое другое.

На курсе вы сможете быстро развить навыки Разработчика и Программиста. Полученные знания позволят претендовать на позиции «Верстальщик», «Junior Front-End Developer», «Junior JavaScript Developer». Хорошее начало для успешной профессиональной деятельности! Чтобы стать разработчиком Front-End, нужно быть мастером и развивать в себе способности к дизайну.

Результат, на который учащийся может рассчитывать после обучения на Курсе "Front-End Developer"

На занятиях вы:

уверенно освоите принципы разработки HTML, CSS, Bootstrap, JS, React.js, Less ;
научитесь разрабатывать уникальные и живые дизайны сайтов;
освоите семантическую и адаптивную верстку;
сможете создавать собственные наработки и хранить их в виде framework.

Программирование Front-End больше не будет для вас незнакомым полем деятельности!

БОНУСЫ:

Бесплатный видео курсы по программированию, всем студентам IT CC School.
Подготовка и консультация HR тренером к трудоустройству.
Запись и хранение видеозаписи всех уроков курса.
Онлайн - круглосуточная консультация ментором курса.

Программа

1я тема (Модуль 1: Основы. Верстка статического макета) Знакомство, вводная информация

Знакомство

Что такое IT в целом и какое место занимает front-end в веб разработке в частности. Этапы разработки проекта

Обзор инструментов для разработки

Стртура HTML документа. Основные теги

Особенности HTML5. Понятие кроссбраузерности и валидности

2я тема Основы HTML

Таблицы в HTML

Маркированные,нумерованные списки

Виды ссылок

Форматы изображений

Формы и их элементы

3я тема Основы CSS

Внутренние стили.

Рендеринг страницы. Поведение элементов.

Способы объявления CSS

Комментирование кода

Синтаксис

4я тема Селекторы.Свойства стилей CSS

Свойства Стилей CSS

Селекторы. Глобальные таблицы стилей

Значимость селектора, вес от типа обращения

Взаимоотношение блоков: вложенный, дочерний, соседствующий, родительский.

Группировка стилей CSS

5я тема Пути, изображения, ссылки

Абсолютный и относительный путь

Внешние таблицы стилей. Импорт стилей

Вложенность

Приорететы стилей в CSS

Ссылки. Многостраничные сайты

FTP. Работа с сервером.

6я тема Продвинутое взаимодействие элементов

Псевдоклассы

Выстраивание элементов с использованием свойства inline-block. Особенности

Выстраивание элементов с использованием свойства float. Отмена обтекания. Распорка.

Псевдоэлементы. Использование, назначение. Использование псевдоэлемента, как распорки.

Сравнение способов взаимодействия. Плюсы и минусы

7я тема Позиционирование. Шрифты

Позиционирование элементов, свойство position.

static, relative, absolute, fixed, sticky: детальное рассмотрение каждого поведения

Выравнивание absolute и fixed.

Использование нестандартных шрифтов. Как это “безопасные шрифты”

google fonts обзор, применение

8я тема Меню. Картинки-фоны

Построение меню. Теги

Многоуровневое, выпадающее меню

Что такое фоновая картинка. Отличия от image.

Зона отображения фона

Позиционирование, размеры фоновой картинки

9я тема Формирование блочной модел

Свойство Display

Формирование блочной модели

Позиционирование блоков

Работа с блочным макетом

10я тема Геометрические фигуры на CSS

Назначение, применение, анимирование

Скругления, примеры использования.

Бордеры. Треугольники

Тени блоков

Составные фигуры. Рисование картинок.

11я тема Формы. SVG

Формы. Назначение, принцип работы

Стилизация элементов форм

Новые элементы в HTML5

Стилизация checkbox

Векторная графика. SVG. Анимирование

12я тема Макеты. Основы работы с макетами

Тестирование по пройденной теории

Семантические теги. Назначение, использование, преимущества

Ускорение и автоматизация верстки

Программы для работы с макетами: PhotoShop, figma, zeplin

Принцип верстки макета

13я тема Контроль макета. Инструменты проверки

Проверка сделанного. Рекомендации. Индивидуальные консультации

Идеальность верстки.

Особенности верстки под IE. Скрипты

Условное комментирование

Сдача макетов

14я тема (Модуль 2: Адаптив. Фреймворки. JS. Less.) Адаптивная верстка

Понятие адаптивной верстки. История появления. “Резиновые сайты”

Поведение контента при изменении размеров.

Медиазапросы, как условия для изменения верстки. Варианты использования.

Принципы построение адаптивной верстки. Desktop and mobile first. Сравнение.

Сравнение breakpoints, популярные брикпойнты

DPR. Viewport

Визуальные особенности мобильных версий

Тестирование, инструменты для тестирования и дебаггинга: mobile-friendly test, google chrome

15я тема Flexbox

Что такое FlexBox и зачем он нужен.

Свойства FlexBox

Особенности Bootstrap 4. Миграция

Работа с Bootstrap4

16я тема FrameWorks. Bootstrap. Less

Что такое FrameWork, актуальность использования.

Bootstrap. Подключение, принцип работы

Bootstrap компоненты.

Less(Принцип работы, Миксины, Переменные).

17я тема Bootstrap JS. Owl carousel. AIDA. Fullpage js

Bootstrap JS. Owl carousel.

Недостатки BS slider. owl carousel, как аналог. Преимущества, подключение, опции

JS фреймворк Fullpage js

18я тема Адаптивный Макет. Практика

Проверка сделанного. Рекомендации. Индивидуальные консультации

Идеальность верстки в адаптиве

Исправление популярных ошибок

Сдача макетов

19я тема WordPress

Что такое WordPress

Посадка верстки на WordPress

Functions.php

Создаем свою тему

Изменияемые поля на сайте

Advanced Custom Fields

20я тема Модуль 3(JavaScript Основы)

Что такое JS, как работает

Основы синтаксиса. Построение функции.

Зависимые функции js

Литература по теме

21я тема Переменные. Условия If else. Циклы while for

Переменные. Кеширование

Условия (if else)

Популярные функции на примерах

Циклы while for

22я тема Функции , Стрелочные функции

Функции

Стрелочные функции

Методы функции

start_date

23я тема Работа с DOM

Методы getElement(s).

Методы querySelector

Работа с DOM Деревом

24я тема Асинхронный JS

Работа с Ajax.

Async Await.

Promise.

25я тема Обьекты в JS

Массивы.

Обьекты в JS.

Тип данных Symbol.

Работа с объектами.

Рекомендации по самостоятельному изучению JS. Подборка литературы.

26я тема ООП в JS

Prototype.

Классы ES6.

Наследование.

27я тема NodeJS, Webpack

Установка терминала

Принцип работы NodeJS.

Работа с компонентами.

Webpack(Основы работы сборщика).

Собираем свой проект с помощью Webpack.

28я тема Основы React.js

Запуск первого проекта

Компонентный подход. Как это работает?

Жизненный цикл компонента

29я тема Стилизация компонента

Синтаксис Jsx

Подключение модульного css

30я тема Состояния компонентов

Локальное состояние компонента

Глобальное состояние компонента

Props

31я тема Функциональный подход

React hoocks

Жизненный цикл функциональных компонентов

React Router

Группа №1

Расписание

Понедельник 14:00 - 16:00

Среда 14:00 - 16:00

Пятница 14:00 - 16:00

Продолжительность курса

6 месяцев(123 часа)

Группа №2

Расписание

Вторник 16:00 - 18:00

Четверг 16:00 - 18:00

Суббота 16:00 - 18:00

Продолжительность курса

6 месяцев (123 часа)

6000/мес

*продолжительность курса 6 месяцев

Группа №1

Группа №2

Старт новой группы

Дни занятий: Понедельник, Среда, Пятница

01.12.2023

старт по мере комплектации

Старт новой группы

Дни занятий: Вторник, Четверг, Суббота

01.12.2023

старт по мере комплектации

Преподаватели курса

Firtsname Secondname

About

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Software Skills

Experience

about 6 years in web‑design development

Почему я должен/должна учиться у вас?

В нашей школе самые демократичные цены, ментора действующие разработчики, 80% практики и максимум материала.
Какие базовые знания у меня должны быть?

Достаточно иметь желание обучаться новому ,ноутбук, и быть уверенным пользователем ПК!
Я хочу учиться но у меня есть работа, смогу я совмещать?

Необходимо уделять минимум 3 часа в день на учебу. Для достижения видимых результатов. Так же можем предложить вечерние группы обучения.
Смогу ли я освоить это с нуля?

Да, в нашу школу приходят с абсолютно нулевой базой знаний. Наша школа и методика преподавания нацелена на новичков в программировании.
Нужно ли знать математику/английский?

Это было бы плюсом, но на начальных парах не обязательно.
Что делать если я не знаю какое направление выбрать?

Вы можете пройти бесплатный пробный урок, где мы поможем сможем помочь Вам выбрать ваше направление.
Нужен ли мне свой ноутбук?

Да. Необходимо иметь свой ноутбук. Характеристики: минимум 4 ГБ оперативной памяти, 2-х ядерный процессор. В идеале: 8 ГБ оперативной памяти и процессор с 4 ядрами.

Отзывы студентов

Мирлан Ажибаев

«Пришел на данный курс не имея базовых знаний в Front-End. Вышел с хорошим багажом знаний, достаточным для дальнейшего саморазвития в Front-End. Теперь о преподавателе, Эржан дает материал грамотно, лаконично и стртурированно, часто задает вопрос ""Понятно?"" если вдруг тишина в группе он повторяет ""Ну говорите если не понятно"", а затем приводит пример изложенного материала взаимодействуя с аудиторией. Даже если не понял после примера, можно пересмотреть видео в домашних условиях где тебя никто не отвлекает и разобраться в теме. Об аудитории: только после ремонта, первые пол месяца пахло краской, поэтому ходили заниматься в главный офис. Понравился куллер с постоянно подогретой водой для чая, кофе. Хорошие условия для обучения.

Исмаил Касымов

«Очень насыщенный, интересный и дающий уверенность в своих силах курс. Огромнейший плюс – это видеозапись каждого урока. Если бы их не было, я бы и половины материала не усвоил, потому что на каждом уроке дается очень много, и человеку неподготовленному сложно сразу въехать в суть. Ну или я просто часто отвлекался на уроке )) Пока пытаешься осознать суть и смириться с отрицательным марджином, преподаватель в объяснениях уже ушел вперед. А дома сел спокойненько, пересмотрел, написал конспект и думаешь: «Ну все же ясно, как это можно было не понять сразу! )))

Наргиза Касымова

«"...Школа дает отличный фундамент для старта в IT сфере (даже новичкам). Преподаватель Эржан, мастер своего дела) Мне всё заходило, что не заходило переспрашивала) Остались одни положительные эмоции) По поводу устройства на работу, всё зависит от вас, захотите устроитесь, не захотите не устроитесь. Нужно всё время развиваться и познавать что-то новое (развивать свои скилы). И еще важно - это поставить пред собой цель, и тогда точно всё получится)".»

Дариха Темирова

«Безумно довольна обучением в IT CC SCHOOL! Эржан потрясающий преподаватель))учит не просто front-end, учит быть настоящим профессионалом своего дела))уроки с ним очень мотивируют и вдохновляют! Когда курс закончился даже уходить не хотелось)) спасибо за все!))Курсы IT CC SCHOOL буду рекомендовать всем!»

Салтанат Камелова

«Закончила курсы Front-end у преподавателя Эржан и осталась очень довольна)) теплая и дружественная обстановка в школе, преподаватель преподносит материал доступно и понятно для каждого, помогает в случаях, если что-то не получается))темы уроков хорошо подобраны и вся информация обязательно пригодится в дальнейшем) рекомендую всем, приходите в IT CC School, станете крутыми специалистами!»

Тимур Сыдыков

«Недавно закончил курс «Front-End: HTML+CSS+JS», преподаватель Эржан. Курсом остался очень доволен. До этого никогда не интересовался фронт-эндом, и даже не знал что это такое. Но Эржан настолько все доходчиво объяснял, что я все понимал и всерьёз заинтересовался данным направлением. По окончанию курса знаний хватает, что бы самому создавать простейшие сайты и искать работу. Если кто-то интересуется данным направлением, то обязательно идите учиться в IT CC School к Эржан!»