Đây là thời gian cho bài tập đầu tiên của bạn trong khóa học này.
Trong bài tập đầu tiên,
chúng tôi sẽ cung cấp cho bạn với trang aboutus.html unstyled.
Tệp zip chứa
trang aboutus.html đó có sẵn cho bạn trong hướng dẫn gán.
Vì vậy, bạn cần phải tải về trang và sau đó di chuyển trang đó vào thư mục Fusion con của bạn.
Sau đó, bạn sẽ áp dụng
các lớp Bootstrap và lưới Bootstrap Flexbox để tạo kiểu trang,
sau đó bạn di chuyển trang đến thư mục Con Fusion,
sau đó bạn có thể xem trang trong trình duyệt của bạn bằng cách gõ
localhost:3000/aboutus.html và máy chủ ánh sáng của bạn xây dựng máy chủ lên trang aboutus.html,
vì vậy đây là cách duy nhất bạn có thể xem trang này.
Vì vậy, để bắt
đầu, trang sẽ trông như thế này,
một trang hoàn toàn Unstyle mà chỉ chứa nội dung.
Bây giờ công việc của bạn là trải qua ba nhiệm vụ để định dạng trang này.
Hãy xem xét ba nhiệm vụ một cách chi tiết hơn.
Nhiệm vụ đầu tiên của bạn là áp dụng
Bootstraps CSS và các lớp Javascript vào
trang aboutus.html để trang này sẽ được chuyển đổi ngay lập tức thành trang này,
nơi ngay sau khi bạn thêm các lớp Bootstraps CSS và JavaScript,
đầu trang và chân trang sẽ tự động được định dạng một cách chính xác,
bởi vì tôi đã chỉ đơn giản sao chép tiêu đề trong chân trang từ index.html vào
trang này và tôi đã để lại tất cả các định dạng Bootstrap như vậy,
nhưng nội dung thực tế của trang vẫn còn không được phong cách.
Vì vậy, bây giờ, như là nhiệm vụ thứ hai,
bạn sẽ áp dụng các Bootstraps Flexbox lưới bao gồm Container,
các hàng và các lớp cột cho
nội dung này hoặc trang để bạn có thể phong cách nó đúng cách.
Bây giờ, khi áp dụng các lớp học,
bạn sẽ áp dụng các lớp hàng và cột cho aboutus để chỉ để nó như vậy.
Sau đó, bạn sẽ áp dụng các lớp hàng và cột cho
nội dung này để nội dung này chỉ chiếm một nửa màn hình,
và sau đó bạn sẽ áp dụng các lớp hàng và cột cho
nội dung này để đã chiếm toàn bộ chiều rộng màn hình.
Vì vậy, chọn các lớp hàng và cột một cách chính xác để áp dụng cho điều này.
Bạn có thể sử dụng các lớp CSS tùy chỉnh mà chúng tôi đã
thực hiện cho index.html bằng cách thêm các tập tin style.css,
cũng để phong cách nội dung trong trang này.
Vì vậy, khi bạn hoàn thành nhiệm vụ thứ hai,
trang của bạn sẽ kết thúc được phong cách như thế này.
Vì vậy, bạn có thể thấy rằng trang aboutus tồn tại trong riêng của nó.
Sau đó, phần Lịch sử của chúng tôi,
nhận thấy rằng trên một kích thước màn hình nhỏ đến lớn,
Lịch sử của chúng tôi sẽ chỉ chiếm một nửa chiều rộng màn hình.
Sau đó, phần Lãnh đạo Công ty chiếm toàn bộ chiều rộng màn hình trong trường hợp này.
Đây là nhiệm vụ thứ hai mà bạn cần phải hoàn thành trong nhiệm vụ của mình.
Đối với nhiệm vụ thứ ba như bạn có thể thấy,
bố cục nội dung này có vẻ tốt cho kích thước màn hình lớn hơn,
nhưng khi bạn đi đến kích thước màn hình nhỏ thêm đặc biệt như thế này,
bạn nhận thấy rằng nội dung là quá nhiều trong phần này.
Vì vậy, những gì chúng tôi muốn làm là sử dụng một lớp Bootstrap cung cấp cho chúng tôi gọi là,
[không nghe được] và khối DSM.
Có một liên kết đến các lớp học đáp ứng trong các tài nguyên phân công,
vì vậy bạn có thể kiểm tra tài liệu cho khối [không nghe được] và DSM.
Bạn cần phải áp dụng những điều này để mô tả này sẽ được
ẩn trong các kích thước màn hình nhỏ thêm.
Vì vậy, khi bạn các lớp học để phần lãnh đạo công ty này,
cùng một nội dung bây giờ sẽ được đặt ra mà không có mô tả,
vì vậy nó sẽ được ẩn trong kích thước màn hình nhỏ thêm.
Nhưng khi bạn đi đến kích thước màn hình lớn nhỏ,
nội dung sẽ trở nên hiển thị.
Vì vậy, bạn có thể nhận thấy rằng đối với kích thước màn hình nhỏ thêm,
nội dung bị ẩn,
nhưng đối với kích thước màn hình nhỏ,
nội dung mô tả đó sẽ được hiển thị rõ ràng.
Vì vậy, đây là nhiệm vụ thứ ba của bạn trong nhiệm vụ của bạn.
Trong khi bạn đang ở đó, bạn cũng có thể áp dụng các lớp học tương tự cho
các mô tả trong trang index.html của chúng tôi để
các mô tả chi tiết cho các mục nội dung cũng sẽ được ẩn
trong trang index.html khi nó được xem trên các kích thước màn hình nhỏ thêm.
Điều này hoàn thành nhiệm vụ đầu tiên của bạn.
Ngoài ra, khi bạn gửi bài tập của bạn,
vui lòng chụp ảnh toàn trang bố cục của bạn
ở cả
kích thước màn hình nhỏ đến lớn và kích thước màn hình nhỏ,
và sau đó bao gồm nó như là một phần của bài nộp của bạn.
Để chụp ảnh màn hình đầy đủ trang trong Chrome,
bạn có thể sử dụng tiện ích mở rộng Chrome có sẵn cho chúng tôi,
liên kết đến tiện ích mở rộng Chrome được cung cấp trong
các tài nguyên gán theo mô tả nhiệm vụ.
Sau khi bạn hoàn thành nhiệm vụ của bạn,
trong trường hợp bạn đang lưu các thay đổi của bạn vào một kho Git,
vui lòng đừng quên cam kết các thay đổi vào
kho Git của bạn với Message Assignment One.