Udemy [Udemy] Дизайн и код домашней страницы Twitter с помощью JavaScript, CSS и Figma (2022)

[Trinity]

[Udemy] Дизайн и код домашней страницы Twitter с помощью JavaScript, CSS и Figma (2022)

В этом курсе мы узнаем, как использовать нативную технологию веб-компонентов в своих интересах.

• Создавайте красивые веб-компоненты для Twitter с помощью Figma
• Перенесите все эти красивые дизайны во внешний код с помощью Lit JS.
• Создайте светлый и темный пользовательский интерфейс для домашней страницы Twitter, используя JavaScript и Figma.

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

• Мы не только разработаем компоненты в Figma, но и создадим дизайн-систему для нашего проекта Twitter UI.
• Мы разработаем повторно используемые цвета, типографику и стили теней.
• В конце переносим стили Figma в переменные CSS

Мы узнаем, как использовать Lit JS для разработки нативных общих компонентов .

• Мы узнаем, как инкапсулировать наши HTML и CSS в классы JavaScript, используя Lit JS.
• Мы научимся создавать простые, готовые к будущему нативные веб-компоненты.
• Мы используем только чистый ванильный JavaScript для создания настраиваемых компонентов и применения наших стилей CSS внутри каждого из них.

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

• Мы будем использовать Lit JS, чтобы упростить нашу жизнь, потому что он построен на основе собственного API веб-компонентов.
• Поскольку Lit JS использует собственный API веб-компонентов, наша среда разработки проста, но мощна.
• Это означает, что нам не нужно беспокоиться о Node Modules или сборщиках JavaScript для преобразования нашего синтаксиса в код.

Для кого этот курс:

• Дизайнеры, которые хотят добавить проект Twitter Figma в свое портфолио
• Разработчики, которые хотят перенести компоненты Figma в код
• Разработчики, которые хотят создавать нативные пользовательские компоненты с нуля

Требования

• Продвинутые знания HTML, CSS, JavaScript
• Среднее понимание Figma

Материал на английском языке

Подробнее:

Для просмотра ссылок необходимо выполнить Вход или Регистрация

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.