Видео скринкасты 2025, Январь

У нас есть восемь вкладок навигации верхнего уровня, но «работает» только «Главная». Чтобы у нас было несколько страниц для работы, мы убираем некоторые страницы для "

Насколько я помню, я использовал Google Code Prettify, чтобы применить подсветку синтаксиса к блоку кода в CSS-Tricks. Вы знаете, где в строке вроде "

Мы только что установили Prism.js и все заработало. В этом скринкасте мы находим тему под названием Tomorrow Theme и добавляем ее цвета синтаксису "

Мы немного поработали над заголовками, но мы рассмотрим их подробнее в этом скринкасте. Заголовки - чертовски важный аспект любого сайта. Сделано отлично,"

Теперь, когда у нас есть область для сообщений в блоге, с которой можно работать, мы действительно можем заняться типографикой сообщений в блоге. Пожалуй, самая важная типографика на сайте, поскольку она "

Я думаю, что очень хорошо иметь отдельный файл (.scss), предназначенный для подавляющего большинства типографских материалов на сайте. В Normalize довольно много типографики "

Typecast (в бета-версии на момент съемок) - действительно отличное веб-приложение для игры с веб-типографикой. Это отличный интерфейс для игры "

Продолжая концепцию «Не переусердствуйте с сетками», мы получаем желоба в сетке, просто используя некоторые простые отступы. Мы сохраняем номер заполнения "

Прежде чем мы поработаем над типографикой, я подумал, что мы исправим раздражающую вещь, когда изображения вылетают за пределы области статьи и сетки. С помощью"

Теперь, когда у нас есть собственный локальный домен, мы можем использовать PHP. «P» в MAMP означает «PHP» =). Использование PHP означает, что мы можем использовать include. Например: Наш "

Мы могли бы написать собственный Sass @mixins, чтобы помочь с CSS3 (например, с градиентами), но уже существует фреймворк Sass под названием Compass, который:

Дизайн сайта очень похож на сетку. Наши модули будут очень аккуратно выложены в сетку. Но разве сетки не сложны и не странны? И, может быть, мы "

В этом супер-быстром скринкасте мы используем MAMP для настройки URL-адреса, который мы можем использовать для локальной разработки. Это полезно по ряду причин: мы можем ссылаться на "

Мы представляем концепцию запросов @media в CSS. Многое из того, что позволяет нам использовать Sass в этом проекте, - это оставаться СУХИМИ (не повторяться). Мы сделали"

Мы начинаем с небольшой настройки типа логотипа, а затем переходим к добавлению значков в основную навигацию. Когда мы проектировали навигацию в Photoshop (видео "

Мы создали новый комплект в Typekit для v10. Для брендинга мы сейчас будем использовать Proxima Nova Soft и некоторые другие шрифты, которые максимально похожи на шрифты HF&J в нашем "

Пока что настоящий веб-сайт совсем не похож на наш дизайн в Photoshop. В этом скринкасте мы подробно рассказываем об этом, начиная с "

Мы использовали некоторые приемы позиционирования, чтобы выровнять левый край логотипа и область основного содержимого, при этом заголовок по-прежнему соприкасается с левым краем "

Удаление CSS агента пользователя (по умолчанию) из большинства элементов обычно является хорошей идеей. Это давно сделали "универсальные" перезагрузки или вещи вроде Эрика "

Смотря на наш макет Photoshop, мы пишем начало написания HTML, чтобы описать то, на что мы смотрим. Мы, конечно, используем HTML5 всякий раз, когда он делает "

Мы начинаем вставлять текст в основную навигацию, просто чтобы посмотреть, как он подойдет, поработаем над размерами, цветами и т. Д. Часть текста умещается довольно плотно "

Мы, конечно, не «закончили» в Photoshop этот дизайн навсегда, но у нас есть достаточно, над чем можно поработать, чтобы приступить к созданию этого дизайна в браузере. После"

Начинаем проектировать верхнюю (основную) навигацию сайта. Мы начинаем с экрана размером с рабочий стол (с произвольной шириной), но мы "

Мы добавляем несколько дополнительных слоев под основным заголовком / блоком брендинга, чтобы придать вид «стопки бумаг». Никакой большой метафоры или чего-то такого, это просто добавляет визуального "

Весь сайт будет построен на "модулях". Каждая мелочь будет буквально помещена в коробку (как визуально, так и в конечном итоге в коде). Мы"

Это аудиозапись разговора по Skype между мной и Эрин Киссане. Эрин написала книгу о контент-стратегии, так что мне посчастливилось получить ее помощь и "

Дизайн в браузере - это круто и все такое, но работа в Photoshop позволяет мне проявлять самые творческие способности тогда, когда мне это нужно больше всего: когда я смотрю на пустой холст ».

Добро пожаловать! Это будет настоящее путешествие, и, как и все путешествия, оно начинается с одного шага. Наш первый шаг - провести инвентаризацию бит "

Этот редизайн - это не редизайн только ради редизайна. Я хочу улучшить сайт всеми возможными способами, которыми вы можете улучшить сайт. Один из"

Мы уже говорили об оптимизации SVG вручную. Выбор вручную деталей и элементов, которые можно объединить или удалить. В этом"