Cascading Style Sheets (CSS) là ngôn ngữ kỹ thuật dùng để tạo bố cục và cấu trúc cho trang web và ứng dụng. Với CSS, bạn có thể tùy chỉnh style của trang web và tạo thiết kế trang web responsive (đáp ứng), làm cho trang web truy cập được trên cả desktop và mobile.
Theo Indeed, hiện có hơn 35.000 việc làm yêu cầu kỹ năng CSS. Kiến thức CSS là một trong những kỹ năng số tốt nhất để có, đặc biệt khi nó được mong muốn khắp nhiều lĩnh vực nghề nghiệp, bao gồm phát triển front end và phát triển game. Bài viết này bao gồm một số bài tập CSS tốt nhất và dự án thân thiện với người mới bắt đầu.
Dưới đây là một số bài tập thực hành CSS để cung cấp kiến thức cơ bản về CSS. Chúng tôi cũng sẽ liệt kê các tài nguyên bổ sung để nâng cao trình độ lập trình hiện tại của bạn. Những điều này sẽ giúp cho công việc hàng ngày, phát triển kỹ năng CSS, và chuẩn bị bạn trả lời câu hỏi phỏng vấn kỹ thuật về CSS.
10 bài tập và vấn đề thực hành CSS (Có lời giải)
1. Màu liên kết CSS (CSS Link Color)
Màu liên kết CSS cung cấp và kiểm soát màu của các liên kết neo (anchor links) nhúng trong trang web. Chức năng này định nghĩa các liên kết nhúng trong màu thay thế cho văn bản của bạn để làm cho chúng nổi bật. Việc học cách thay đổi các bảng màu này và các giai đoạn một liên kết trải qua trong trải nghiệm người dùng là sống còn.
Lời giải: Bạn có thể dùng hướng dẫn từng bước để học màu liên kết CSS. CSS Tricks và W3schools cũng cung cấp bài tập thực hành màu liên kết CSS để mài giũa kỹ năng.
2. Làm việc với CSS Box Model
CSS box model đề cập đến các quy tắc xác định cách kích thước các thành phần CSS được tính toán trong khi thêm padding, border, và margin bao quanh nội dung. Mô hình hộp CSS không đầy đủ có thể gây ra responsive kém và bố cục mong manh.
Lời giải: Theo dõi hướng dẫn cách làm về CSS box model. Bạn cũng có thể thực hành kỹ năng box modeling với MDN Web Docs.
3. Làm việc với Font-Weight
Khai báo font-weight sai có thể khiến văn bản xuất hiện theo cách trái ngược với ý định của bạn. Thay vào đó, đôi khi bạn có quy tắc CSS đúng nhưng văn bản vẫn không hoạt động như nó nên. Điều này có thể là vấn đề với phần tử thay đổi từ không gian 2D sang 3D, hoặc ngược lại.
Lời giải: Theo dõi hướng dẫn về sử dụng font-weight. W3schools cung cấp năm bài tập bạn có thể làm để mài giũa khả năng font-weight.
4. Hiểu CSS Basic Syntax (Cú pháp cơ bản)
Code CSS được tạo bằng cú pháp cơ bản tuân theo quy tắc CSS. Kiến thức về cú pháp cơ bản CSS là quan trọng trong ngành phát triển sản phẩm kỹ thuật số. Việc sử dụng bộ chọn đúng hoặc tổ hợp bộ chọn, như bộ chọn chuỗi (chaining selector) hoặc bộ chọn phần tử (element selector), và khai báo CSS có thể là phần khó khăn trong trải nghiệm học phát triển của bạn.
Lời giải: Đọc hướng dẫn cú pháp CSS để bạn có thể học về quy tắc style CSS, khai báo CSS, bộ chọn CSS, chú thích CSS, và chú thích một dòng và nhiều dòng.
5. Tạo nút bấm (Button) bằng kỹ năng CSS3 của bạn
Bài tập tạo nút bấm này sẽ minh họa khả năng thực hiện nhiều kỹ năng của bạn. Khi tạo nút bấm, bạn sẽ phải triển khai và xem xét nhiều yếu tố, như nhiều border (viền), dùng font tùy chỉnh (custom fonts), và bắt bóng chữ (text-shadow) tinh tế. Bạn cũng sẽ cần hiểu cách tách background từ phần chính của nút bấm và làm việc chính xác với border-radius lồng nhau (nested).
Lời giải: Thực hành làm cho hoàn hảo. Làm bài tập tái tạo nút bấm này từ Mobify để thực hành và tăng trình độ CSS.
6. Sửa Sidebar CSS (Fix CSS Sidebar)
Hãy tưởng tượng một sidebar đã rơi xuống dưới nội dung trang. Điều này xảy ra vì bố cục hai cột không cộng lên 100% do padding. Tuy nhiên, có nhiều cách để khắc phục.
Dự án cơ bản này sẽ chỉ cho bạn cách dùng box-sizing, cách dùng calc() để thực hiện tính toán khi chỉ định giá trị thuộc tính CSS, cách điều chỉnh số để toán học hoạt động, và cách đặt padding trên một phần tử wrapper nội bộ được thêm vào.
Lời giải: Bạn có thể thực hành và nâng cao kỹ năng và kiến thức liên quan đến sidebar được viết bằng CSS với CodePen.
7. Sửa thay đổi Width cho Responsive Design
Thiết kế trong bài tập này rộng 800px. Đối với thiết kế responsive, nội dung nên vừa với bất kỳ kích thước màn hình nào. Trong hành trình viết code CSS của bạn, bạn sẽ cần thực hành thay đổi chiều rộng pixel, dùng giải pháp hình ảnh responsive, và giữ thứ bậc quan trọng. Hãy nhớ kiểm tra thiết kế và chắc chắn giải pháp của bạn hoạt động.
Lời giải: CodePen có bài tập thực tế bạn có thể thực hành để làm chủ kỹ năng CSS.
8. Giải quyết vấn đề với CSS Selector
CSS phải được viết theo một định dạng cụ thể để trình duyệt hiểu nó. Nó là phần đầu tiên của quy tắc CSS, mẫu của các phần tử, và các thuật ngữ khác truyền đạt cho trình duyệt biết thành phần HTML nào để chọn và áp dụng giá trị thuộc tính CSS. Những thứ này được gọi là "chủ thể của bộ chọn" (subject of the selector).
Lời giải: Thực hành sử dụng CSS Selector bằng cách theo dõi hướng dẫn. Kiểm tra viết code CSS có thể tốn thời gian, và có nhiều công cụ miễn phí giúp, như {CSS}Portal. CodePen cũng cung cấp bài tập thực tế bạn có thể làm trực tuyến.
9. CSS Grid layout
CSS grid layout được dùng trong nhiều ngành công nghiệp ngày nay, bao gồm trong bố cục bài viết và bài blog. Đây là bố cục hai chiều cho web. Việc trình bày nội dung theo hàng và cột cho phép nhiều tính năng đơn giản hóa việc tạo bố cục phức tạp. Đây là một trong những chủ đề khó khăn nhất trong CSS, đặc biệt khi bạn phải tính đến responsive.
Lời giải: MDN Web Docs cung cấp bài tập toàn diện để thực hành.
10. Thực hành code CSS
Làm việc với file CSS và viết code CSS là sống còn. Viết code CSS xấu có thể làm rối toàn bộ hệ thống. Ví dụ, margin có thể hoạt động lạ hoặc bạn có thể kết thúc với animation sai hoặc không đủ. Việc viết code thực tế là cách tốt nhất để tăng kỹ năng viết code CSS.
Lời giải: Có một cách dễ dàng để thực hành với Flexbox Froggy, một game web app cho trẻ em, với 24 bài tập từ cơ bản đến trung cấp. Chơi game trực tuyến Flexbox Froggy để viết code CSS.
Làm thế nào để nhận trợ giúp với CSS
Việc sử dụng các tài nguyên code có sẵn trực tuyến có thể giúp bạn làm chủ mục tiêu viết code CSS.
Nhận trợ giúp với CSS tương đối dễ dàng với tất cả các công cụ và lượng tài nguyên vô tận bạn có thể tìm thấy trực tuyến. Bạn có thể tìm thấy chuyên gia, báo cáo, hướng dẫn, và nhiều hơn nữa trên các vấn đề CSS cụ thể bạn có thể gặp phải.
Dù bạn có màu nền xanh lam nên là đỏ, hay bạn đang đối mặt với vấn đề font cross-origin, một kho tài nguyên trực tuyến bao gồm các chủ đề nâng cao có sẵn để giúp bạn giải quyết vấn đề CSS của bạn. Dưới đây là một số tài nguyên tốt nhất cho bạn dùng.
Bài tập CSS (CSS Exercises)
Các bài tập trong bài viết này cung cấp kinh nghiệm CSS qua thực hành và bạn có thể tìm thấy nhiều bài tập tương tự trực tuyến. Các bài tập này cũng tăng kiến thức và kỹ năng CSS trong việc xử lý các vấn đề CSS cụ thể và phổ biến. Làm chủ các bài tập này sẽ hỗ trợ bạn trong việc tạo thiết kế responsive tuyệt vời, trong khi tiến lên các bài tập CSS nâng cao.
Dự án CSS (CSS Projects)
CSS là một trong những công nghệ front end được dùng nhiều nhất cho phát triển trang web và thường dùng với HTML. Dự án CSS giúp bạn xây dựng portfolio. Portfolio này có thể cung cấp thực hành giá trị cho việc mài giũa kỹ năng CSS và minh họa trình độ thành thạo của bạn cho nhà tuyển dụng tiềm năng.
Quiz CSS (CSS Quizzes)
Kiểm tra kiến thức và kỹ năng CSS là sống còn để đạt thành thạo CSS. Dù bạn muốn kiểm tra kỹ năng CSS hay làm quiz bao gồm chủ đề cụ thể, như cách tạo và sửa danh sách không có thứ tự (unordered list), hình ảnh nền (background image), file riêng biệt (separate file), tên class, hoặc gradient CSS, bạn có thể tìm nhiều quiz CSS trực tuyến.
Diễn đàn và Blog CSS (CSS Forums and Blogs)
Diễn đàn và blog viết code CSS có thể là tài nguyên hữu ích, cung cấp sự trợ giúp và giải pháp cho các mối quan tâm phức tạp bạn có thể đang cố gắng tìm ra. Chúng cũng cung cấp cập nhật về công nghệ mới và thông tin liên quan đến ngành có thể có ý nghĩa thực tiễn cho bạn.
Ở đâu tôi có thể thực hành CSS?
Như được minh họa trong bài viết này, bạn có thể thực hành CSS độc lập với các tài nguyên trực tuyến có sẵn. Bạn có thể thực hành CSS qua các dự án và thêm chúng vào portfolio viết code của bạn. Bạn cũng có thể thực hành trong khi bạn học CSS qua khóa học miễn phí hoặc trả phí.
Trang web để thực hành CSS
- freeCodeCamp. Đây là một trong những tài nguyên tốt nhất để học CSS và các chương trình khác miễn phí, với hơn 7.000 hướng dẫn và hàng tá thử thách.
- Codewell. Trang web này cung cấp mẫu Figma thực tế để thực hành. Đây là nơi tốt để nâng cấp kỹ năng CSS. Bạn cũng có thể tham gia các cuộc hội thoại giá trị về giải pháp và phản hồi trên trang web hoặc trong cộng đồng Slack.
- CSSBattle. Đây là hệ thống game hóa (gamification) chuyên về CSS, một cách tuyệt vời để kiểm tra và theo dõi tiến độ. Những trận đấu này không nói cho bạn cách làm việc với CSS, nhưng chúng sẽ giúp bạn tích lũy kinh nghiệm CSS với các thuộc tính CSS trung cấp hơn.
- CodePen. CodePen cung cấp thử thách CSS để bạn làm trực tuyến. Bạn có thể chia sẻ giải pháp với người khác đã tham gia, nhận phản hồi, và xem code của người khác để hiểu sâu hơn.
- Frontend Mentor. Trên trang web này, bạn có thể giải quyết thử thách HTML, CSS, và JavaScript thực tế. Có hơn 280.000 nhà phát triển xây dựng dự án, review code, và học hỏi lẫn nhau.
Cách tốt nhất để học CSS là gì?
Một trong những cách tốt nhất bạn có thể học CSS là qua coding bootcamp. Coding bootcamp cung cấp cho bạn chương trình học có cấu trúc tốt, thực hành (hands-on) được công nhận bởi nhà tuyển dụng trong ngành. Bạn cũng có thể đăng ký khóa học trực tuyến, xem hướng dẫn video, hoặc đọc sách để học CSS.
Câu hỏi thường gặp về bài tập CSS
CSS dùng để làm gì?
Code CSS được dùng để tạo thiết kế trang web, cùng với HTML.
Code CSS có phổ biến không?
Có, code CSS phổ biến. Code CSS được dùng bởi 96,3% tất cả các trang web ngày nay, theo báo cáo của W3Techs. Một số công ty lớn nhất dùng CSS, như Google, YouTube, và Facebook.
Tôi có thể tìm việc chỉ với kỹ năng viết code CSS không?
Mặc dù bạn có thể tìm việc chỉ với CSS, CSS thường được dùng cùng với phần mềm khác. Chúng tôi khuyên bạn nên trang bị HTML, CSS, và JavaScript, đặc biệt nếu bạn muốn trở thành nhà phát triển web.