Відеосюжети 2025, Січень
У нас є вісім навігаційних вкладок найвищого рівня, але головний - це єдиний, який «працює». Щоб у нас було кілька сторінок, з якими ми працюємо, ми видаляємо деякі сторінки для "
Наскільки я пам’ятаю, я використовував Google Code Prettify, щоб застосувати підсвічування синтаксису до блоку коду на CSS-Tricks. Ви знаєте, де в рядку типу "
Ми щойно встановили Prism.js і запрацювали. У цьому скрінкасті ми знаходимо тему під назвою The Tomorrow Theme і вкладаємо її кольори в синтаксис "
Ми трохи попрацювали над заголовками, але ми детальніше розглянемо те, що в цьому скрінкасті. Заголовки є надзвичайно важливим аспектом будь-якого сайту. Зроблено добре "
Тепер, коли у нас є область публікацій у блозі, ми можемо по-справжньому ввести типографіку публікацій у блозі. Можливо, найважливіша типографіка на сайті, як це "
Думаю, дуже приємно мати на сайті окремий файл (.scss), який призначений для переважної більшості типографіки. Normalize має досить багато типографіки "
Typecast (у бета-версії на момент зйомок) - це справді акуратний веб-додаток для гри з веб-типографікою. Це дає чудовий інтерфейс для ігор "
Продовжуючи концепцію "Не переосмислюйте сітки", ми отримуємо жолоби, що працюють у сітці, просто використовуючи деякі прості прокладки. Ми зберігаємо номер заповнення "
Перш ніж виконати певну типографічну роботу, я думав, що ми виправимо настирливу ситуацію, коли зображення потрапляють поза область статті та сітки. Використовуючи "
Тепер, коли ми використовуємо власний локальний домен, ми можемо використовувати PHP. "P" у MAMP означає "PHP" =). Використання PHP означає, що ми можемо використовувати включення. Наприклад: наш "
Ми могли б написати свій власний 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 вручну. Вибір вручну деталей та типів речей, які можна поєднувати чи вилучати. У цьому"