
frontendmasters
FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.
Мы начнем с краткого обзора использования Flexbox для создания сложной веб-страницы. Мы рассмотрим, как решить, как писать макет на основе скриншотов желаемого результата. Мы также создадим кнопку гамбургера для нашей навигации с использованием только CSS-подхода - JavaScript не требуется.
Мы быстро перейдем к введению в calc (), способности выполнять математику непосредственно в CSS, включая ее преимущества и требования. Мы также рассмотрим пользовательские свойства (переменные CSS). Хотя многие переменные принципы верны, есть несколько интересных особенностей, связанных с каскадом. Мы также обсудим, когда использовать calc () и пользовательские свойства и их эквиваленты в Sass. Спойлер: это не просто поддержка браузера!
Мы применим все то, что мы только что узнали о calc () и пользовательских свойствах, к 4-колоночной грид-системе на основе Flexbox, которую мы писали в моем предыдущем курсе Flexbox и Grid. Наконец, мы применим эти принципы к домашней странице, которую мы создали ранее.
Во второй половине семинара мы рассмотрим модульные шкалы типов, которые создадут алгоритм для наших размеров шрифтов. Мы применим эти масштабы к нашему дизайну, используя эти принципы с помощью calc () и пользовательских свойств.
Наконец, мы рассмотрим таблицы и формы, а также влияние адаптивного дизайна на эти элементы. Как вы можете сочетать правильную разметку таблицы HTML с адаптивным дизайном? Это проще, чем вы думаете, и есть несколько возможных подходов. Мы также рассмотрим макеты форм и то, как их можно быстро и легко адаптировать.
FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.
Джен Крамер преподает HTML и CSS для всех уровней более 20 лет. Ранее она была лектором в Гарвардском университете, совмещая это с работой фрилансера по веб-дизайну. Джен также является автором более 70 видео-курсов и трех книг. В настоящее время она занимает должность директора по дизайну обучения и технологиям в AnnieCannons - некоммерческой организации, которая обучает, подготавливает и помогает людям, пострадавшим от торговли людьми, начать у
Мы начнем с быстрого обзора текущего стандарта отрасли: сеток построеной на флоатах . Мы рассмотрим как быстро создать такую сетку плюс преимущества и недостатки такого подхода. Мы также рассмотрим медиа-запросы и отзывчивые изображения, включая новый тег и Picturefill. Мы быстро перейдем к Flexbox, сначала исследуем как работает Flexbox, так как он сильно отличается от float. Мы будем верстать простую сетчатую систему с помощью Flexbox, и рассмо
Этот урок охватывает flexbox, который должен охватывать большинство ситуаций размещения на вашем сайте. С переменными и стандартными значениями по умолчанию этот mixin будет охватывать большинство проблем выравнивания и заменять необходимость в таблицах на все время. Нужна колонка с каждым элементом, равномерно распределенным, но начинающим выравнивание сверху? Нет проблем! Как насчет строки с элементами, равномерно распределенными, а также равны
Изучите CSS в первый раз или поднимите свои навыки CSS и погрузитесь еще глубже. КАЖДЫЙ веб-разработчик должен знать CSS.CSS - сокращение от Cascading Style Sheets - это «язык программирования», который вы используете, чтобы превратить ваши необработанные HTML-страницы в настоящие красивые веб-сайты.Этот курс охватывает все это - мы начинаем с самых основ (что такое CSS?) Как это работает? Как вы его используете? и постепенно погружай
CSS Layout полностью разочаровывает. Скорее всего вы столкнетесь с борьбой с CSS в течение нескольких часов, а может и дней, на проблемном макета, который сначала казался простым, но оказался безумно сложным. В этом курсе вы познакомитесь с некоторыми передовыми методами CSS, которые покажут вам, как решать реальные проблемы, с которыми вы, вероятно, столкнетесь в своих приложениях. Мы рассмотрим некоторые из менее известных функций CSS, поэто
CSS Grid (Сетки) - это новая система компоновки элементов в CSS! Это не фреймворк или библиотека - это дополнение к языку, которое позволяет нам быстро создавать гибкие двухмерные макеты.Мы можем использовать ее для размещения, выравнивания и дизайна верстки так, как ранее было просто невозможно с помощью флоатов или flexbox.CSS-сетка может показаться немного сложной с новыми идеями синтаксиса и макета, но она довольно проста и может быть разбита