CSS3, a must-learn for front-end beginners!! We'll thoroughly explore CSS3, from the basics to advanced levels!
Đánh giá từ những học viên đầu tiên
5.0
dlsrksrhk
Tôi là một backend developer, trước giờ chỉ thiết kế những tag và table cơ bản theo design đã được định sẵn, nhưng tôi thấy rất tốt khi có thể học về CSS và nguyên lý hoạt động bên trong mà trình duyệt nhận diện. Các yêu cầu về design ngày càng cao, cùng với đó là HTML, CSS ngày càng phức tạp để đáp ứng những yêu cầu đó... Tôi đã nghĩ mọi thứ chỉ trở nên phức tạp hơn mà không có quy tắc nào cả, nhưng càng nghe giảng, tôi càng thấy có những nguyên lý hoạt động ẩn giấu, và hơn hết là thầy lấy ví dụ dựa trên các trang web thực tế nên tôi hiểu rất nhanh. Tôi bỏ qua những nội dung đã biết và chỉ xem một vài chương thôi, nhưng tôi thấy có nhiều chi tiết hơn tôi nghĩ, nên tôi muốn nghe hết các chương còn lại càng sớm càng tốt. Đây là bài giảng thứ hai sau HTML, giọng thầy rất hay nên tôi còn nghe như một loại thuốc ngủ trước khi đi ngủ nữa?
5.0
rujung1225
Tôi thấy phương pháp học tập bằng cách xem trang mẫu, tự mình triển khai trang đó rồi xem phần giải thích rất hiệu quả.
5.0
creworroad
Vì có nhiều dự án thực hành nên rất tốt để ôn lại những phần đã học trước đó!
CSS3 Basic Syntax and Selectors
Understanding the Box Model (margin, padding, border, content area)
Layout techniques (Flexbox, Grid)
Colors, background, gradient effects
Font styling (Google Fonts, text effects)
CSS3 transitions and animations
CSS3 Responsive Web Design (Using Media Queries)
Variable fonts, how to use viewport units (vw, vh, etc.)
User interface styling (buttons, input forms, dropdowns, etc.)
New CSS3 features (dark mode support, clip-path, etc.)
Accessibility-conscious styling (adjustments for the visually impaired, etc.)
Approaching mobile-first design with CSS3
Hands-on practice with real CSS3-based projects (e.g., navigation bar, card layout, etc.)
Thực hành cơ bản
Huấn luyện cơ bản trung thành
Trong khóa học này, bạn sẽ học CSS3 một cách có hệ thống thông qua các bài tập cơ bản phù hợp với tiến trình học tập của bạn .
Thông qua thực hành cơ bản vững chắc, bạn sẽ bắt đầu với các khái niệm cơ bản của CSS3 và làm quen với từng thuộc tính và chức năng thông qua thực hành. Các bài tập được tiến hành từng bước để giúp bạn tiếp thu từng khái niệm một cách tự nhiên và học tập hiệu quả .
Mỗi bài tập sẽ đề cập đến các thuộc tính cốt lõi của CSS3 , cho phép bạn phát triển các kỹ năng thực tế từ cơ bản đến nâng cao, bao gồm kiểu dáng, bố cục và thiết kế web đáp ứng .
Hãy cùng bắt đầu hành trình tìm hiểu các công nghệ cốt lõi của CSS3, bắt đầu từ những điều cơ bản!
Trong bài học này, bạn sẽ học cách thiết kế bố cục và tạo trang thư viện ảnh đơn giản .
Đầu tiên, bạn sẽ học nhiều kỹ thuật thiết kế bố cục khác nhau bằng Flexbox và CSS Grid . Phần này sẽ hướng dẫn bạn cách căn chỉnh các mục trong thư viện , kiểm soát khoảng cách, lề và căn chỉnh .
Khi thiết kế trang thư viện ảnh, chúng tôi áp dụng thiết kế đáp ứng để tạo ra bố cục đẹp mắt trên nhiều kích thước màn hình khác nhau và thêm hiệu ứng di chuột và hoạt ảnh vào từng hình ảnh để làm cho trang trở nên sống động hơn.
Cuối cùng, bạn sẽ học được các kỹ thuật CSS nâng cao mà bạn có thể áp dụng vào thực tế, cũng như tinh chỉnh các thiết kế của mình thông qua việc thực hành.
Trong khóa học này, bạn sẽ tạo một trang thư viện ảnh thực tế và phong cách, đồng thời nâng cao hơn nữa kỹ năng thiết kế bố cục của mình .
Trong khóa học này, bạn sẽ học cách sử dụng đánh dấu HTML5 , CSS3 và thiết kế phản hồi bằng truy vấn phương tiện thông qua thực hành thực tế.
Đầu tiên, chúng ta sẽ tìm hiểu những kiến thức cơ bản về đánh dấu HTML5 , sau đó chúng ta sẽ bắt đầu tạo kiểu bằng CSS3 dựa trên kiến thức này. Sau đó, bạn sẽ triển khai thiết kế web đáp ứng bằng cách sử dụng truy vấn phương tiện và tạo các trang có thể thích ứng với nhiều kích thước màn hình khác nhau.
Khóa học thực hành này sẽ dạy cho bạn những kỹ năng cần thiết để xây dựng sự hiện diện trên web phản hồi nhanh chóng và giúp bạn tự tin tạo ra các trang web sẵn sàng hoạt động của riêng mình.
Trong khóa học này, bạn sẽ thành thạo các chuyển đổi không chỉ thông qua lý thuyết mà còn thông qua thực hành thực tế .
Chuyển tiếp là thuộc tính CSS mạnh mẽ giúp thêm hiệu ứng hoạt hình mượt mà vào những thay đổi về trạng thái của một phần tử. Trong bài học này, bạn sẽ tìm hiểu các nguyên tắc cơ bản về chuyển tiếp và cách chuyển đổi hiệu quả các thiết kế của mình bằng cách áp dụng các thuộc tính chuyển tiếp khác nhau.
Thông qua thực hành thực tế , bạn sẽ học cách tạo các hiệu ứng chuyển tiếp khác nhau , bao gồm thay đổi màu sắc, kích thước và vị trí, đồng thời phát triển khả năng áp dụng chúng vào thiết kế trang web .
Trong khóa học này, bạn sẽ học cách cải thiện trải nghiệm người dùng bằng cách sử dụng hiệu ứng chuyển tiếp và phát triển các kỹ năng để tạo các trang web tương tác .
Trong bài giảng này, chúng ta sẽ tìm hiểu về Bố cục lưới và tạo giao diện người dùng dạng thẻ .
Đầu tiên, hãy tìm hiểu các khái niệm và thuộc tính cơ bản của CSS Grid và học cách sử dụng nó để tạo ra nhiều bố cục khác nhau một cách hiệu quả. Sau đó, bạn sẽ học cách triển khai giao diện người dùng dạng thẻ và áp dụng vào thiết kế trang web thực tế .
Thông qua đào tạo thực hành, bạn sẽ tự do xử lý việc căn chỉnh bố cục thẻ , kích thước, khoảng cách, v.v. và thiết kế giao diện người dùng phản hồi với nhiều kích thước màn hình khác nhau bằng lưới phản hồi .
Trong khóa học này, bạn sẽ học những cách thực tế để sử dụng CSS Grid và tự tin tạo ra các thiết kế giao diện người dùng dựa trên thẻ sạch sẽ và hiệu quả .
Trong dự án này, bạn sẽ học một cách có hệ thống nhiều phương pháp thiết kế bố cục khác nhau trong khi sao chép và mã hóa màn hình chính theo cùng định dạng như Instagram .
Triển khai bố cục tương tự như dịch vụ thực tế bằng cách sử dụng mã đánh dấu HTML5 và kiểu dáng CSS3 . Nội dung chính được chia thành tiêu đề, nguồn cấp dữ liệu, thanh bên, v.v. để sắp xếp trang và thiết kế web đáp ứng được sử dụng để tạo ra một trang trông đẹp trên cả thiết bị di động và máy tính để bàn .
Trong phòng thí nghiệm thực hành này, bạn sẽ học cách cấu trúc các bố cục phức tạp một cách có hệ thống và các kỹ thuật phản hồi cần thiết cho thiết kế trang web thực tế . Hoàn thành một dự án sẽ mang lại cho bạn kinh nghiệm thực tế và tạo ra những kết quả tuyệt vời để bổ sung vào danh mục đầu tư của bạn.
Trong dự án này, chúng tôi sẽ sao chép hoàn hảo màn hình chính của Google từ logo Google đến thanh tìm kiếm .
Sử dụng HTML5 và CSS3 , nó tái tạo chính xác bố cục đơn giản của Google. Cấu trúc trang sẽ đơn giản và gọn gàng, tập trung vào logo Google, hộp tìm kiếm và nút tìm kiếm .
Phòng thí nghiệm thực hành này sẽ giúp bạn nắm vững các kỹ thuật CSS3 cơ bản như căn chỉnh, giãn cách và kiểu phông chữ , đồng thời xây dựng các kỹ năng thiết kế web thực tế bằng cách triển khai hộp tìm kiếm có chức năng giống như một trang web thực sự .
Ngoài ra, bạn có thể học các kỹ năng cần thiết cho các dự án web thực tế bằng cách áp dụng thiết kế web đáp ứng để tạo ra kết quả tối ưu từ màn hình di động đến màn hình máy tính để bàn .
Trong dự án này, bạn sẽ sao chép mã của một trang blog du lịch trong khi tìm hiểu cấu trúc HTML5 có hệ thống và kiểu dáng CSS3 hoàn hảo .
Chúng tôi sử dụng HTML5 để thiết kế cấu trúc trang web một cách rõ ràng và thêm kiểu dáng cho trang bằng CSS3 để tạo ra thiết kế trông giống như một blog du lịch thực sự.
Bằng cách áp dụng thiết kế phản hồi, bạn sẽ định cấu hình trang để tự động tối ưu hóa cho nhiều kích thước màn hình khác nhau và học các kỹ năng thiết kế có thể áp dụng ngay vào các dự án thực tế trong khi thực hành nhiều thành phần khác nhau như thư viện ảnh, bố cục văn bản và thanh menu .
Thông qua dự án này, bạn sẽ học cách tạo các trang web có cấu trúc và hiệu quả cũng như thiết kế web đáp ứng . Đây là cơ hội để học mọi thứ từ kiến thức cơ bản đến nâng cao về phát triển web bằng cách tạo ra một trang có chức năng giống như một blog thực sự .
Trong dự án này, chúng ta sẽ tạo một ứng dụng trò chuyện tương thích 100% với thiết bị di động . Bằng cách sử dụng HTML5 , CSS3 , Grid và Flex , chúng ta sẽ hoàn thiện một trang có chức năng giống như một ứng dụng trò chuyện thực sự .
Thiết kế cấu trúc ứng dụng bằng HTML5 và thêm kiểu trang bằng CSS3 để triển khai giao diện người dùng được tối ưu hóa cho thiết bị di động. Sử dụng Grid và Flexbox để sắp xếp hiệu quả bố cục cửa sổ trò chuyện và thực hành các thành phần như gửi tin nhắn, danh sách trò chuyện và ảnh hồ sơ .
Đặc biệt, chúng tôi tập trung vào khả năng phản hồi trên thiết bị di động và thiết kế màn hình trò chuyện được tối ưu hóa cho môi trường di động . Điều này sẽ dạy cho bạn tầm quan trọng của thiết kế web đáp ứng và giúp bạn tạo ra các trang có giao diện và hoạt động giống như các ứng dụng thực tế .
Dự án này cung cấp cơ hội học tập tốt nhất cho những ai muốn học về tối ưu hóa thiết bị di động và thiết kế UI/UX thực tế !
Dự án cuối cùng 5
Phòng khách
Trong dự án này, bạn sẽ học cách tạo màn hình chính bằng cú pháp HTML5 và kiểu dáng CSS3 mới nhất, đồng thời triển khai thiết kế web đáp ứng .
Bằng cách sử dụng các thẻ mới nhất của HTML5 và nhiều thuộc tính khác nhau của CSS3 , chúng tôi tạo ra một màn hình chính trông giống như một trang web thực tế . Thiết kế bố cục sử dụng Flexbox và Grid để tạo ra bố cục linh hoạt và gọn gàng, các yếu tố thiết kế được tối ưu hóa để có khả năng phản hồi nhằm đảm bảo chúng trông đẹp trên nhiều thiết bị khác nhau.
Trong khóa học này, bạn sẽ học ngữ pháp mới nhất và các tính năng nâng cao của CSS3 được sử dụng rộng rãi trong thực tế và bạn sẽ có thể triển khai bố cục được tối ưu hóa cho mọi kích thước màn hình dựa trên web đáp ứng .
Thông qua việc học lặp đi lặp lại, bạn sẽ học cách áp dụng HTML5 và CSS3 một cách hoàn hảo và phát triển khả năng tạo ra các trang web trông giống như thiết kế thực tế !
Cuối cùng, dự án cuối cùng ! Xin chúc mừng vì bạn đã trở thành một nhà xuất bản thực thụ . Bây giờ, hãy áp dụng mọi thứ bạn đã học vào công việc tốt nhất của mình .
Trong dự án này, chúng ta sẽ sử dụng HTML5 và CSS3 để tạo ra một trang web chất lượng cao giống như trang web thực tế. Chúng tôi sẽ sử dụng tất cả các kỹ năng bạn đã học được cho đến nay và áp dụng thiết kế đáp ứng cùng bố cục tinh vi để tạo ra một trang hoạt động giống như một trang web thực sự .
Dự án cuối cùng đã lấy đi toàn bộ hiểu biết của tôi với tư cách là một nhà xuất bản , nên tôi chẳng còn gì để học nữa. Với những kiến thức đã học được cho đến nay, tôi đã sẵn sàng tái sinh thành một nhà xuất bản có cả thiết kế hoàn chỉnh và mã hiệu quả . Bây giờ hãy tự tin đi xuống nhé ! 🙂
Xin chúc mừng và hy vọng bạn sẽ tiếp tục tạo ra nhiều trang web tuyệt vời trong hành trình tương lai của mình! 🎉
Khóa học này dành cho ai?
Beginner with no prior CSS experience
Experienced, but not confident in my CSS3 knowledge.
Practitioners who still roughly use CSS3 based on intuition.
Someone who wants to learn simply and easily without complicated explanations
Cần biết trước khi bắt đầu?
HTML5
4,864
Học viên
270
Đánh giá
135
Trả lời
4.9
Xếp hạng
7
Các khóa học
수코딩은 온라인과 오프라인을 병행하면서
코딩을 가르치는 활동을 하고 있습니다.
다년간의 오프라인 강의 경험을 바탕으로,
더 많은 사람들이 코딩을 쉽고 재미있게 배울 수 있도록
매일 고민하고, 끊임없이 노력하고 있습니다.
현재까지 다음과 같은 4권의 책을 출판하며
프런트엔드 강의 분야를 선도하고 있습니다:
또한, 유튜브 채널을 통해 다양한 무료 강의도 제공하고 있습니다.
👇 지금 바로 방문해 보세요
[유튜브 채널 링크]
Tất cả
181 bài giảng ∙ (15giờ 49phút)
Tài liệu khóa học:
Tất cả
9 đánh giá
5.0
9 đánh giá
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
Tôi thấy phương pháp học tập bằng cách xem trang mẫu, tự mình triển khai trang đó rồi xem phần giải thích rất hiệu quả.
rujung1225님, rất vui vì đã giúp được bạn! Nếu sau này có bất kỳ thắc mắc nào, hãy cứ thoải mái hỏi nhé :) Cảm ơn bạn!
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
Vì có nhiều dự án thực hành nên rất tốt để ôn lại những phần đã học trước đó!
Chào bạn creworroad! Cảm ơn bạn đã để lại đánh giá khóa học! Mình rất vui vì thông qua dự án thực hành, bạn đã có thể ôn lại những nội dung đã học một cách tự nhiên, đúng như ý đồ thiết kế bài giảng của mình. Trong tương lai, mình sẽ tiếp tục đền đáp bằng những bài giảng hữu ích cho việc ôn tập và ứng dụng thực tế. Chúc bạn luôn giữ vững tinh thần học tập đến cùng, và nếu có bất kỳ thắc mắc nào, hãy đặt câu hỏi cho mình bất cứ lúc nào nhé! 💪✨
Đánh giá 4
∙
Đánh giá trung bình 5.0
5
Không thể không để lại đánh giá khóa học. Thực sự tuyệt vời nhất.
Xin chào Tree J! Cảm ơn những lời chân thành của bạn! 🙏 Tôi thực sự vui mừng khi bạn đánh giá cao khóa học. Tôi sẽ tiếp tục nỗ lực để mang đến trải nghiệm học tập tốt nhất cho bạn. Cảm ơn bạn!
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Anh đã chia nhỏ nội dung một cách tỉ mỉ và giảng dạy nên rất dễ tập trung. Ngoài ra, anh giải thích từ từ nên tôi có thể hiểu ngay được.
D0Lph1n G1rL님, cảm ơn bạn 🙂 Thật sự rất vui khi biết rằng bài giảng đã giúp ích cho việc hiểu bài của bạn. Tôi sẽ chuẩn bị thật tỉ mỉ để bạn có thể hiểu từng bước một cách chậm rãi nhưng chắc chắn!
1.234.381 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!
css.png?f=avif&w=420)
![CSS3 tương tác web hiện đại [PHẦN 3/3]講義サムネイル](https://cdn.inflearn.com/public/courses/335746/cover/77dcadeb-88d7-4410-939e-265755e39733/335746.jpg?f=avif&w=420)
![CSS3 tương tác web hiện đại [PHẦN 1/3]講義サムネイル](https://cdn.inflearn.com/public/courses/335744/cover/32ae213b-41d5-4c80-8408-b64b8d286b58/335744.jpg?f=avif&w=420)
![Chức năng phát triển thiết kế web [2025] Toàn bộ thực hành (có thể hỏi qua KakaoTalk)講義サムネイル](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[Tiêu chuẩn ra đề 2026] Hướng dẫn hoàn hảo kỳ thi thực hành Kỹ năng phát triển thiết kế web講義サムネイル](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[Chân lợn ảo] Từ thiết kế đến viết mã講義サムネイル](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
