Профессиональная верстка на ReactJS
- обучают действующие разработчики
- занятия проходят онлайн
- ежедневная менторская поддержка 1 на 1 в Zoom
- собственная образовательная платформа, дружелюбный и полезный чат-бот
- активное сообщество в Телеграм
Кому подойдет этот курс?
Для начала обучения на курсе достаточно обладать минимальными знаниями о верстке, тегах и их назначении, иметь аккаунт на GitHub, и, конечно же, желание и мотивацию учиться.
Курс подойдет всем, кто хочет расширить и углубить знания в современной верстке: от новичков, желающих начать свой путь в IT, до фронтенд-разработчиков, которым необходимо совмещать разработку и профессиональную верстку проектов на React.
Подробные видеоматериалы, менторская видеоподдержка и еженедельные живые онлайн-занятия помогут освоить необходимые навыки даже при незначительном уровне подготовки.
Результат / будет знать, уметь
- Систематизируете знания верстки на 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;
- 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 и полностью работающим функционалом.
Характеристики, актуальность курса, программа могут меняться, необходимую информацию уточняйте у организаторов. Написать о неактуальной информации.