Tìm hiểu CSS Flexbox trên Lynda.com

• Tháng Tư 19, 2024

Sau mười năm, đó là một đời trên web, chúng tôi quyết định cung cấp cho trang web Đánh giá văn học MUSED một giao diện mới. Tất nhiên, chúng tôi muốn sử dụng HTML và CSS mới nhất và điều đó có nghĩa là sử dụng Flexbox, CSS Grid và Responsive Web Design.

Nhờ Lynda.com, không mất nhiều thời gian để tăng tốc. Dưới đây chỉ là một vài trong số các video hướng dẫn tốt nhất giúp tôi thiết kế giao diện mới cho MUSED.

Bố cục phản hồi nâng cao với CSS Flexbox
Morten Rand-Hendriksen
Trong khóa học dựa trên dự án này, tác giả sẽ đưa bạn từng bước khi anh ta xây dựng các menu Flexbox, bố trí thẻ đáp ứng, bố cục Holy Grail và các thành phần tương tác.

Bố cục nâng cao CSS với lưới
Morten Rand-Hendriksen
Bạn sẽ học được rất nhiều trong khóa học này. Tác giả bắt đầu với những điều cơ bản về CSS Grid và lên kế hoạch bố trí lưới. Sau đó, bạn đã sẵn sàng để xây dựng một bố cục nhiều cột và bố trí một cột đầy đủ. Tiếp theo, bạn tìm hiểu cách thiết kế các bố cục thẻ khác nhau và bảng điều hướng ngoài màn hình trượt vào chế độ xem khi cần.

CSS Essential Đào tạo 3
Christina Trương
Trong khóa học này, bạn sẽ học cách sử dụng CSS Grid và Flexbox để xây dựng bố cục đáp ứng. Bạn cũng sẽ tìm hiểu về cách chuẩn bị hình ảnh web của mình cho màn hình Retina và hình ảnh vector SVG. Sau đó, tác giả chuyển sang hoạt hình CSS đơn giản, kiểu chữ đáp ứng và khả năng truy cập.

Cái nhìn đầu tiên về CSS Flexbox
James Williamson
Khóa học này sẽ đưa bạn từng bước khi bạn tìm hiểu tất cả các cú pháp cho Mô-đun Bố cục CSS Flexbox. Tác giả thảo luận về những gì Flexbox có thể làm và hỗ trợ trình duyệt hiện tại. Sau đó, ông thảo luận kỹ lưỡng về các chủ đề như dòng chảy phần tử, nội dung gói, sắp xếp các mục và các thùng chứa lồng nhau.

Cái nhìn đầu tiên về lưới CSS
Morten Rand-Hendriksen
Trong khóa học này, bạn sẽ học một cách mới và cải tiến để tạo bố cục lưới hai chiều. Bắt đầu với những điều cơ bản để sử dụng CSS Grid để xây dựng bố cục lưới đáp ứng, tác giả trình bày những gì bạn cần biết để xây dựng cả tạp chí trực tuyến và bố cục ba cột.

Xây dựng các hình thức đáp ứng với Flexbox
James Williamson
Bạn không thể thiết kế một trang web mà không có hình thức. Các hình thức cần phải đáp ứng cho tất cả các loại và kích cỡ của màn hình, giống như phần còn lại của trang web. Williamson hướng dẫn bạn cách sử dụng mô hình hộp CSS Flexbox để tạo và tạo kiểu biểu mẫu web đáp ứng. Anh ta bắt đầu với một hình thức tìm kiếm đơn giản và xây dựng thành một hình thức hai cột lớn.

Hình ảnh phản hồi
Morten Rand-Hendriksen
Nếu bạn sử dụng Wordpress, bạn sẽ biết rằng nó sẽ tự động tạo ra một số hình ảnh có kích thước khác nhau cho mỗi hình ảnh mà bạn tải lên hệ thống. Tại sao? Khóa học này sẽ giải thích khái niệm đằng sau hình ảnh phản hồi và cách sử dụng chúng trên trang web của riêng bạn.

Video HướNg DẫN: CSS3 - Hướng dẫn sử dụng Flexbox để dàn trang (Tháng Tư 2024).