Video Screencasts 2025, Tháng BảY

# 030: Bỏ qua các trang để điều hướng - Thủ thuật CSS

# 030: Bỏ qua các trang để điều hướng - Thủ thuật CSS

Chúng tôi có tám tab điều hướng cấp cao nhất này, nhưng Trang chủ là tab duy nhất "hoạt động". Vì vậy, chúng tôi có một số trang để làm việc, chúng tôi trích ra một số trang cho "

# 027: Đánh dấu cú pháp mã, Phần 1 - Thủ thuật CSS

# 027: Đánh dấu cú pháp mã, Phần 1 - Thủ thuật CSS

Theo những gì tôi có thể nhớ, tôi đã sử dụng Google Code Prettify để áp dụng tô sáng cú pháp trên khối mã trên CSS-Tricks. Bạn biết đấy, ở đâu trong một dòng như "

# 028: Đánh Dấu Cú Pháp Mã Phần 2 - Thủ thuật CSS

# 028: Đánh Dấu Cú Pháp Mã Phần 2 - Thủ thuật CSS

Chúng tôi vừa cài đặt Prism.js và nó hoạt động. Trong video màn hình này, chúng tôi tìm thấy một chủ đề được gọi là Chủ đề Ngày mai và nhập màu sắc của chủ đề đó vào cú pháp "

# 026: Post Typography, Phần 2 - Thủ thuật CSS

# 026: Post Typography, Phần 2 - Thủ thuật CSS

Chúng tôi đã thực hiện một chút công việc về tiêu đề, nhưng chúng tôi sẽ tìm hiểu thêm về những tiêu đề trong video truyền hình này. Tiêu đề là một khía cạnh quan trọng của bất kỳ trang web nào. Thực hiện tốt,"

# 025: Post Typography, Phần 1 - Thủ thuật CSS

# 025: Post Typography, Phần 1 - Thủ thuật CSS

Bây giờ chúng tôi có một khu vực bài đăng trên blog để làm việc, chúng tôi thực sự có thể tham gia vào kiểu chữ bài đăng trên blog. Có thể cho rằng kiểu chữ quan trọng nhất trên trang web vì nó "

# 023: Chuyển Typography ra khỏi Normalize - Thủ thuật CSS

# 023: Chuyển Typography ra khỏi Normalize - Thủ thuật CSS

Tôi nghĩ thật tuyệt khi có một tệp riêng lẻ (.scss) dành cho phần lớn kiểu chữ trên trang web. Normalize có khá nhiều kiểu chữ "

# 024: Chơi với kiểu chữ trong Typecast - Thủ thuật CSS

# 024: Chơi với kiểu chữ trong Typecast - Thủ thuật CSS

Typecast (đang trong giai đoạn thử nghiệm tại thời điểm quay phim này) là một ứng dụng web thực sự gọn gàng để chơi với kiểu chữ web. Nó cung cấp cho bạn một giao diện tuyệt vời để chơi xung quanh "

# 020: Hoàn thiện Lưới và Thiết lập Mô-đun - Thủ thuật CSS

# 020: Hoàn thiện Lưới và Thiết lập Mô-đun - Thủ thuật CSS

Tiếp tục khái niệm "Don't Overthink It Grids", chúng tôi nhận được các máng xối tiếp tục trong lưới chỉ bằng cách sử dụng một số đệm đơn giản. Chúng tôi giữ nguyên số đệm "

# 022: Hình ảnh linh hoạt (Hình và Phụ lục) - Thủ thuật CSS

# 022: Hình ảnh linh hoạt (Hình và Phụ lục) - Thủ thuật CSS

Trước khi chúng tôi thực hiện một số công việc về kiểu chữ, tôi nghĩ rằng chúng tôi sẽ khắc phục điều khó chịu là các hình ảnh nằm ngoài vùng bài viết và lưới. Sử dụng "

# 021: Đột nhập vào các bộ phận có thể bao gồm - Thủ thuật CSS

# 021: Đột nhập vào các bộ phận có thể bao gồm - Thủ thuật CSS

Bây giờ chúng tôi đang chạy một miền cục bộ tùy chỉnh, chúng tôi có thể sử dụng PHP. Chữ "P" trong MAMP là của "PHP" =). Sử dụng PHP có nghĩa là chúng ta có thể sử dụng bao gồm. Ví dụ: "

# 018: Làm cho Dự án của chúng tôi sử dụng La bàn - Thủ thuật CSS

# 018: Làm cho Dự án của chúng tôi sử dụng La bàn - Thủ thuật CSS

Chúng tôi có thể viết Sass @mixins của riêng mình để trợ giúp với nội dung CSS3 (như gradient), nhưng có một khung công tác Sass đã tồn tại có tên là La bàn "

# 019: Xây dựng một lưới đơn giản - Thủ thuật CSS

# 019: Xây dựng một lưới đơn giản - Thủ thuật CSS

Thiết kế trang web đang được định hình rất giống lưới. Các mô-đun của chúng tôi sẽ bố trí rất rõ ràng thành một lưới. Nhưng không phải lưới phức tạp và kỳ lạ? Và có thể chúng ta "

# 017: Thiết lập URL cục bộ với MAMP - Thủ thuật CSS

# 017: Thiết lập URL cục bộ với MAMP - Thủ thuật CSS

Trong video màn hình siêu nhanh này, chúng tôi sử dụng MAMP để thiết lập một URL mà chúng tôi có thể sử dụng để phát triển cục bộ. Điều này hữu ích vì một loạt lý do: Chúng tôi có thể liên kết đến "

# 016: Sử dụng Media Queries trong Sass - Thủ thuật CSS

# 016: Sử dụng Media Queries trong Sass - Thủ thuật CSS

Chúng tôi giới thiệu khái niệm truy vấn @media trong CSS. Phần lớn những gì sử dụng Sass trong dự án này cho phép chúng tôi làm là luôn KHÔ (đừng lặp lại chính mình). Chúng tôi đã làm"

# 015: Thêm Biểu tượng vào Điều hướng với Phông chữ Biểu tượng - Thủ thuật CSS

# 015: Thêm Biểu tượng vào Điều hướng với Phông chữ Biểu tượng - Thủ thuật CSS

Chúng tôi bắt đầu bằng cách điều chỉnh loại logo một chút, nhưng sau đó chuyển sang thêm các biểu tượng vào điều hướng chính. Khi chúng tôi thiết kế điều hướng trong Photoshop (Video "

# 014: Phông chữ Tùy chỉnh với Bộ gõ - Thủ thuật CSS

# 014: Phông chữ Tùy chỉnh với Bộ gõ - Thủ thuật CSS

Chúng tôi đã thiết lập một Bộ công cụ mới trong Typekit cho v10. Để xây dựng thương hiệu, chúng tôi sẽ sử dụng Proxima Nova Soft ngay bây giờ và một số phông chữ khác trông gần giống với phông chữ HF&J trong "

# 012: CSSing Header / Logo - Thủ thuật CSS

# 012: CSSing Header / Logo - Thủ thuật CSS

Cho đến nay trang web thực tế trông không giống với thiết kế Photoshop của chúng tôi. Trong chương trình truyền hình này, chúng tôi đi sâu vào thực hiện điều đó, bắt đầu từ đầu với "

# 013: CSSing Cấu trúc Điều hướng - Thủ thuật CSS

# 013: CSSing Cấu trúc Điều hướng - Thủ thuật CSS

Chúng tôi sử dụng một số thủ thuật định vị để căn lề trái của biểu trưng và vùng nội dung chính, trong khi vẫn để tiêu đề chạm vào mép trái của "

# 011: Bình thường hóa CSS Foundation của chúng tôi - Thủ thuật CSS

# 011: Bình thường hóa CSS Foundation của chúng tôi - Thủ thuật CSS

Loại bỏ CSS tác nhân người dùng (mặc định) khỏi hầu hết các phần tử thường là một ý kiến ​​hay. Điều này từ lâu đã được thực hiện bằng cách đặt lại "phổ quát" hoặc những thứ như Eric "

# 010: Bắt đầu viết HTML - Thủ thuật CSS

# 010: Bắt đầu viết HTML - Thủ thuật CSS

Trong khi xem mockup Photoshop của chúng tôi, chúng tôi bắt đầu viết HTML để mô tả những gì chúng tôi đang xem. Tất nhiên, chúng tôi đang sử dụng HTML5 bất cứ khi nào nó tạo ra "

# 007: Chụp ảnh Biểu tượng và Văn bản vào Điều hướng - Thủ thuật CSS

# 007: Chụp ảnh Biểu tượng và Văn bản vào Điều hướng - Thủ thuật CSS

Chúng tôi bắt đầu thả văn bản vào điều hướng chính, chỉ để xem nó sẽ vừa vặn như thế nào, hoạt động về kích thước, màu sắc, v.v. Một số văn bản phù hợp khá chặt chẽ "

# 009: Thiết lập Môi trường nhà phát triển cục bộ của chúng tôi - Thủ thuật CSS

# 009: Thiết lập Môi trường nhà phát triển cục bộ của chúng tôi - Thủ thuật CSS

Chúng tôi chắc chắn không "hoàn thành" Photoshop mãi mãi cho thiết kế này, nhưng chúng tôi có đủ để bắt đầu tạo thiết kế này trong trình duyệt. Sau"

# 006: Chụp ảnh Điều hướng Chính - Thủ thuật CSS

# 006: Chụp ảnh Điều hướng Chính - Thủ thuật CSS

Chúng tôi bắt đầu thiết kế điều hướng cấp cao nhất (chính) của trang web. Chúng tôi đang bắt đầu với màn hình kích thước máy tính để bàn (với chiều rộng tùy ý được thừa nhận) nhưng chúng tôi "

# 005: Thêm chiều nhỏ - Thủ thuật CSS

# 005: Thêm chiều nhỏ - Thủ thuật CSS

Chúng tôi thêm một số lớp bổ sung bên dưới hộp tiêu đề / nhãn hiệu chính để tạo ra "chồng giấy". Không có phép ẩn dụ hay bất cứ điều gì lớn lao, nó chỉ thêm một số hình ảnh "

# 008: Chụp ảnh Mô-đun Mô-đun - Thủ thuật CSS

# 008: Chụp ảnh Mô-đun Mô-đun - Thủ thuật CSS

Toàn bộ trang web sẽ dựa trên "mô-đun". Mỗi thứ nhỏ sẽ nằm trong một chiếc hộp theo đúng nghĩa đen (cuối cùng là cả trực quan và trong mã). Chúng tôi "

# 003: Phiên Chiến lược Nội dung - Thủ thuật CSS

# 003: Phiên Chiến lược Nội dung - Thủ thuật CSS

Đây là bản ghi âm cuộc gọi Skype giữa Erin Kissane và tôi. Erin đã viết cuốn sách về chiến lược nội dung nên tôi may mắn được cô ấy giúp đỡ và "

# 004: Bắt đầu trong Photoshop, Kết cấu nền và Xây dựng thương hiệu chính - Thủ thuật CSS

# 004: Bắt đầu trong Photoshop, Kết cấu nền và Xây dựng thương hiệu chính - Thủ thuật CSS

Thiết kế trong trình duyệt thật tuyệt, nhưng bắt đầu bằng Photoshop giúp tôi sáng tạo nhất khi tôi cần nhất: khi đối diện với khung vẽ trống. "

# 001: Kiểm kê Nội dung - Thủ thuật CSS

# 001: Kiểm kê Nội dung - Thủ thuật CSS

Chào mừng! Đây sẽ là một cuộc hành trình, và giống như tất cả các cuộc hành trình, cuộc hành trình này bắt đầu với một bước duy nhất. Bước đầu tiên của chúng tôi là kiểm kê một chút "

# 002: Thiết lập Mục tiêu Thiết kế lại - Thủ thuật CSS

# 002: Thiết lập Mục tiêu Thiết kế lại - Thủ thuật CSS

Thiết kế lại này không phải là thiết kế lại chỉ vì mục đích thiết kế lại. Tôi muốn cải thiện trang web theo mọi cách mà bạn có thể hình dung được. Một trong những"

35: Tối ưu hóa SVG với Công cụ - Thủ thuật CSS

35: Tối ưu hóa SVG với Công cụ - Thủ thuật CSS

Chúng tôi đã nói về việc tối ưu hóa SVG bằng tay. Đưa ra các lựa chọn theo cách thủ công về chi tiết và những loại thứ nào có thể được kết hợp hoặc loại bỏ. Trong "