Минск
Войти
 

Профессиональная верстка на ReactJS

Организатор: IT-Incubator
Онлайн

Начало: 2 декабря 2024 ещё даты
30 декабря 2024
27 января 2025
24 февраля 2025
Глубокий инженерный подход к обучению, создающий специалистов:

- обучают действующие разработчики
- занятия проходят онлайн
- ежедневная менторская поддержка 1 на 1 в Zoom
- собственная образовательная платформа, дружелюбный и полезный чат-бот
- активное сообщество в Телеграм

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

Курс подойдет всем, кто хочет расширить и углубить знания в современной верстке: от новичков, желающих начать свой путь в IT, до фронтенд-разработчиков, которым необходимо совмещать разработку и профессиональную верстку проектов на React.

Подробные видеоматериалы, менторская видеоподдержка и еженедельные живые онлайн-занятия помогут освоить необходимые навыки даже при незначительном уровне подготовки.

Требуемый начальный уровень знаний - минимальные знания о верстке, тегах и их назначении.
Время проведения: вт 18:00.
 

Результат / будет знать, уметь

  • Систематизируете знания верстки на 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.

    Контакты

    +375 44 565 7493 A1

    it-incubator.io

    В начале беседы сообщите, что нашли информацию на Все Курсы Бай.

    Программа

    Подготовка

    На данном этапе мы установим необходимое программное обеспечение и познакомимся с основами:
    - React;
    - Figma;
    - Styled components;

    А так же узнаем как создать React проект на TypeScript, как и зачем использовать на проекте Git, как добавить репозиторий на GitHub, а так же как выложить проект на GitHub Pages.

    Структура проекта

    На данном этапе мы сделаем самую важную часть всей работы для нашего проекта:
    - сверстаем структуру нашего будущего портфолио;
    - организуем файловую структуру для компонент и подготовим растровые изображения для дальнейшего использования в вебе;
    - создадим svg-спрайт для иконок и научимся грамотно его использовать в React;
    - «нарежем» макет на компоненты и используя Styled components создадим стилизованные компоненты, соблюдая правила семантической html-разметки;
    - добавим favicon для нашего портфолио;
    - на GIT создадим репозиторий и задеплоим проект на github. io.
    Параллельно изучим такие темы, как:
    - семантика и теги, формы;
    - списки и их стилизация и структура;
    - основные единицы измерения;
    - границы;
    - цвета и их форматы;
    - свойство background;
    - центрирование элементов;
    - flexbox layout.

    В итоге у нас получится поддерживаемая и масштабируемая HTML-структура для портфолио, грамотная файловая структура проекта и все необходимые изображения для дальнейшей стилизации.

    Так же у нас найдется несколько макетов других проектов если у вас уже есть портфолио или просто будет желание закрепить полученные знания самостоятельно на практике.

    Стилизация

    На данном этапе в нашем проекте мы:
    - подключим шрифты;
    - настроим файл с кастомными свойствами;
    - добавим стили, как в макете и попутно изучим синтаксис и возможности Styled Сomponents.

    Так же разберем такие темы, как:
    - каскадность и приоритет стилей;
    - свойство display;
    - свойство box-sizing;
    - функция calc() и ее применение;
    - градиенты;
    - тень и свойства box-shadow, text-shadow, filter: -shadow();
    - фильтры и свойста filter и back -filter;
    - трансформации в CSS и свойство transform;
    - позиционирование и свойсво z-index;
    - псевдоэлементы;
    - структурные псевдоклассы; - динамические псевдоклассы;
    - стилизация скролла;
    - свойство cursor;
    - использование сетки GRID.

    Как дополнение познакомимся с таким понятием как контейнер и доступность, рассмотрим 2 способа как красиво обрезать текст, 8 способов как спрятать элемент и как правильно вставлять интерактивные карты Google и Yandex.

    В результате у нас получится статичная desktop-версия портфолио, соответствующая дизайну макета.

    Адаптив

    На данном этапе мы сделаем нашу верстку адаптивной и отзывчивой, чтобы она красиво выглядела на экранах разных устройств (десктоп, планшет, мобильные телефоны). Разберемся, чем адаптивный сайт отличается от отзывчивого. Научимся грамотно использовать директиву @media.

    Рассмотрим так же:
    - медиазапросы;
    - адаптив шрифтов;
    - адаптив изображений;
    - свойство overflow.

    После того, как все будет готово, мы сделаем рефакторинг кода, наведем порядок и проверим нашу верстку на Pixel Perfect.

    В результате наша верстка будет полностью соответствовать макету и будет выглядеть одинаково красиво на разных устройствах.

    Анимация и эффекты

    В последнем модуле мы оживим наше портфолио. Добавим красивых анимаций элементам и динамики интерактивным элементам, а так же подключим и настроим различные внешние библиотеки и добавим эффекты для:

    - открытия / закрытия burger menu;
    - переключения табов;
    - работы слайдера;
    - печатающегося текста (Typewritter-effect);
    - фото на главной странице (React-paralax-tilt);
    - эффекта фона блоков Main и Slogan (Particles);
    - плавного скролла к блокам (React-scroll);
    - кнопки GoTop;
    - плавности при наведении и появлении элементов (Transition);
    - анимации на скролле (React-awesome-reveal);
    - анимации для проектов (FramerMotion)

    В результате у нас получится проект с чистым кодом, адаптивной версткой, сделанной по Pixel Perfect и полностью работающим функционалом.

    Характеристики, актуальность курса, программа могут меняться, поэтому всю необходимую информацию всегда уточняйте у организаторов. Нажмите, чтобы писать о неактуальной информации.

    Пользуясь сайтом вы принимаете Условия пользования сайтом. Для лучшего пользовательского опыта используются файлы cookies. Подробнее

    Файлы cookies (куки) – это небольшие текстовые файлы, которые временно сохраняются на вашем устройстве, когда вы посещаете веб-сайты. Они помогают веб-сайтам запоминать ваши предпочтения, интересы и действия, чтобы улучшить ваш опыт просмотра. Файлы cookies также могут защищать вас от мошенничества и улучшать безопасность веб-сайтов. Вы можете управлять файлами cookies в настройках вашего браузера или устройства.

    У нас на сайте файлы cookies используются для сохранения пользовательских настроек и для маркетинговых целей.

    Вы всегда можете удалить файлы cookies. Например, перейдите в настройки конфиденциальности вашего браузера или в быстром поиске настроек введите 'cookie' или 'куки', вам должно вывести опции управления данными, где вы сможете при необходимости очистить файлы.