Глубоко проработанный курс по вёрстке, который подойдёт как новичкам, так и опытным фронтенд-разработчикам. Семидневная менторская видеоподдержка и неограниченный доступ к обучающим материалам.
Стоимость:
Длительность курса:
Еженедельные онлайн-занятия
45+ часов обучающих видео
Неограниченный по времени доступ к материалам
Старт:
Профессиональная вёрстка на ReactJS
Главная - Вёрстка на React
9 октября 2023 года
Узнать больше
99 EUR
1 месяц
Доступ к Telegram-сообществу IT-Incubator
Собственный сайт-портфолио
Доступ к видеоподдержке:
2 месяца
Всего мест:
30
Ежедневная менторская видеоподдержка (Zoom)
Для студентов Инкубатора этот курс входит в стоимость обучения Frontend разработке
Доступ к контенту и к нашему комьюнити остается навсегда после прохождения курса
Менторская видеоподдержка (Zoom) и онлайн занятия доступны в течение 8 недель со дня старта группы
Для начала обучения на курсе достаточно обладать поверхностными знаниями о вёрстке, тегах и их назначении, иметь аккаунт на GitHub, и, конечно же, желание и мотивацию учиться.
Курс подойдёт всем, кто хочет расширить и углубить знания в современной вёрстке: от новичков, желающих начать свой путь в IT, до фронтенд-разработчиков, которым необходимо совмещать разработку и профессиональную вёрстку проектов на ReactJS.
Наши подробные видеоматериалы, менторская видеоподдержка и еженедельные живые онлайн-занятия помогут освоить необходимые навыки даже при незначительном уровне подготовки.
Если у вас ещё нет базовых знаний о вёрстке, до начала обучения на курсе посетите наш ближайший вебинар или ⬛ㅤпосмотрите его в записи.
Курс подойдёт всем, кто хочет расширить и углубить знания в современной вёрстке: от новичков, желающих начать свой путь в IT, до фронтенд-разработчиков, которым необходимо совмещать разработку и профессиональную вёрстку проектов на ReactJS.
Наши подробные видеоматериалы, менторская видеоподдержка и еженедельные живые онлайн-занятия помогут освоить необходимые навыки даже при незначительном уровне подготовки.
Если у вас ещё нет базовых знаний о вёрстке, до начала обучения на курсе посетите наш ближайший вебинар или ⬛ㅤпосмотрите его в записи.
Кому подойдет этот курс?
Узнать больше
Чему вы научитесь?
• Систематизируете знания вёрстки на HTML5 и CSS3, в том числе темы, которые вызывают самые большие сложности: позиционирование, псевдоклассы, псевдоэлементы, трансформации, анимации, адаптив.
• Прокачаете вёрстку в самой популярной библиотеке - React.
• Сверстаете портфолио на React (TypeScript) и опубликуете его на GitHub pages.
• Научитесь делать семантическую вёрстку и эффективно использовать Flexbox и Grid.
• Узнаете, как правильно работать с графикой - растровыми изображениями и SVG-спрайтами в React.
• Изучите синтаксис и возможности Styled Components.
• Сделаете интерактивные элементы (те, которые есть именно в вашем проекте) - burger menu, кнопка go top, tabs, accordion, slider, modal, progressbar и т.д.
• Подключите и настроите различные библиотеки - typewriter-effect, react-parallax-tilt, react-tsparticles, react-alice-carousel, react-reveal / AOS.
• Прокачаете вёрстку в самой популярной библиотеке - React.
• Сверстаете портфолио на React (TypeScript) и опубликуете его на GitHub pages.
• Научитесь делать семантическую вёрстку и эффективно использовать Flexbox и Grid.
• Узнаете, как правильно работать с графикой - растровыми изображениями и SVG-спрайтами в React.
• Изучите синтаксис и возможности Styled Components.
• Сделаете интерактивные элементы (те, которые есть именно в вашем проекте) - burger menu, кнопка go top, tabs, accordion, slider, modal, progressbar и т.д.
• Подключите и настроите различные библиотеки - typewriter-effect, react-parallax-tilt, react-tsparticles, react-alice-carousel, react-reveal / AOS.
Что включает курс?
Записанные модули
45+ часов структурированного и глубоко проработанного видеоматериала, а также другой полезный контент в текстовом формате.
Онлайн-занятия
Один раз в неделю в Zoom. Здесь будем разбирать дополнительные темы, делать code review и отвечать на интересующие вас вопросы.
Менторская видеоподдержка
7 дней в неделю в Zoom. Профессиональные верстальщики помогут ответить на технические вопросы и глубже понять изучаемый материал.
Портфолио выпускников
Мы помогаем студентам Инкубатора создавать портфолио своих проектов - это отличное дополнение к CV и ещё одно преимущество при трудоустройстве.
Стек технологий
Figma
Git
Github
Styled Component
React
TypeScript
CSS
HTML
На данном этапе мы установим необходимое программное обеспечение и познакомимся с основами:
- React;
- Figma;
- Styled components;
А так же узнаем как создать React проект на TypeScript, как и зачем использовать на проекте Git, как добавить репозиторий на GitHub, а так же как выложить проект на GitHub Pages.
- React;
- Figma;
- Styled components;
А так же узнаем как создать React проект на TypeScript, как и зачем использовать на проекте Git, как добавить репозиторий на GitHub, а так же как выложить проект на GitHub Pages.
На данном этапе мы сделаем самую важную часть всей работы для нашего проекта:
- сверстаем структуру нашего будущего портфолио;
- организуем файловую структуру для компонент и подготовим растровые изображения для дальнейшего использования в вебе;
- создадим svg-спрайт для иконок и научимся грамотно его использовать в React;
- «нарежем» макет на компоненты и используя Styled components создадим стилизованные компоненты, соблюдая правила семантической html-разметки;
- добавим favicon для нашего портфолио;
- на GIT создадим репозиторий и задеплоим проект на github.io.
Параллельно изучим такие темы, как:
- семантика и теги, формы;
- списки и их стилизация и структура;
- основные единицы измерения;
- границы;
- цвета и их форматы;
- свойство background;
- центрирование элементов;
- flexbox layout.
В итоге у нас получится поддерживаемая и масштабируемая HTML-структура для портфолио, грамотная файловая структура проекта и все необходимые изображения для дальнейшей стилизации.
Так же у нас найдется несколько макетов других проектов если у вас уже есть портфолио или просто будет желание закрепить полученные знания самостоятельно на практике.
- сверстаем структуру нашего будущего портфолио;
- организуем файловую структуру для компонент и подготовим растровые изображения для дальнейшего использования в вебе;
- создадим svg-спрайт для иконок и научимся грамотно его использовать в React;
- «нарежем» макет на компоненты и используя Styled components создадим стилизованные компоненты, соблюдая правила семантической html-разметки;
- добавим favicon для нашего портфолио;
- на GIT создадим репозиторий и задеплоим проект на github.io.
Параллельно изучим такие темы, как:
- семантика и теги, формы;
- списки и их стилизация и структура;
- основные единицы измерения;
- границы;
- цвета и их форматы;
- свойство background;
- центрирование элементов;
- flexbox layout.
В итоге у нас получится поддерживаемая и масштабируемая HTML-структура для портфолио, грамотная файловая структура проекта и все необходимые изображения для дальнейшей стилизации.
Так же у нас найдется несколько макетов других проектов если у вас уже есть портфолио или просто будет желание закрепить полученные знания самостоятельно на практике.
На данном этапе в нашем проекте мы:
- подключим шрифты;
- настроим файл с кастомными свойствами;
- добавим стили, как в макете и попутно изучим синтаксис и возможности Styled Сomponents.
Так же разберем такие темы, как:
- каскадность и приоритет стилей;
- свойство display;
- свойство box-sizing;
- функция calc() и ее применение;
- градиенты;
- тень и свойства box-shadow, text-shadow, filter: drop-shadow();
- фильтры и свойста filter и backdrop-filter;
- трансформации в CSS и свойство transform;
- позиционирование и свойсво z-index;
- псевдоэлементы;
- структурные псевдоклассы;
- динамические псевдоклассы;
- стилизация скролла;
- свойство cursor;
- использование сетки GRID.
Как дополнение познакомимся с таким понятием как контейнер и доступность, рассмотрим 2 способа как красиво обрезать текст, 8 способов как спрятать элемент и как правильно вставлять интерактивные карты Google и Yandex.
В результате у нас получится статичная desktop-версия портфолио, соответствующая дизайну макета.
- подключим шрифты;
- настроим файл с кастомными свойствами;
- добавим стили, как в макете и попутно изучим синтаксис и возможности Styled Сomponents.
Так же разберем такие темы, как:
- каскадность и приоритет стилей;
- свойство display;
- свойство box-sizing;
- функция calc() и ее применение;
- градиенты;
- тень и свойства box-shadow, text-shadow, filter: drop-shadow();
- фильтры и свойста filter и backdrop-filter;
- трансформации в CSS и свойство transform;
- позиционирование и свойсво z-index;
- псевдоэлементы;
- структурные псевдоклассы;
- динамические псевдоклассы;
- стилизация скролла;
- свойство cursor;
- использование сетки GRID.
Как дополнение познакомимся с таким понятием как контейнер и доступность, рассмотрим 2 способа как красиво обрезать текст, 8 способов как спрятать элемент и как правильно вставлять интерактивные карты Google и Yandex.
В результате у нас получится статичная desktop-версия портфолио, соответствующая дизайну макета.
На данном этапе мы сделаем нашу верстку адаптивной и отзывчивой, чтобы она красиво выглядела на экранах разных устройств (десктоп, планшет, мобильные телефоны). Разберемся, чем адаптивный сайт отличается от отзывчивого. Научимся грамотно использовать директиву @media.
Рассмотрим так же:
- медиазапросы;
- адаптив шрифтов;
- адаптив изображений;
- свойство overflow.
После того, как все будет готово, мы сделаем рефакторинг кода, наведем порядок и проверим нашу верстку на Pixel Perfect.
В результате наша верстка будет полностью соответствовать макету и будет выглядеть одинаково красиво на разных устройствах.
Рассмотрим так же:
- медиазапросы;
- адаптив шрифтов;
- адаптив изображений;
- свойство overflow.
После того, как все будет готово, мы сделаем рефакторинг кода, наведем порядок и проверим нашу верстку на Pixel Perfect.
В результате наша верстка будет полностью соответствовать макету и будет выглядеть одинаково красиво на разных устройствах.
В последнем модуле мы оживим наше портфолио. Добавим красивых анимаций элементам и динамики интерактивным элементам, чтобы кнопки нажимались менюшки открывались, слайдеры листались а так же подключим и настроим различные внешние библиотеки и добавим эффекты, такие как:
- burger menu;
- tabs;
- slider;
- эффект печатоющегося текста (Typewritter-effect);
- эффект для фото на главной странице (React-paralax-tilt);
- эффект для фона блоков Main и Slogan (Particles);
- плавный скролл к блокам (React-scroll);
- кнопка GoTop;
- плавные переходы для элементов при наведении и появлении (Transition);
- анимация на скролле (React-awesome-reveal);
- анимация для проектов (FramerMotion)
В результате у нас получится проект с чистым кодом, адаптивной версткой, сделанной по Pixel Perfect и полностью работающим функционалом.
- burger menu;
- tabs;
- slider;
- эффект печатоющегося текста (Typewritter-effect);
- эффект для фото на главной странице (React-paralax-tilt);
- эффект для фона блоков Main и Slogan (Particles);
- плавный скролл к блокам (React-scroll);
- кнопка GoTop;
- плавные переходы для элементов при наведении и появлении (Transition);
- анимация на скролле (React-awesome-reveal);
- анимация для проектов (FramerMotion)
В результате у нас получится проект с чистым кодом, адаптивной версткой, сделанной по Pixel Perfect и полностью работающим функционалом.
FAQ
Первую половину урока преподаватель знакомит студентов с темой, не вошедшей в домашнее задание, а во второй половине отвечает на вопросы студентов.
Да! Доступ к Личному кабинету и всем содержащимся в нём материалам курса остаётся открытым для вас навсегда. Онлайн-занятия и менторская видеоподдержка доступны в течение 8 недель от даты начала обучения.
Да, все занятия записываются и в любое время доступны для студентов в личном кабинете.
После окончания курса студенты получают сертификат о его прохождении.
Нет, все наши материалы, онлайн-занятия и менторская видеоподдержка доступны на русском языке.
Для комфортного обучения рекомендуем операционную систему macOS или Windows 10 (или более позднюю) и минимальный размер ОЗУ – 8 Гб (16 Гб будет ещё лучше).
Да. После успешного окончания курса выпускник сможет претендовать на должность профессионального верстальщика на React, а так же просто на должность верстальщика, так как в нашем курсе глубоко затронута общая концепция вёрстки.
Для оплаты свяжитесь с нашим менеджером.
Наше обучение
Обучение Frontend-разработке
до трудоустройства
до трудоустройства
от 180 EUR\мес
Обучение Backend-разработке
до трудоустройства
до трудоустройства
от 180 EUR\мес
Учебная стажировка
в IT-incubator
в IT-incubator
600 EUR
Профессиональная вёрстка на ReactJS
99 EUR
Путь самурая Backend
БЕСПЛАТНО
Путь самурая Frontend
БЕСПЛАТНО
