Видео скринкасты 2024, Декабрь

Я думаю, что впервые в этой серии мы собираемся добавить некоторые новые вещи в дизайн напрямую, работая в браузере (не начиная с Photoshop "

Дизайн поиска работает нормально, пока мы не перейдем к размеру нашего "медвежонка" (маленький мобильный). Мы должны там сделать что-то другое. Мы освобождаем место "

Верхний модуль на главной боковой панели сайта принадлежит Treehouse, как главному спонсору CSS-Tricks. Основываясь на моем разговоре с Райаном Карсоном "

Мы закончили с вполне приличным виджетом для опроса. Типографика чистая, и все удобно. Однако это было не совсем интересно или весело. Мы"

Опросы по CSS-Tricks имеют давнюю традицию. Они веселые, собирают важные важные данные и увеличивают количество пользователей, посещающих сайт. Вступление FTW! "

Мы уже потратили немного времени на создание заглушек для страниц, чтобы наша навигация работала (видео № 030), и вы могли перемещаться по сайту, но что находится на этих подменю?

У нас есть сетка для галереи. К сожалению, загрузка немного резкая и неустойчивая. Это потому, что столбцы CSS3 предназначены для "

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

В котором мы выясняем проблемы, с которыми мы столкнулись с правильной загрузкой макета столбца. Исправление заключалось в удалении CSS, из-за которого "

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

У нас хорошее начало адаптивного дизайна. Меню на самых маленьких экранах разбивается на сетку 2х4. Он хорошо помещается на экране, но "

До сих пор мы вносили изменения в код локально, не используя никакого контроля версий. С ростом сложности этого сайта это становится "

Помимо главной страницы, на сайте есть семь различных основных областей. Итак, я нанял семь разных иллюстраторов для создания дизайна. Это мы первые "

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

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

Когда я работал над этим дизайном, был выпущен jQuery 1.8. Это всего лишь небольшое видео, чтобы убедиться в том, что подобные вещи происходят во время разработки сайтов "

На иллюстрации Ника было три разных слоя голов. Это просто немного разные вариации. Мы могли бы заменить изображения анимацией "

Как вы знаете, некоторые рекламные объявления на CSS-Tricks являются своего рода "самоуправляемыми", как у основного спонсора Treehouse. Я взял это, потому что это всего лишь сингл "

Теперь, когда мы точно знаем, с какими зонами мы работаем, мы возвращаемся в Photoshop и насмехаемся над тем, как мы хотим, чтобы эти рекламные зоны выглядели. У нас есть прецедент "

Единственное, чего сейчас не хватает в заголовке нашего таможенного форума, так это той части, которая на самом деле говорит «Форумы»! Ник проиллюстрировал руку с табличкой, которая имела в виду "

У нас есть макет того, как мы хотим, чтобы наши зоны BuySellAds выглядели, поэтому давайте приступим к его созданию по-настоящему. На сайте BuySellAds есть нужный нам код "

У нас есть еще одна зона BSA, которую нужно интегрировать в сайт. Это должно быть немного проще, потому что у нас уже есть JavaScript, и это просто "

Имея готовый дизайн нижнего колонтитула в Photoshop, мы можем начать встраивать его в наш статический макет HTML и CSS. Первый шаг - дать "

Мы отправляемся в великое путешествие - футер! У CSS-Tricks всегда был большой причудливый нижний колонтитул, и этот дизайн не станет исключением. Это не чисто "

В этом скринкасте мы перейдем к еще одному бизнесу Photoshoppin, разместив самый нижний колонтитул со ссылками на два моих самых больших проекта, CodePen "

Мы работаем над созданием дизайна нижнего колонтитула в Photoshop. Напоминание: я работаю в Photoshop, потому что чувствую себя более творчески, прежде чем перепрыгну "

Это последняя работа Photoshop, которую мы сделаем специально для нижнего колонтитула, прежде чем мы перейдем к его созданию. В этом скринкасте мы "

Имея структуру HTML для нижнего колонтитула, у нас есть все, что нам нужно, чтобы начать стилизовать и сделать нижний колонтитул похожим на то, что мы разработали в Photoshop ».

Пришел заголовок с фрагментами, на этот раз Рейганом Рэем. На этот раз мы потратим немного времени на Photoshop, чтобы убедиться, что мы "

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