На этом двухдневном воркшопе вы научитесь создавать полноценный адаптивный веб-сайт с нуля, используя современные методы веб-разработки. Под руководством Кевина Пауэлла вы пройдете весь процесс: от анализа дизайна и планирования до публикации сайта. Также будут рассмотрены лучшие практики и продвинутые темы, такие как анимации и переходы.
Проект веб-разработки: персональный сайт-портфолио
Web Development Project: Personal Portfolio Website
Создайте персональный сайт-портфолио, чтобы укрепить свои знания основ через практический проект. Реализуйте руководство по стилям и адаптивные макеты для настольных компьютеров, планшетов и мобильных устройств. Используйте новейшие техники CSS, такие как CSS-переменные, flexbox, grid и медиа-запросы, чтобы продемонстрировать свои лучшие работы!
Изучите макеты CSS в глубину, включая Grid и Subgrid, Flexbox, техники адаптивных изображений, медиа-запросы и запросы контейнера. Научитесь применять эти техники к вашему следующему веб-сайту, даже если вы раньше не работали с макетами CSS.
На этом семинаре вы узнаете, как использовать Tailwind CSS для создания адаптивных дизайнов, поддержки темной темы и стилизации компонентов в ваших веб-приложениях. Вы также научитесь расширять Tailwind CSS для создания собственных компонентов и утилит.
Ищете практику верстки CSS? Присоединяйтесь к Джен Крамер и создайте несколько различных адаптивных макетов на основе предоставленных ресурсов, целей проекта и ожиданий. Для решения любой из этих проблем с макетом не требуется JavaScript. Каждое задание становится все сложнее. В первой задаче мы создадим некоторый базовый стиль, который поможет решить другие задачи. Последнее задание включает в себя 5 различных макетов с единой кодовой базой HTML
Вы изо всех сил пытаетесь применить стили к своим веб-сайтам? Вы беспокоитесь, когда вас просят воплотить дизайн в реальность? Хотите чувствовать себя уверенно при написании и отладке CSS? Этот курс для вас! Мы рассмотрим основы CSS, такие как цвет, типографика, позиционирование и z-индекс. Мы также узнаем, как смотреть на визуальный дизайн и превращать его в код.
Устали от обычных макетов? Неуверены, как сделать их более интересными? Этот семинар именно для вас! Присоединяйтесь к Джен на два насыщенных дня, в ходе которых вы создадите три различных отзывчивых веб-сайта для вымышленной группы Magenta Lime.
HTML - это мост между контентом и кодом. Большая буква «С» в CSS означает каскад. К сожалению, мало времени тратится на изучение того, что означает любое из этих понятий, или их влияние на ваш код. В этом курсе вы научитесь использовать семантический HTML, селекторы, наследование и каскадирование для создания веб-страниц с более компактным кодом и более эффективным стилем.
Анимация пользовательского интерфейса играет важную роль для веб-приложений и веб-сайтов в улучшении взаимодействия с пользователем. Но создание анимации может быть трудным или чрезмерным. На этом курсе мы изучим основы CSS-анимации и перейдем к продвинутым концепциям, таким как оркестровка и хореография. Мы также изучим принципы моушн-дизайна, которые сделают все наши анимации последовательными и продуманными.
Адаптивный веб-дизайн с помощью Flexbox и CSS Grid, v2
Responsive Web Design with Flexbox & CSS Grid, v2
Макеты страниц - это сердце любого веб-сайта или приложения. В современной сети есть несколько вариантов создания макетов, каждый со своими положительными и отрицательными характеристиками. Выполнив множество упражнений и попрактиковавшись, вы освоите спецификации Flexbox и Grid, а также адаптивные изображения, применяя их к повседневным макетам страниц.
