Tối ưu hóa website landing page

Lập trình Front End cơ bản với website Landing Page

0.0 (0 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 17:23 06-01-2021 468 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

Tối ưu hóa website landing page

Dẫn nhập

Ở bài CODE MOBILE NAVIGATION, chúng ta đã hoàn thiện website landing page.

Trong bài này, Kteam sẽ hướng dẫn bạn một số cách cơ bản để Tối ưu hóa website của chúng ta. 


Nội dung 

Để đọc hiểu bài này tốt nhất, bạn nên xem qua các nội dung: 

Trong bài này, Kteam sẽ cùng bạn tìm hiểu nội dung:

  • Cắt ảnh, giảm dung lượng ảnh
  • Tối ưu hóa file .css và file .js
  • Tạo favicon

Cắt ảnh, giảm dung lượng ảnh

Chúng ta thấy trang web, tùy loại đều chứa 1 số hình ảnh nhất định, nên nếu dung lượng của ảnh cao sẽ dẫn đến website của chúng ta bị load chậm

Có 2 phương pháp cơ bản để giảm dung lượng ảnh:

  1. Giảm kích cỡ ảnh

Click chuột phải vào ảnh muốn chình sửa và chọn edit

Và giao diện paint sẽ mở ra và ở đây chúng ta có thể chỉnh sửa kích thước của bức ảnh

  1. Giảm chất lượng ảnh đến mức phù hợp

Vào đường dẫn:  https://imagecompressor.com/ 

Và chỉnh chất lượng ảnh mà chúng ta muốn giảm xuống

Bước 1: Upload ảnh

Bước 2: Chỉnh chất lượng ảnh và download về


Tối ưu hóa file .css và file .js

Website nào cũng sẽ có các thuộc tính css, và có thể có thêm js, việc giảm dung lượng các file này cũng sẽ làm việc load website được nhanh hơn, đặc biệt với các website có lượng code css lớn.

Vào đường dẫn https://cssminifier.com/  để tối giản file css và đường dẫn https://javascriptminifier.com/ 


Tạo favicon

Đường dẫn: https://realfavicongenerator.net/

Và việc của chúng ta là chèn nốt các dòndg lệnh HTML của link favicons vào file index.html, download favicons vào folder đã chọn .Vậy là xong !!!


Kết luận

Qua khóa học này, mong rằng các bạn đã nắm vững HTML và CSS cơ bản, và có thể tự tạo ra các sản phẩm cho mình.

Web Landing Page của chúng ta vẫn chưa được hoàn thiện cho lắm, nhưng mình tin các bạn đã có thể tự mình chỉnh sửa thêm cho sản phẩm hoàn thiện hơn.

Bạn có thể tiếp tục xây dựng cho mình một website khác tương tự hoặc nâng cao lên với khóa LẬP TRÌNH CSS VÀ SASS NÂNG CAO CHO WEBSITE LANDING PAGE

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".


Tải xuống

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Nội dung bài viết

Tác giả/Dịch giả

Khóa học

Lập trình Front End cơ bản với website Landing Page

Nếu bạn yêu thích lập trình web nhưng còn lơ ngơ không biết bắt đầu từ đâu hay đã biết cơ bản mà chưa làm được một sản phẩm nhất định nào, thì đây chính là khóa học dành cho bạn – LẬP TRÌNH FRONT END CƠ BẢN VỚI WEBSITE LANDING PAGE.

Trong phần này, Kteam sẽ giới thiệu cho các bạn về nội dung chúng ta sẽ được hướng dẫn cho khóa học này, cũng như là project mà chúng ta sẽ cùng nhau thực hiện.

Nào! Bắt đầu thôi! 

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.