Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Webflow Essentials Course

Khóa học Cốt lõi về Webflow

Khóa học Cốt lõi về Webflow

Sử dụng Webflow để tạo website đáp ứng, dễ truy cập mà không cần viết mã phức tạp.

4.7
(1,551 đánh giá)
9,648 học viên
Giảng viên
Daniel Walter Scott
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
17.0 giờ video
112 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Tạo website đáp ứng bằng Webflow.
Kỹ thuật thiết kế trực quan, không cần biết lập trình.
Kỹ thuật bố cục cơ bản.
Hiệu ứng chuyển động đơn giản.
Thiết kế đồng nhất trên máy tính, máy tính bảng và điện thoại.
Flex, cột và div.
Xây dựng website portfolio của riêng bạn.
Tạo và tùy chỉnh biểu mẫu trong website.
Chuyển đổi file Adobe XD và Figma để sử dụng trong Webflow.
Thanh điều hướng cố định, Symbols, REM, Float, Gradient và Font chữ.
Cách tối ưu website cho SEO.
Tạo website CMS với khả năng giao quyền quản lý cho khách hàng.
Bàn giao website cho quản trị viên và người quản lý với khả năng đăng nhập.
Tạo website bán hàng với sản phẩm số, vật lý và dịch vụ.

Yêu cầu

Bạn cần một tài khoản Webflow. Tôi sẽ hướng dẫn bạn cách tạo trong khóa học.
Không bắt buộc phải có kinh nghiệm sử dụng Figma hay Adobe XD trước đó khi dùng Webflow.
Bạn không cần kinh nghiệm về Thiết kế Web hay Webflow để học được từ khóa học này.
Không yêu cầu kỹ năng hoặc kinh nghiệm thiết kế trước đó.

Đối tượng phù hợp

Dành cho bất kỳ ai muốn bắt đầu sử dụng Webflow trong sự nghiệp & kiếm tiền từ kỹ năng thiết kế trải nghiệm người dùng.
Khóa học này dành cho người mới bắt đầu, tân binh & người mới học trong lĩnh vực Thiết kế Web & Webflow.
Hướng đến những người mới với thế giới thiết kế web & trải nghiệm người dùng.
Dành cho bất kỳ ai cần thêm 'Nhà thiết kế Web' vào portfolio của mình.
Dành cho bất kỳ ai muốn học những kiến thức cốt lõi về Webflow & Thiết kế Web.

Nội dung khóa học

31 phần • 112 bài giảng
1 Giới thiệu khóa học đào tạo hướng dẫn Webflow
2 Bắt đầu với hướng dẫn Webflow
3 Webflow là gì
4 Câu hỏi thường gặp về Webflow - Chi phí Webflow là bao nhiêu
5 Cách xây dựng website đầu tiên của bạn trong Webflow
1 Dự án lớp 01 - Tạo bản tóm tắt Webflow của riêng bạn
1 Container và Section trong Webflow khác nhau thế nào
1 Cách tạo lớp CSS trong Webflow
1 Cách thêm hình ảnh có margin trong Webflow
2 Hình nền - Cách đặt chồng văn bản lên hình ảnh trong Webflow
1 Nút với hiệu ứng màu khi rê chuột trong Webflow
2 Tạo thanh điều hướng tùy chỉnh trong Webflow
3 Cách tạo thanh menu burger thân thiện với di động trong Webflow
4 Video Thực hành 1 - Xây dựng Phần Hỗ trợ & Sự kiện Tiếp theo
1 Siêu liên kết & cách xóa gạch chân và màu khỏi liên kết trong Webflow
2 Liên kết neo đến một phần khác trên trang trong Webflow
3 Dự án lớp 02 - Tạo trang câu lạc bộ của bạn
1 Hiểu về Lớp Kết hợp (Combo Classes) trong Webflow
1 Lưới (Grid) trong Webflow
1 Thiết kế đáp ứng trong Webflow là gì
2 Cách làm cho Webflow đáp ứng
3 Lưới đáp ứng trong Webflow
4 Dự án lớp 03 - Website Lưới & Đáp ứng
1 Hiệu ứng chuyển động nút khi rê chuột trong Webflow dùng Element Trigger
2 Hiệu ứng mờ dần khi cuộn trong Webflow
3 Dự án lớp 04 - Tương tác
1 Chia sẻ thiết kế của bạn với khách hàng
2 Chi phí hosting site so với workspace trên Webflow
1 Các phím tắt, mẹo và thủ thuật tăng tốc độ tốt nhất trong Webflow
1 Cách thay đổi kiểu mặc định trong Webflow
2 Lớp Kết hợp (Combo) so với Lớp Toàn cục (Global) trong Webflow
3 Quy ước đặt tên lớp trong Webflow
4 Cách sử dụng trình quản lý kiểu (Style Manager) trong Webflow
5 Video Thực hành 2 - Portfolio Mới
6 Minimum Height so với ViewPort Heights trong Webflow
1 Chuyển đổi Figma sang Webflow
2 Chuyển đổi XD sang Webflow
1 Cách thêm font chữ vào Webflow
2 Video Thực hành 3 - Văn bản Hero
3 Khoảng cách dòng, khoảng cách sau chữ, giãn cách chữ trong Webflow
4 Hiệu ứng đổ bóng cho văn bản & hộp nút trong Webflow
1 Cách tạo bảng màu toàn cục trong Webflow
2 Tỷ lệ tương phản màu trong Webflow là gì
3 Nền gradient trong Webflow
1 Thanh điều hướng với container full width trong Webflow
2 Bố cục Webflow - Columns so với Flex so với Grid so với None so với Inline
3 Bố cục Webflow: Nên dùng Flex hay Grid
4 Bố cục Flex box với ví dụ trong Webflow
5 Thẻ card có chiều cao bằng nhau với nút ở dưới cùng trong Webflow
6 Giải thích Position absolute & relative trong Webflow
7 Thanh điều hướng & chân trang cố định - Position sticky không hoạt động trong Webflow
8 Dự án lớp 05 - Trang chủ Portfolio
9 Dự án lớp 05 - Trang chủ Portfolio - Lời giải
1 Cách sử dụng Px, Rem & Em trong Webflow
2 Cách sử dụng VH (viewport height) trong Webflow
1 Cách tùy chỉnh kiểu cho thành phần thanh điều hướng trong Webflow
2 Thêm & kết nối các trang trong Webflow
3 Cách biến một hình ảnh thành liên kết trong Webflow
1 Tạo một Symbol & Overrides trong Webflow
1 Cách tạo biểu mẫu liên hệ trong Webflow
2 Cách tùy chỉnh kiểu cho biểu mẫu trong Webflow
1 Các loại hình ảnh trong Webflow: SVG so với PNG so với JPG
2 Hình ảnh Hi-DPI & hình ảnh đáp ứng trong Webflow là gì
3 Cách cắt hình ảnh trong Webflow sử dụng object fit
4 Lazy load trong Webflow là gì
5 Cách thay đổi favicon trong Webflow
1 Cách để chân trang dính sát đáy trong Webflow
1 Cách tạo hiệu ứng chuyển động khi tải trang trong Webflow
2 Hình ảnh mờ dần & phóng to khi rê chuột trong Webflow
3 Hiệu ứng cuộn nền Parallax - hình ảnh di chuyển trong Webflow
1 Webflow có tốt cho SEO không
2 Giải thích về thẻ mô tả meta, thẻ tiêu đề, robots & sitemap trong Webflow
3 Văn bản thay thế hình ảnh (Image Alt text) trong Webflow là gì
4 Từ khóa SEO trong Tiêu đề & URL trong Webflow
1 Bạn có thể xuất code để tự host Webflow không
2 Liên kết chỉ đọc (read only links) trong Webflow dùng để làm gì
3 Trình quản lý kiểu & dọn dẹp các lớp
4 Sử dụng tên miền website tùy chỉnh của riêng bạn trong Webflow
5 Kết nối thủ công tên miền tùy chỉnh của bạn trong Webflow
6 Kiểm thử trên điện thoại di động thực tế của bạn
7 Dự án lớp 06 - Portfolio Hoàn chỉnh
1 Collection CMS Tĩnh so với Động trong Webflow là gì
2 Tạo một CMS Collection trong Webflow
3 Thêm danh sách CMS Collection qua CSV trong Webflow
4 Thêm Danh sách CMS Collection vào trang web trong Figma
5 Tổ chức lại những gì được hiển thị từ danh sách Collection Webflow
6 Tùy chỉnh kiểu cho danh sách collection với grid & flex trong Webflow
7 Dự án lớp 07 - Bộ sưu tập Nhà bếp
8 Cho phép khách hàng cập nhật website trong Webflow Editor
9 Cách tạo blog sử dụng CMS Collection Pages trong Webflow
10 Liên kết đến một trang collection từ trang chủ trong Webflow
11 Liên kết thủ công đến một trang collection trong Webflow
12 Khách hàng của tôi thêm bài viết blog vào CMS collection trong Webflow như thế nào
13 Cách sử dụng phần tử văn bản định dạng (rich text) trong Webflow
14 Tùy chỉnh kiểu cho văn bản định dạng trong CMS Webflow
15 Dự án lớp 08 - Blog CMS
1 Mã nhúng HTML từ Calendly, Twitter & Castos
1 Tạo cửa hàng thương mại điện tử trong Webflow
2 Cách thêm sản phẩm vào cửa hàng của bạn trong Webflow
3 Thêm sản phẩm thương mại điện tử của bạn vào một trang trong Webflow
4 Thêm danh sách sản phẩm của bạn vào trang chủ
5 Cài đặt thanh toán trong Webflow
6 Điều gì xảy ra sau khi mua hàng trong cửa hàng Webflow
7 Tùy chỉnh cài đặt giỏ hàng trong Webflow
8 Cách thêm biến thể cho sản phẩm thương mại điện tử trong Webflow
9 Thêm Danh mục cho Sản phẩm CMS Collection với bộ lọc
10 Nhập CSV vào sản phẩm thương mại điện tử Webflow
11 Float & lý do nút giỏ hàng không vào được trong Thanh điều hướng Webflow
12 Cùng làm với Dan - Xây dựng cửa hàng trà đầy đủ trong Webflow
13 Dự án lớp 09 - Thương mại điện tử
1 Bạn nên làm gì sau khóa học Cốt lõi Webflow
2 Tiếp tục học cùng tôi! Các liên kết bên trong.

Giới thiệu khóa học

Hi, my name is Dan Scott and together, you and I are going to learn Webflow.

Webflow will enable you to create responsive, accessible websites using intuitive design techniques without the need for complex coding.

This course is aimed at people who are new to Webflow and to web design in general.

We will start by creating a simple single page site, learning basic layout techniques and using simple animations.

Webflow software is visual and does not require you to learn coding. You will learn how to ensure your website is consistent across desktop, laptop and mobile devices. We learn about CSS Classes for layout and font styling and also the importance of Class naming conventions.

If you have already tried using Webflow and are now wondering whether you should be using grids, flex, columns or divs and why…do not fear. By the end of this course you will know which to use and why!

We will learn how to build your own portfolio website and we will incorporate some exciting animations too.

Together we will learn to create and style forms and incorporate those into your website.

Some of you may have already started to use Figma or Adobe XD. I will show you how you can convert the files you have created and incorporate them into a Webflow site.

Previous experience using Figma or Adobe XD is not essential when using Webflow.

We will learn about Sticky Navs, SEO’s, Symbols, REM’s, Floats, Gradients and Fonts.

We will create a CMS website and a blog and will learn how to hand over responsibility for these to clients or colleagues, hand over the site so that someone other than you can then login and manage all of the content themselves.

We will look at , create and style an E-Commerce Site, creating and styling Shopping Carts, Order Forms and Shopping Gateways. We will learn how to sell both digital and physical products and services.

If some of the terminology such as Global, Flex, Grid, Nav all sounds too hard - remember we will start from scratch and work through techniques step by step. This course is aimed at anybody who wants to build websites using Webflow.

You may only need to design a single website for yourself, you may want to become a fulltime web designer, you might be a freelancer already and wanting to expand the type of work you are able to offer your clients. This course is for you!

I set assignments throughout this course which will enable you to practice your skills and to use what you create within your very own portfolio.

You are about to go from Website Zero to Webflow Hero!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học No Code Development
Hiển thị tất cả khoá học Ui Design
Hiển thị tất cả khoá học Web Development
Hiển thị tất cả khoá học Webflow
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊