Lần đầu học lập trình với Web Publishing – từ cơ bản CSS đến web responsive

🎨 Trong thời đại AI thiết kế, tại sao vẫn cần học CSS?

Lần đầu học lập trình! Hoàn thiện thiết kế web bắt đầu từ CSS

AI có thể tạo website, liệu có cần học cả CSS không?

Nhờ sự phát triển của các công cụ AI như ChatGPT, Claude Code và Figma Make, giờ đây chỉ cần mô tả thiết kế là bạn đã có thể tạo ra trang web và mã CSS.

Nhưng nếu trang web do AI tạo ra hơi khác so với thiết kế tôi mong muốn thì phải làm thế nào?

• Nếu kích thước và khoảng cách của văn bản trông không tự nhiên thì sao?

• Nếu hình ảnh hoặc nút không được đặt ở vị trí mong muốn thì sao?

• Nếu hiển thị bình thường trên PC nhưng bố cục bị vỡ trên thiết bị di động thì sao?

• Nếu cần tự mình chỉnh sửa chuyển động hoặc hiệu ứng hoạt ảnh của nút thì sao?

Bạn có thể liên tục yêu cầu AI chỉnh sửa, nhưng nếu hiểu CSS, bạn có thể xác định nguyên nhân của vấn đề và viết yêu cầu chỉnh sửa cụ thể hơn.

Trong thời đại AI viết mã, khả năng hiểu kết quả được tạo ra và chỉnh sửa theo hướng mong muốn càng trở nên quan trọng.

CSS không chỉ đơn thuần là ngôn ngữ dùng để làm đẹp trang web. Đây là công nghệ cốt lõi giúp thiết kế bố cục, thích ứng với nhiều kích thước màn hình khác nhau và hoàn thiện trải nghiệm trực quan của website đối với người dùng.

Trong khóa học này, bạn sẽ học một cách có hệ thống từ cú pháp cơ bản của CSS đến bố cục, hoạt ảnh và thiết kế web đáp ứng.

Cuối cùng, bạn sẽ trực tiếp hoàn thiện CSS của trang web bằng cách tham khảo thiết kế thực tế.

💼 Nếu đang chuẩn bị xin việc, nền tảng CSS không phải là điều có thể lựa chọn bỏ qua.

Điều quan trọng đối với các nhà phát triển frontend và web publisher không chỉ đơn giản là hoàn thiện giao diện.

Trong công việc thực tế, bạn cần phân tích thiết kế để triển khai giao diện, đọc và chỉnh sửa mã CSS hiện có, thích ứng với nhiều kích thước màn hình khác nhau, đồng thời giải quyết những vấn đề bố cục ngoài dự kiến.

Do đó, cùng với khả năng nhanh chóng tạo mã bằng cách tận dụng AI, khả năng hiểu các nguyên lý cơ bản như bộ chọn CSS, mô hình hộp, bố cục, Flexbox, Position, web đáp ứng cũng rất quan trọng.

Không phải là người sử dụng nguyên xi CSS do AI viết,

Hiểu được vì sao nó được viết như vậy, đồng thời có thể tự mình phán đoán và sửa chữa khi phát sinh vấn đề.

Đây chính là nền tảng phát triển web cần thiết trong thời đại AI.

Trong khóa học này, bạn sẽ học từng bước từ cú pháp CSS cơ bản đến bố cục, Flexbox, hoạt ảnh và web responsive, qua đó xây dựng nền tảng CSS vững chắc, không bị lung lay ngay cả khi phát triển cùng AI.

✔️ Hãy tham gia khóa học trực tiếp do chính tác giả cuốn sách giảng dạy!

• Khóa học này được tác giả của cuốn sách <코딩은 처음이라 with 웹 퍼블리싱> thuộc Nhà xuất bản Youngjin.com giảng dạy dựa trên nội dung của sách. Nếu học cùng với sách, bạn sẽ tiếp thu hiệu quả hơn.

• Sau khi hoàn thành khóa học '코딩은 처음이라 with 웹 퍼블리싱 - HTML 기초', hãy tiếp tục học bài giảng này.

• Nếu bạn cần học bổ sung, hãy tham khảo các bài giảng bổ sung trên kênh YouTube của tác giả.

🚀 Khóa học này có gì khác biệt?

Thay vì chỉ ghi nhớ các thuộc tính CSS một cách máy móc, khóa học tập trung vào việc hiểu và vận dụng vai trò thực tế của từng thuộc tính trên trang web.

Thứ nhất, học các nguyên lý cơ bản của CSS.

Bạn sẽ học các khái niệm cốt lõi để xây dựng kiểu dáng, từ bộ chọn và độ ưu tiên trong CSS cho đến phông chữ, nền và mô hình hộp.

Thứ hai, bạn sẽ học cách xây dựng bố cục được sử dụng trong thực tế.

Sử dụng Float, Position và Flexbox để đặt các phần tử vào vị trí mong muốn và xây dựng bố cục trang web.

Thứ ba, triển khai các trang web chuyển động.

Transition, Transform, Animation을 활용하여 JavaScript 없이도 다양한 시각 효과를 구현합니다.

Thứ tư, trải nghiệm web responsive và dự án thực tế.

Học bố cục responsive thay đổi theo kích thước màn hình và hoàn thiện CSS của trang web bằng cách tham khảo thiết kế thực tế.

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

BƯỚC 01. Làm chủ hoàn toàn cú pháp CSS cơ bản và bộ chọn

Bắt đầu từ cú pháp cơ bản cần thiết để viết kiểu CSS.

• Cú pháp CSS cơ bản và màu sắc

• Các đơn vị CSS đa dạng như px, rem, v.v.

• Thẻ, ID, class và bộ chọn quan hệ

• Thuộc tính, lớp giả và bộ chọn cấu trúc

• Độ ưu tiên của bộ chọn CSS

Bạn sẽ học cách áp dụng chính xác kiểu dáng cho các phần tử HTML mong muốn bằng cách sử dụng bộ chọn CSS.

Đặc biệt, hiểu được độ ưu tiên của bộ chọn sẽ giúp bạn xác định nguyên nhân các vấn đề khi kiểu không được áp dụng như mong đợi.

BƯỚC 02. Tạo kiểu cho văn bản và nền tảng

Học các thuộc tính CSS đa dạng để nâng cao mức độ hoàn thiện về mặt hình ảnh của trang web.

• Tải và áp dụng phông chữ web

• Kích thước, độ đậm, trang trí và căn chỉnh văn bản

• Khoảng cách giữa các chữ và thụt lề

• Kiểm soát khu vực hiển thị nội dung bằng Overflow

• Cài đặt màu nền và hình ảnh

• Điều chỉnh vị trí và kích thước của hình nền

Học các kỹ năng cơ bản để áp dụng CSS cho văn bản và hình ảnh, tạo ra trang web gần giống với bản thiết kế.

BƯỚC 03. Cốt lõi của bố cục web! Box Model và Flexbox

Học các thuộc tính bố cục quyết định kích thước và vị trí của các phần tử trên trang web.

• Mô hình hộp CSS

• Bố cục sử dụng Float

• Bố trí phần tử bằng Relative và Absolute

• Fixed, Sticky và z-index

• Hướng, ngắt dòng và căn chỉnh của Flexbox

• Bố trí các phần tử bằng cách sử dụng thuộc tính order và flex

Hiểu vai trò của từng thuộc tính bố cục và học cách sử dụng phù hợp với từng tình huống.

BƯỚC 04. Tạo animation chỉ bằng CSS

Không cần JavaScript, chỉ với các thuộc tính CSS, bạn có thể thêm nhiều hiệu ứng hình ảnh khác nhau vào trang web.

• text-shadow và box-shadow

• CSS Gradient

• Thay đổi trạng thái mượt mà bằng Transition

• Tạo chuyển động bằng Animation

• Translate và Scale

• Rotate và Skew

Chúng tôi tạo ra UI cung cấp phản hồi trực quan cho người dùng, vượt xa việc chỉ thay đổi kiểu dáng đơn giản.

BƯỚC 05. Từ PC đến di động! Triển khai web responsive

Học các khái niệm cơ bản về web responsive, trong đó bố cục thay đổi tùy theo kích thước màn hình.

• Nguyên lý cơ bản của web responsive

• Thay đổi bố cục theo kích thước màn hình

• Triển khai Header responsive

• Thực hành hiệu ứng động cho chú thích và thanh điều hướng Aside

Rèn luyện khả năng sử dụng CSS để đáp ứng nhiều môi trường màn hình khác nhau.

BƯỚC 06. Dự án thực tế! Hoàn thiện thiết kế thành trang web thực tế

Đây là bước cuối cùng để áp dụng CSS đã học vào việc xây dựng một trang web thực tế.

Tham khảo thiết kế và trực tiếp triển khai kiểu dáng cho các khu vực sau.

• Khởi tạo CSS và áp dụng phông chữ web Google

• Viết kiểu dáng chung cho trang web

• Tạo kiểu cho khu vực Header

• Triển khai khu vực About Me

• Triển khai khu vực Latest Articles

• Hoàn thiện khu vực Contact và Footer

Trải nghiệm quy trình thực tế của công việc xuất bản web bằng cách áp dụng tổng hợp các thuộc tính CSS đã học qua nhiều buổi học vào một trang web duy nhất.

1) Nắm chắc bộ chọn CSS. CSS bắt đầu từ việc chọn chính xác đối tượng.

2) Học các kiểu liên quan đến phông chữ.

3) Học các thuộc tính thiết yếu liên quan đến bố cục.

4) Học tất cả các thuộc tính liên quan đến nền.

5) Học flex, cốt lõi của bố cục Flexible, để dễ dàng triển khai nhiều bố cục đa dạng hơn.

6) Học những kiến thức cơ bản về animation.

7) Học chắc chắn và thực hành những kiến thức cơ bản về thiết kế responsive.

Màn hình máy tính để bàn

Màn hình máy tính bảng

Màn hình di động

8) Sử dụng CSS để triển khai trang web HTML đã viết trong bài giảng trước. 

🎯 Khóa học này phù hợp với những ai:

1. Dành cho những người đã học xong HTML và bắt đầu làm quen với CSS

Khóa học phù hợp với những bạn có thể xây dựng cấu trúc trang web bằng HTML nhưng vẫn chưa quen với cách áp dụng thiết kế và bố cục.

2. Dành cho những ai muốn học thiết kế web và xuất bản web

Khóa học phù hợp với những ai muốn phân tích thiết kế, áp dụng kiểu cho các phần tử HTML và phát triển khả năng xây dựng trang web thực tế.

3. Dành cho những ai đã học CSS nhưng gặp khó khăn khi triển khai bố cục

Khóa học sẽ hữu ích cho những ai muốn hiểu rõ các khái niệm như Flexbox, Position, mô hình hộp và áp dụng chúng vào các trang web thực tế.

4. Dành cho những ai muốn sử dụng AI và lập trình vibe

Phù hợp với những người muốn hiểu mã CSS do AI tạo ra và trang bị năng lực cơ bản để tự chỉnh sửa thiết kế hoặc bố cục đáp ứng.

5. Dành cho những người chuẩn bị phát triển frontend như React

Bạn có thể trang bị kiến thức nền tảng về CSS để áp dụng kiểu dáng cho các component và xây dựng giao diện web đáp ứng nhiều kích thước màn hình khác nhau.

✅ Sau khi hoàn thành khóa học, bạn có thể làm được những điều sau

• Bạn có thể hiểu và vận dụng cú pháp cơ bản cùng các bộ chọn của CSS.

• Bạn có thể hiểu cách áp dụng kiểu dựa trên độ ưu tiên của bộ chọn.

• Có thể thể hiện các yếu tố đa dạng như văn bản, hình ảnh, nền theo thiết kế mong muốn.

• Bạn có thể xây dựng bố cục trang web bằng cách sử dụng mô hình hộp, Position và Flexbox.

• Có thể tạo hiệu ứng hình ảnh bằng CSS Transition và Animation.

• Có thể tạo trang web đáp ứng phù hợp với kích thước màn hình.

• Có thể hoàn thiện kiểu CSS của trang web bằng cách tham khảo thiết kế.

• Bạn có thể hiểu vai trò của mã CSS do AI tạo ra và chỉnh sửa các kiểu dáng, bố cục cơ bản.

Những kiến thức học được trong khóa học này cũng có thể được áp dụng khi học JavaScript và React sau này.

🤖 Trong thời đại AI, biết CSS sẽ tạo ra những khác biệt gì?

Có sự khác biệt giữa việc chỉ đơn giản yêu cầu AI “hãy làm cho trang web đẹp hơn” và việc truyền đạt những yêu cầu chỉnh sửa cụ thể khi đã hiểu các khái niệm cơ bản về CSS.

Ví dụ, bạn có thể yêu cầu như sau.

Tình huống 1. Chỉnh sửa bố cục

"Hiện tại các thẻ đang được sắp xếp theo chiều dọc. Hãy sử dụng Flexbox để sắp xếp chúng theo chiều ngang và đặt khoảng cách giữa các thẻ là 20px."

Tình huống 2. Cải thiện web responsive

"Trên PC, hãy sắp xếp menu theo chiều ngang và khi chiều rộng màn hình từ 768px trở xuống, hãy chuyển sang dạng menu dành cho thiết bị di động."

Tình huống 3. Thêm hiệu ứng hoạt ảnh

"Hãy áp dụng CSS Transition để màu nền thay đổi tự nhiên khi di chuột lên nút."

Tình huống 4. Khắc phục lỗi CSS

"Tôi muốn sắp xếp phần tử con dựa trên phần tử cha. Hãy chỉnh sửa mã để sử dụng relative và absolute, đồng thời giải thích các vấn đề trong mã hiện tại."

Hiểu CSS như vậy, bạn có thể truyền đạt yêu cầu rõ ràng hơn cho AI.

Khi xảy ra vấn đề trong đoạn mã do AI tạo ra, thay vì luôn yêu cầu tạo lại, bạn có thể xác định cần chỉnh sửa thuộc tính nào.

AI giúp rút ngắn thời gian tạo mã, còn hiểu biết về CSS giúp đánh giá và cải thiện chất lượng sản phẩm.

※ Đây là khóa học tập trung vào việc học CSS. Khóa học không bao gồm việc viết prompt AI và thực hành vibe coding; nội dung trên là ví dụ có thể áp dụng sau khi học CSS.

🎓 Nếu đã nắm vững kiến thức cơ bản về CSS, hãy chuyển sang bước tiếp theo!

Nếu đã học HTML và CSS, giờ hãy thử sử dụng JavaScript để thêm chuyển động cho trang web.

BƯỚC 01. Thổi hồn vào trang web bằng JavaScript

Học các cú pháp cốt lõi của JavaScript như biến, hàm, câu lệnh điều kiện và vòng lặp, đồng thời tìm hiểu cách tạo trang web động bằng cách thao tác DOM và sử dụng sự kiện.

Nền tảng JavaScript – tinh hoa của lập trình web!

BƯỚC 02. Bắt đầu phát triển frontend với React

Dựa trên kiến thức cơ bản về HTML, CSS và JavaScript, bạn sẽ học các khái niệm cốt lõi của React và xây dựng một website thực tế.

React lần đầu làm quen: Hướng dẫn thực hành dành cho nhà phát triển giao diện web

Ngay cả trong thời đại AI tạo ra thiết kế và mã nguồn, khả năng hiểu và hoàn thiện thiết kế mong muốn vẫn rất quan trọng.

Hãy học CSS để nắm vững nền tảng của thiết kế web và xây dựng cơ sở giúp bạn tận dụng AI hiệu quả hơn.