Chào mừng trở lại.
Vậy là chúng ta đã tìm hiểu những kiến thức cơ bản về bình cầu.
Chúng tôi hiểu những gì máy chủ làm và chúng tôi cũng biết những gì trình duyệt làm.
Nhưng hãy trung thực ở đây.
Đây là loại nhàm chán.
Ý tôi là, điều này không ấn tượng.
Nếu bạn thể hiện điều này với một nhà tuyển dụng khả thi, họ sẽ nhìn bạn như một kẻ điên rồ.
Vì vậy, hãy thực sự xây dựng một danh mục đầu tư đẹp chỉ dựa trên những gì chúng ta đã học được cho đến bây giờ.
Bây giờ, tôi có một món quà nhỏ cho bạn.
Đó là thực tế là bạn sẽ không phải viết HTML, CSS và JavaScript của riêng mình bởi vì một lần nữa, đây không phải là
một khóa học phát triển web.
Và thật may mắn cho chúng tôi, nếu bạn Google trực tuyến ở bất kỳ đâu để tìm kiếm thứ gì đó như mẫu miễn phí hoặc mẫu miễn phí
HTML, bạn có thể tìm thấy một số trang web thực sự đẹp mắt mà bạn có thể sử dụng miễn phí.
Ví dụ: hãy xem Universe ở đây và tôi sẽ liên kết đến tài nguyên này để bạn cũng
có thể tự tìm hiểu nếu tôi xem trước.
Kiểm tra đó ra.
Bạn có một trang web hoặc trang danh mục đầu tư nhỏ xinh mà bạn có thể sử dụng.
Làm thế nào là mát đó là?
Và nó thực sự đã thân thiện với máy tính bảng và thiết bị di động, vì vậy mọi thứ đã được tạo sẵn cho bạn.
Điều đó khá tuyệt, phải không?
Vì vậy, làm thế nào chúng ta có thể sử dụng điều này?
Vâng, hãy tải nó xuống.
Và nhân tiện, khi bạn làm theo, bạn thực sự có thể sử dụng bất kỳ cái nào trong số này bạn muốn.
Nhưng hiện tại, chúng ta hãy sử dụng vũ trụ một.
Chỉ vì có một phi hành gia nhỏ ở đây, nó trông khá tuyệt.
Hãy tải xuống và xem điều gì sẽ xảy ra.
Được rồi, tôi nhận được một câu hỏi nhỏ rằng, chúng ta muốn tải xuống mẫu như thế nào?
Trong trường hợp của chúng tôi, chúng tôi muốn chọn một HTML.
Và ở đó bạn đi.
Chúng tôi nhận được một thư mục nén nhỏ xinh xắn và bây giờ chúng tôi đã tải xuống cái này.
Vì vậy, chúng ta hãy mở nó ra.
Và ồ, cậu bé, đó là rất nhiều tệp và thư mục.
Vì vậy, những gì chúng ta nên lấy từ đây?
Chà, có một vài điều.
Đầu tiên, đây là trang mẫu.
Chúng tôi thực sự không cần cái này, vì vậy hãy chuyển nó vào thùng rác.
Tiếp theo, chúng ta có tài sản.
Đây là những nội dung khác nhau để trang của chúng tôi hoạt động, chẳng hạn như trang phi hành gia.
Vì vậy, chúng tôi sẽ giữ điều đó xung quanh.
Và sau đó chúng tôi có các trang HTML của mình.
Mà chúng tôi chắc chắn cần.
Và sau đó có vẻ như chúng ta có một số tệp JavaScript và tệp CSS.
Bây giờ có một dấu chấm GZ ở đây, chúng ta gọi là tệp nén, tệp nén GZ.
Vì vậy, đây chỉ là một cách để máy chủ gửi một tệp hoặc tệp JavaScript, mà bạn có thể thấy là
138 kilobyte, nhưng ở dạng nén, vì vậy 44 kilobyte.
Vì vậy, theo cách này, chúng tôi đang gửi ít dữ liệu hơn đến giao diện người dùng.
Và sau đó chúng tôi cũng có một cái gì đó giống như MAP, thực sự giúp chúng tôi trong quá trình gỡ lỗi.
Nhưng trong trường hợp của chúng tôi, chúng tôi không cần phải lo lắng về điều này bây giờ.
Vì vậy, chúng ta chỉ cần xóa tất cả các tệp GZIP và bản đồ.
Vì vậy, chúng tôi sẽ chuyển chúng vào thùng rác để chúng tôi chỉ có một tệp CSS và một tệp JavaScript, sau đó tất cả các tệp
khác đều là tệp HTML cho các trang khác nhau của chúng tôi.
Bây giờ những gì chúng ta sẽ làm là chúng ta sẽ sao chép nó và chuyển nó vào thư mục dự án của chúng ta.
Nhớ thư mục này ở đây?
Vì vậy, lý tưởng nhất là chúng tôi di chuyển các tệp HTML vào các mẫu và tệp tĩnh, đó là các tệp CSS và JavaScript và
có thể là các nội dung trong đây.
Vì vậy, đó là những hình ảnh trong đây.
Vì vậy, chúng ta hãy làm điều đó.
Tôi có máy chủ web của mình ở đây.
Đầu tiên tôi sẽ chỉ sao chép và dán những gì chúng tôi vừa sao chép.
Và hãy di chuyển tất cả các tệp HTML của chúng tôi.
Vào các mẫu của chúng tôi.
Và bạn biết không, hãy xóa các mẫu hiện có của chúng tôi vì chúng tôi không cần chúng nữa.
Bây giờ chúng tôi có tệp HTML đẹp.
Và sau đó chỉ có tất cả những thứ này.
Chúng tôi có một chỉ mục mới. html sẽ đẹp hơn rất nhiều so với các trang web cũ của chúng tôi, vì vậy chúng tôi muốn
sử dụng nó.
Vì vậy, hãy chuyển tất cả những thứ đó vào các mẫu.
Và sau đó, hãy chuyển tệp JS và CSS cũng như thư mục nội dung vào tĩnh.
Đáng kinh ngạc.
Vì vậy, bây giờ chúng ta đã thiết lập xong, hãy quay lại dự án của chúng ta và xem xét nó.
Chúng tôi còn rất nhiều HTML nữa mà chúng tôi chưa viết, nhưng may mắn là nó đã được tạo ra cho chúng tôi.
Bây giờ, phần thiết lập cuối cùng là vì chúng tôi đã di chuyển các tệp của mình xung quanh, chúng tôi cần điều chỉnh các liên kết
giữa HTML, CSS, JavaScript và tất cả các tệp nội dung.
Vì vậy, nếu chúng ta cuộn nếu chúng ta đi đến lập chỉ mục HTML.
Chúng tôi thấy rằng chúng tôi đang tìm kiếm biểu tượng Vatican và tài sản.
Nhưng vì đây là thư mục tĩnh nên chúng ta phải thêm tĩnh vào đây.
Vì vậy, hãy tìm nơi khác mà chúng tôi đang sử dụng các tài sản tại đây.
Được rồi.
Vì vậy, có vẻ như chúng ta hãy làm cho cái này lớn hơn một chút.
Vì vậy, nó trông giống như ở đây cho hình nền của chúng tôi.
Một lần nữa chúng tôi đang tìm kiếm hình ảnh không gian, nhưng đó là những gì chúng tôi biết trong thư mục tĩnh.
Và chúng ta hãy xem chúng ta có những nơi nào khác mà chúng ta có ở đây.
Hãy làm tĩnh.
Cứ đi đi.
Tĩnh.
Được rồi.
Mọi thứ đều tốt.
Bây giờ chúng ta có thư mục tĩnh.
Ồ, và chúng ta phải chắc chắn rằng chúng ta thêm dấu gạch chéo vào trước dấu chấm.
Dấu chấm chỉ có nghĩa là thư mục hiện tại và sau đó tìm trong thư mục tĩnh.
Vì vậy, hãy quay lại, đảm bảo rằng chúng tôi làm điều đó cho mọi thứ.
Chúng ta bắt đầu.
Và chúng ta bắt đầu.
Bây giờ chúng ta hãy lưu điều này.
Và tôi chưa nghĩ rằng chúng ta đã hoàn tất, nhưng bây giờ, hãy vào máy chủ của chúng ta.
Bánh chấm.
Và đối với tuyến đường về nhà của chúng tôi, hãy xóa những gì chúng tôi đã có trước đây.
Và chúng ta hãy chỉ gọi nó là chức năng nhà của tôi.
Điều đó không cần tham số, và thay vào đó nó sẽ trả về cho chúng ta.
Chỉ mục của chúng tôi.
HTML không có quá khứ trong các tham số.
Vì vậy, chúng ta hãy tiết kiệm.
Quay lại trang của chúng tôi.
Hoặc trang web của tôi.
Và xem những gì chúng ta nhận được khi làm mới.
Được rồi.
Đó là một trang web đẹp, khá xấu, nhưng có vẻ như ít nhất chúng ta đang hiển thị một cái gì đó.
Nhưng ngay lập tức, chúng tôi nhận thấy rằng có vẻ như không có CSS nào được áp dụng.
Có vẻ như chúng tôi có một số HTML, nhưng các liên kết cũng không hoạt động.
Vì vậy, một lần nữa, điều này là do chúng tôi phải cập nhật các liên kết giữa các tệp.
Vì vậy, những gì chúng ta sẽ thực sự quay lại lập chỉ mục HTML và trong thẻ head, chúng ta thấy rằng chúng ta có biểu định kiểu, tệp
CSS của chúng ta.
Nhưng một lần nữa, chúng tôi phải cập nhật điều này để có nó ở chế độ tĩnh.
Thư mục.
Cũng như tệp JavaScript, nếu chúng ta cuộn hết cỡ xuống dưới cùng, chúng ta có tệp JS ở
đây.
Mà một lần nữa sẽ nằm trong thư mục tĩnh.
Được rồi, hãy tiết kiệm.
Và quay lại xem liệu điều đó có làm cho mọi thứ tốt hơn không.
Này, nhìn này.
Điều đó khá tuyệt.
Xin lưu ý, điều này trông hơi lớn vì tôi tăng kích thước trang web của mình bằng cách thực hiện lệnh cộng và
trừ để chúng ta có thể nhìn rõ hơn.
Nhưng điều đó khá tuyệt vời.
Bây giờ, nếu tôi nhấp vào, hãy nói rằng hoạt động.
Rất tiếc, tôi nhận được máy trạm.
HTML không tồn tại.
Vì vậy, làm thế nào chúng ta có thể sửa chữa điều đó?
Chúng tôi đã biết làm thế nào để làm điều đó, phải không?
Tất cả những gì chúng ta cần làm là cập nhật các tuyến đường khác nhau này để nó trỏ đến mẫu thích hợp.
Bây giờ, trong video tiếp theo, tôi sẽ chỉ cho bạn cách làm điều đó, nhưng tôi muốn bạn cố gắng tự mình làm
điều này, vì chúng ta đã học được điều này.
Vì vậy, hãy cố gắng làm cho trang web hoạt động chính xác như chúng ta đã có.
Ở đây trên các mẫu kết hợp của chúng tôi và tôi sẽ gặp bạn trong video tiếp theo.