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

Дизайн комментариев может показаться очень простым. И это! Но я думаю, что простое в этом случае эффективно. Комментарии - такая важная часть CSS-трюков »

Здесь мы начинаем копаться в Photoshop и проектировать область для комментариев. Мы начинаем сверху, имея в виду сами отдельные комментарии (в отличие от "

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

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

С дизайном области сниппетов «готово» - теперь мы можем перейти к некоторой интерактивности (читай: JavaScript). Мы добавляем супер-неудачный ролловер для ссылок на "

Теперь у нас есть дизайн Photoshop, с которым можно работать для домашней страницы области фрагментов. Его гораздо легче просматривать, чем раньше, но он сохраняет радугу "

Пора погрузиться в область фрагментов! То есть фактическая область его содержания. У нас уже есть заголовок. Область сниппетов очень популярна ".

В этом скринкасте мы завершаем раздел Альманаха. В Альманахе есть довольно четкая иерархия. Он идет: Главная страница> Главная страница альманаха> Недвижимость или выбор> "

Мы прыгнем вперед чуть-чуть вперед. Это довольно обширная серия скринкастов, но это всего лишь 40 часов или около того, и, конечно же, настоящий проект »

Мы уже работали локально в локальном домене (v10.whatup). Пришло время перейти на WordPress. Мы продолжим работать локально »

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

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

Теперь, когда мы боролись за получение надлежащего контента на домашней странице Альманаха, мы можем углубиться в некоторые актуальные стили с помощью CSS. Мы решили пойти "

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

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

Добавлена ​​иллюстрация настраиваемого заголовка для раздела видео, на этот раз от Алиссы Насснер. Мы потратили немного времени на организацию файла Photoshop и "

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

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

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

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

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

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

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

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

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

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

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

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

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

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