Дізнайтеся CSS Flexbox на Lynda.com

• Квітня 29, 2024

Через десять років, які є все життя в Інтернеті, ми вирішили надати веб-сайту MUSED Literary Review новий вигляд. Звичайно, ми хотіли використовувати новітні HTML та CSS, а це означає використовувати Flexbox, CSS Grid та чуйний веб-дизайн.

Завдяки Lynda.com, щоб досягти швидкості, не знадобилося багато часу. Нижче наведено лише декілька найкращих відео уроків, які допомогли мені розробити новий вигляд MUSED.

Розширені чуйні макети з CSS Flexbox
Мортен Ранд-Хендріксен
У цьому курсі, заснованому на проекті, автор проводить вас покроково, будуючи меню Flexbox, чуйні розкладки карт, макет Holy Grail та інтерактивні компоненти.

Розширені макети CSS з сіткою
Мортен Ранд-Хендріксен
У цьому курсі ви багато чого навчитесь. Автор починає з основ CSS Grid та планування макетів сітки. Тоді ви готові побудувати макет з декількома стовпцями та повноцінний макет одного стовпця. Далі ви дізнаєтесь, як конструювати різні макети картки та позаекранну панель навігації, яка при необхідності ковзає у поле перегляду.

CSS Основне навчання 3
Крістіна Труонг
У цьому курсі ви навчитеся використовувати CSS Grid та Flexbox для створення чуйних макетів. Ви також дізнаєтесь про те, як підготувати веб-зображення до зображень Retina та векторних зображень SVG. Потім автор переходить до простої анімації CSS, чуйної типографії та доступності.

CSS Flexbox перший погляд
Джеймс Вільямсон
Цей курс дає вам крок за кроком, коли ви дізнаєтесь увесь синтаксис модуля компонування CSS Flexbox. Автор обговорює, що Flexbox може зробити, та поточну підтримку браузера. Потім він ретельно обговорює такі теми, як потік елементів, загортання вмісту, вирівнювання елементів і гніздування гнучких контейнерів.

CSS Grid First Look
Мортен Ранд-Хендріксен
У цьому курсі ви дізнаєтесь новий і вдосконалений спосіб створення двовимірних макетів сітки. Починаючи з основ використання CSS Grid для побудови чуйних макетів сітки, автор висвітлює те, що вам потрібно знати, щоб створити як Інтернет-журнал, так і триколонний макет.

Створення чуйних форм за допомогою Flexbox
Джеймс Вільямсон
Ви не можете створити веб-сайт без форм. Форми повинні відповідати всім типам і розмірам екранів, як і решта сайту. Вільямсон вчить, як використовувати модель коробки CSS Flexbox для створення та стильового реагування веб-форм. Він починається з простої форми пошуку і формує до великої форми з двома стовпцями.

Чуйні зображення
Мортен Ранд-Хендріксен
Якщо ви використовуєте Wordpress, ви знаєте, що він автоматично генерує кілька зображень різного розміру для кожного зображення, яке ви завантажуєте в систему. Чому? Цей курс пояснить поняття, що стоїть за чуйними зображеннями та способи їх використання на власному веб-сайті.