Video Screencasts 2025, Tháng BảY

Thiết kế cho các bình luận có thể trông rất đơn giản. Và nó là! Nhưng tôi nghĩ đơn giản là hiệu quả trong trường hợp này. Nhận xét là một phần quan trọng của CSS-Tricks "

Chúng tôi bắt đầu đào sâu về Photoshop ở đây và thiết kế khu vực nhận xét. Chúng tôi bắt đầu ở trên cùng, có nghĩa là các nhận xét cá nhân tự nhận xét (trái ngược với "

Chúng ta bắt đầu bằng cách xem xét một số công việc khó khăn mà tôi đã làm ở hậu trường để rút ra một số việc cần phải làm. Như thêm phần còn lại của "

Chúng tôi sắp hoàn thành việc xây dựng trang chủ của khu vực Đoạn mã của trang web. Ngay lập tức, chúng tôi bắt đầu điều chỉnh mọi thứ và đưa thêm nội dung vào "

Với thiết kế cho khu vực đoạn trích "đã xong" - giờ chúng ta có thể chuyển sang một số tương tác (đọc: JavaScript). Chúng tôi thêm một lần quay đầu siêu khập khiễng cho các liên kết trên "

Bây giờ chúng tôi có một thiết kế Photoshop để làm việc cho trang chủ của khu vực Đoạn mã. Nó dễ duyệt hơn rất nhiều so với trước đây, nhưng vẫn giữ được cầu vồng "

Đã đến lúc đi sâu vào khu vực Đoạn mã! Đó là, khu vực nội dung thực tế của nó. Chúng tôi đã có tiêu đề tại chỗ. Khu vực đoạn trích khá phổ biến. "

Trong video truyền hình này, chúng tôi kết thúc phần Almanac. Có một thứ bậc khá rõ ràng trong Almanac. Nó đi: Trang chủ> Trang chủ Almanac> Thuộc tính hoặc Bộ chọn> "

Chúng tôi nhảy về phía trước chỉ một chút ở đây. Đây là một series screencast khá toàn diện, nhưng nó chỉ có 40 giờ hoặc lâu hơn và tất nhiên là dự án thực tế này "

Chúng tôi đã làm việc cục bộ tại một miền cục bộ (v10.whatup). Bây giờ đã đến lúc bắt đầu chuyển sang WordPress. Chúng tôi sẽ tiếp tục làm việc tại địa phương "

Chúng tôi có tất cả nội dung chúng tôi cần trên đầu ra trang này và chúng tôi có tiêu đề tại chỗ. Bây giờ, chúng ta có thể bắt đầu CSS đưa nội dung vào thiết kế mà chúng ta đang sử dụng "

Khi chúng ta bắt đầu làm việc trong WordPress, sẽ tốt nhất nếu chúng ta lấy một bản sao chính xác của cơ sở dữ liệu trực tiếp để làm việc với cục bộ. Một số trang web có những thứ như "

Bây giờ chúng ta đã chiến đấu để có được nội dung phù hợp trên trang chủ của Almanac, chúng ta có thể tìm hiểu một số kiểu thực tế với CSS. Chúng tôi quyết định đi "

Trong video này, chúng tôi chủ yếu xử lý "Photostar" màu cam chiếm ưu thế ở chân trang. Chúng tôi tạo ngôi sao trong một tệp riêng biệt trong Photoshop, vì vậy chúng tôi có thể tạo ra "

Giovanni Difeterici đánh đầu cho Alamanc. Chúng tôi sử dụng nhiều kỹ thuật mà chúng tôi đã thiết lập để bắt đầu "

Hình minh họa tiêu đề tùy chỉnh cho phần video đã xuất hiện, lần này là từ Alyssa Nassner. Chúng tôi dành một ít thời gian để tổ chức tệp Photoshop và "

Trong màn hình cuối cùng về việc xây dựng chân trang này, chúng tôi làm việc ở chân trang dưới cùng, nơi có các khu vực CodePen và ShopTalk. Chúng tôi phải thay đổi HTML a "

Trong video hướng dẫn này, chúng tôi tập trung vào các dòng bên dưới các liên kết ở phần trên cùng của chân trang. Chúng tôi lo lắng về việc tìm ra những thứ nên làm "

Người đứng đầu đoạn trích đã xuất hiện, lần này là bởi Reagan Ray. Lần này, chúng tôi dành một chút thời gian trong Photoshop để xáo trộn mọi thứ xung quanh một chút để đảm bảo rằng chúng tôi "

Với cấu trúc HTML cho chân trang đã có sẵn, chúng tôi có những gì chúng tôi cần để bắt đầu tạo kiểu và làm cho chân trang này trông giống như những gì chúng tôi đã thiết kế trong Photoshop. "

Đây là công việc cuối cùng của Photoshop mà chúng tôi sẽ làm cụ thể về footer trước khi chúng tôi thực sự bắt đầu xây dựng nó. Trong video màn hình này, chúng tôi "

Chúng tôi đang làm việc để tạo một thiết kế cho footer trong Photoshop. Nhắc nhở nhanh: Tôi làm việc trong Photoshop bởi vì tôi cảm thấy sáng tạo hơn ở đó trước khi nhảy qua "

Chúng tôi tiếp cận thêm một số hoạt động kinh doanh của Photoshoppin trong video trên màn hình này, bố trí phần cuối trang có liên kết đến hai dự án lớn nhất khác của tôi, CodePen "

Chúng tôi bắt tay vào cuộc hành trình tuyệt vời đó là chân! CSS-Tricks luôn có một footer lớn và đẹp mắt và thiết kế này cũng không ngoại lệ. Nó không hoàn toàn là "

Với thiết kế của chúng tôi cho phần footer, tất cả đã sẵn sàng để sử dụng trong Photoshop, chúng tôi có thể bắt đầu xây dựng nó thành mô hình HTML và CSS tĩnh của mình. Bước đầu tiên là đưa ra "

Chúng tôi có một khu vực BSA khác để tích hợp vào trang web. Điều này sẽ dễ dàng hơn một chút vì chúng tôi đã có sẵn JavaScript và nó chỉ là "

Chúng tôi có một mô hình mô phỏng về cách chúng tôi muốn các vùng BuySellAds của mình trông như thế nào, vì vậy hãy bắt tay vào xây dựng nó cho thật. Trang web BuySellAds cung cấp mã chúng tôi cần "

Điều duy nhất còn thiếu bây giờ trong tiêu đề Diễn đàn hải quan của chúng tôi là phần thực sự nói "Diễn đàn"! Nick đã minh họa một bàn tay cầm một tấm biển có ý nghĩa "

Bây giờ chúng tôi biết chính xác những khu vực mà chúng tôi đang làm việc, chúng tôi quay lại Photoshop và mô phỏng cách chúng tôi muốn các khu vực quảng cáo này trông như thế nào. Chúng tôi có tiền lệ cho "

Như bạn đã biết, một số quảng cáo trên CSS-Tricks thuộc loại "tự quản lý", giống như nhà tài trợ chính Treehouse. Tôi tiếp tục vì nó chỉ là một "