Video Screencasts 2025, Tháng BảY

Hình minh họa của Nick có ba lớp khác nhau cho những cái đầu. Chúng chỉ là những biến thể hơi khác nhau. Chúng tôi có thể hoán đổi hình ảnh bằng hoạt ảnh "

Khi tôi đang làm việc trên thiết kế này, jQuery 1.8 đã được phát hành. Đây chỉ là một video ngắn để dựa vào thực tế là loại điều này xảy ra khi bạn phát triển các trang web "

Chúng tôi có tiêu đề thư viện cơ bản tại chỗ, nhưng nó thiếu những người nhỏ màu xanh mà Erica đưa vào hình minh họa gốc. Chúng tôi đã nói về nó trong "

Chúng tôi vừa có tiêu đề tùy chỉnh cho Thư viện tại chỗ, vì vậy trong khi chúng tôi đang ở, hãy tiếp tục thêm một tiêu đề tùy chỉnh khác. cái này được thực hiện bởi "

Có bảy khu vực chính khác nhau của trang web ngoài trang chủ. Vì vậy, tôi đã thuê bảy họa sĩ minh họa khác nhau để thiết kế. Đây là người đầu tiên chúng tôi là "

Cho đến nay, chúng tôi đã thực hiện các thay đổi mã cục bộ mà không sử dụng bất kỳ loại kiểm soát phiên bản nào. Với sự phức tạp của trang web này ngày càng tăng, điều đó trở thành "

Chúng tôi có một khởi đầu tốt về thiết kế đáp ứng. Menu ở kích thước màn hình nhỏ nhất được chia thành lưới 2x4. Nó vừa vặn trên màn hình, nhưng "

Chúng tôi thêm một số khả năng đáp ứng vào lưới mà chúng tôi đã thiết lập cho Thư viện. Ở màn hình rộng nhất, chúng tôi đặt nó ở bốn cột. Sau đó, chúng tôi bắt đầu thêm vào "

Trong đó chúng tôi tìm ra các vấn đề chúng tôi gặp phải với việc tải bố cục cột một cách độc đáo. Cách khắc phục là xóa CSS tạo ra "

Chúng tôi bắt đầu tìm hiểu cách bố trí của khu vực Thư viện, đây là điều tôi đã nghĩ đến từ khi bắt đầu quá trình thiết kế lại này. Hầu hết"

Chúng tôi có bố cục lưới cho Thư viện đang hoạt động. Thật không may, việc tải nó là một chút đột ngột và khó khăn. Điều này là do các cột CSS3 được thiết kế để "

Chúng tôi đã dành một ít thời gian để phân tích các trang để điều hướng của chúng tôi hoạt động (Video # 030) và bạn có thể nhấp vào xung quanh trang web, nhưng nội dung trên những trang phụ đó là gì "

Có một truyền thống lâu đời về các cuộc thăm dò về CSS-Tricks. Chúng thú vị, thu thập dữ liệu quan trọng tốt và tăng kết nối của mọi người với trang web. Tương tác FTW! "

Chúng tôi đã rời đi với một tiện ích thăm dò ý kiến ​​hoàn toàn tốt. Kiểu chữ sạch sẽ và mọi thứ hoàn toàn có thể sử dụng được. Tuy nhiên, nó không hoàn toàn hấp dẫn hay vui nhộn. Chúng tôi "

Mô-đun trên cùng trong thanh bên chính của trang web thuộc về Treehouse, với tư cách là nhà tài trợ chính của CSS-Tricks. Dựa trên cuộc trò chuyện giữa tôi với Ryan Carson, "

Thiết kế tìm kiếm hoạt động tốt cho đến khi chúng tôi giảm kích thước "gấu con" (di động nhỏ). Chúng tôi phải làm điều gì đó khác biệt ở đó. Chúng tôi kiếm một số phòng "

Đối với tôi, lần đầu tiên trong loạt bài này, chúng tôi sẽ thêm một số điều mới vào thiết kế trực tiếp bằng cách làm việc trong trình duyệt (không bắt đầu bằng Photoshop "

Việc kéo trình duyệt trên máy tính để bàn xuống rất hẹp có thể cho bạn cảm giác mơ hồ về cách hoạt động của một thiết kế đáp ứng, nhưng nó không phải là đại diện chính xác của "

Quảng cáo mà chúng tôi đưa ra rất phù hợp cho các màn hình kích thước lớn / máy tính để bàn, nhưng nó bắt đầu thất bại khá nhanh trên các màn hình nhỏ hơn. Chúng tôi đã có một số điểm dừng rồi "

Chúng tôi đã tạo ra giao diện của một nút ở trạng thái bình thường, nhưng một nút 3D như vậy đang cầu xin trạng thái "được đẩy". Những gì chúng tôi làm là thêm màu đậm hơn vào "

Chúng tôi bắt đầu với ý định nhảy vào HTML & CSS tạo Quảng cáo trên Treehouse mà chúng tôi vừa thiết kế, nhưng tất nhiên sẽ bị trật bánh ngay khi chúng tôi bắt đầu "

Chúng tôi có đánh dấu dành cho quảng cáo Treehouse trên đầu trang, nhưng chúng tôi có một số công việc tạo kiểu cần làm. Chúng tôi bắt đầu với đồ họa cây. Là"

Chúng tôi đã để lại một lượng lớn không gian trống trong tiêu đề. Ngay từ đầu, tôi đã biết điều này sẽ dành cho nhà tài trợ chính của CSS-Tricks, Treehouse. Trong "

Chúng tôi còn một chút việc phải làm để hoàn thành khu vực tìm kiếm. Chúng tôi bị chệch hướng chỉ trong một giây khi tôi nhận thấy rằng chúng tôi đã không thêm ba chiều "

Chúng tôi tiếp tục nơi chúng tôi đã dừng lại trong Video # 034 và tiếp tục xây dựng khu vực tìm kiếm. Lần này chúng tôi đang tập trung vào trạng thái "mở" của tìm kiếm, tòa nhà "

Chúng tôi tạm nghỉ việc tìm kiếm để giải quyết một vấn đề nhỏ. "FOUT" là "Flash của Văn bản chưa được định kiểu". Đây là hiện tượng mà @ font-face "

Bây giờ chúng tôi đã Photoshopped những gì chúng tôi hy vọng sẽ đạt được với khu vực tìm kiếm, chúng tôi bắt đầu xây dựng nó bằng HTML và CSS. Chúng tôi đã có phông chữ biểu tượng của chúng tôi "

Có rất nhiều nội dung trên CSS-Tricks. Đó là một trong những điều khiến thiết kế của nó có một chút thách thức. Trong khi chúng tôi có thể giữ sạch sẽ với thiết kế, chúng tôi "

Chúng tôi bắt đầu với việc chơi với mô-đun bài đăng trên blog của chúng tôi, tìm hiểu xung quanh với khoảng cách. Chúng tôi cũng thêm hình vuông nhỏ màu ở phía trên bên trái của mô-đun, "

Trong video siêu nhanh này, chúng tôi thêm tất cả CSS cần thiết để đảm bảo mục trang hiện tại trong điều hướng chính được đánh dấu khi trang đó "