Cascading Style Sheets (CSS) là ngôn ngữ kỹ thuật được sử dụng để tạo bố cục và cấu trúc của các trang web và ứng dụng. Với CSS, bạn có thể điều chỉnh phong cách của trang web và tạo thiết kế trang web đáp ứng, giúp cả người dùng máy tính để bàn và thiết bị di động đều có thể truy cập trang web.
Theo Indeed, hiện có hơn 35.000 công việc yêu cầu kỹ năng về CSS. Kiến thức về CSS là một trong những kỹ năng kỹ thuật số tốt nhất cần có, đặc biệt vì nó được mong muốn trong nhiều lĩnh vực nghề nghiệp, bao gồm phát triển giao diện người dùng và phát triển trò chơi. Bài viết này đề cập đến một số bài tập CSS tốt nhất và các 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 nhằm cung cấp cho bạn những 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 ích cho công việc hàng ngày của bạn, phát triển kỹ năng CSS của bạn và chuẩn bị cho bạn trả lời các câu hỏi phỏng vấn CSS kỹ thuật.
10 bài tập CSS và bài tập thực hành (Có lời giải)
1. Màu liên kết CSS
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 được nhúng trong trang web. Hàm này xác định các liên kết được nhúng bằng màu thay thế cho văn bản của bạn để làm nổi bật chúng. Học cách thay đổi các cách phối màu này và các giai đoạn mà một liên kết trải qua trong quá trình trải nghiệm của người dùng là điều quan trọng.
Giải pháp: Bạn có thể sử dụng hướng dẫn từng bước để tìm hiểu màu liên kết CSS. CSS Tricks và W3schools cũng cung cấp các bài tập thực hành về màu sắc liên kết CSS để trau dồi kỹ năng của bạn.
2. Làm việc với Mô hình hộp CSS
Mô hình hộp CSS đề cập đến các quy tắc xác định cách tính kích thước của các thành phần CSS trong khi thêm phần đệm, đường viền và lề bao quanh nội dung. Mô hình hộp CSS không đầy đủ có thể gây ra phản hồi không đầy đủ và bố cục dễ hỏng.
Giải pháp: Làm theo hướng dẫn cách thực hiện trên các mô hình hộp CSS. Bạn cũng có thể thực hành kỹ năng tạo mô hình hộp của mình bằng Tài liệu Web MDN.
3. Làm việc với độ dày phông chữ
Việc khai báo sai font-weight có thể khiến văn bản xuất hiện trái ngược với dự định của bạn. Ngoài ra, đôi khi, bạn có thể áp dụng quy tắc CSS chính xác nhưng văn bản vẫn không hoạt động như bình thường. Đây có thể là sự cố với phần tử thay đổi từ không gian 2D sang không gian 3D hoặc ngược lại.
Giải pháp: Làm theo hướng dẫn về cách sử dụng font-weight. W3schools cung cấp năm bài tập mà bạn có thể thực hiện để trau dồi khả năng sử dụng phông chữ của mình.
4. Tìm hiểu cú pháp cơ bản của CSS
Mã CSS được tạo bằng cú pháp cơ bản tuân theo các quy tắc CSS. Kiến thức về cú pháp cơ bản CSS rất quan trọng trong ngành phát triển sản phẩm kỹ thuật số. Việc sử dụng đúng bộ chọn hoặc kết hợp các bộ chọn, chẳng hạn như bộ chọn chuỗi hoặc bộ chọn phần tử và khai báo CSS có thể là một phần khó khăn trong trải nghiệm học tập phát triển của bạn.
Giải pháp: Đọc hướng dẫn cú pháp CSS để bạn có thể tìm hiểu về các quy tắc kiểu CSS, khai báo CSS, bộ chọn CSS, nhận xét CSS cũng như nhận xét một dòng và nhiều dòng.
5. Tạo nút bằng kỹ năng CSS3 của bạn
Bài tập tạo nút này sẽ minh họa khả năng thực hiện các kỹ năng khác nhau của bạn. Khi tạo một nút, bạn sẽ phải triển khai và xem xét nhiều yếu tố khác nhau, chẳng hạn như nhiều đường viền, sử dụng phông chữ tùy chỉnh và bắt bóng văn bản tinh tế. Bạn cũng sẽ cần hiểu cách tách nền khỏi phần chính của nút và thực hiện công việc chính xác với bán kính đường viền lồng nhau.
Giải pháp: Thực hành tạo nên sự hoàn hảo. Hãy thực hiện bài tập tạo lại nút này từ Mobiify để thực hành và nâng cao trình độ CSS của bạn.
Hãy tưởng tượng rằng một thanh bên đã nằm xuống bên 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ại tới 100 phần trăm do phần đệm. Tuy nhiên, có nhiều cách khác nhau để khắc phục nó.
Dự án cơ bản này sẽ chỉ cho bạn cách sử dụng kích thước hộp, cách sử dụng calc() để thực hiện các phép tính khi chỉ định các giá trị thuộc tính CSS, cách điều chỉnh các số để thực hiện phép toán và cách đặt phần đệm vào phần tử trình bao bên trong được thêm vào.
Giải pháp: Bạn có thể thực hành và nâng cao kỹ năng cũng như kiến thức của mình liên quan đến các thanh bên được mã hóa CSS bằng CodePen.
7. Khắc phục các thay đổi về chiều rộng cho thiết kế đáp ứng
Thiết kế trong bài tập này rộng 800px. Để có thiết kế đáp ứng, nội dung phải phù hợp với mọi kích thước màn hình. Trong hành trình mã hóa CSS của mình, bạn sẽ cần thực hành thay đổi độ rộng pixel, sử dụng các giải pháp hình ảnh đáp ứng và duy trì thứ bậc quan trọng. Hãy nhớ kiểm tra thiết kế của bạn và đảm bảo các giải pháp của bạn hoạt động.
Giải pháp: CodePen có một bài tập thực tế mà bạn có thể thực hành để giúp bạn thành thạo các kỹ năng về CSS.
8. Giải quyết vấn đề với Bộ chọn CSS
CSS phải được viết theo một định dạng cụ thể để trình duyệt có thể hiểu được. Đây là phần đầu tiên của quy tắc CSS, mẫu phần tử và các thuật ngữ khác giao tiếp với trình duyệt về các thành phần HTML cần chọn và áp dụng các giá trị thuộc tính CSS. Chúng được gọi là “chủ đề của bộ chọn”.
Giải pháp: Thực hành sử dụng Bộ chọn CSS bằng cách làm theo hướng dẫn. Việc kiểm tra quá trình viết CSS của bạn có thể tốn thời gian và có nhiều công cụ miễn phí khác nhau có thể trợ giúp, chẳng hạn như {CSS}Portal. CodePen cũng cung cấp các bài tập thực hành mà bạn có thể làm trực tuyến.
9. Bố cục lưới CSS
Bố cục lưới CSS được sử dụng trong nhiều ngành ngày nay, bao gồm cả trong bố cục của bài viết và bài đăng trên blog. Đây là bố cục hai chiều cho web. Việc bố trí nội dung theo hàng và cột cho phép sử dụng nhiều tính năng giúp đơn giản hóa việc tạo các bố cục phức tạp. Đây là một trong những chủ đề thách thức nhất trong CSS, đặc biệt là khi bạn phải tính đến khả năng phản hồi.
Giải pháp: MDN Web Docs cung cấp bài tập toàn diện để thực hành.
10. Thực hành mã CSS
Làm việc với tệp CSS và viết mã CSS là rất quan trọng. Viết mã CSS xấu có thể gây rối với toàn bộ hệ thống. Ví dụ:lề có thể hoạt động bất thường hoặc bạn có thể tạo ra các hoạt ảnh sai hoặc không đủ. Thực hiện một số mã hóa thực tế là cách tốt nhất để nâng cao kỹ năng viết mã CSS của bạn.
Giải pháp: Có một cách dễ dàng để luyện tập với Flexbox Froggy, một trò chơi ứng dụng web dành cho trẻ em, với 24 bài tập từ sơ cấp đến trung cấp. Chơi trò chơi trực tuyến của Flexbox Froggy để viết mã CSS.
Cách nhận trợ giúp về CSS
Sử dụng tài nguyên mã có sẵn trực tuyến có thể giúp bạn nắm vững mục tiêu mã hóa CSS của mình. Nhận trợ giúp về CSS tương đối dễ dàng với tất cả các công cụ có sẵn và lượng tài nguyên vô tận mà bạn có thể tìm thấy trực tuyến. Bạn có thể tìm thấy các chuyên gia, báo cáo, hướng dẫn và nhiều thông tin khác về các vấn đề cụ thể về CSS mà bạn có thể gặp phải.
Cho dù bạn có màu nền xanh lam thay vì màu đỏ hay bạn đang giải quyết vấn đề về phông chữ có nguồn gốc chéo thì rất nhiều tài nguyên trực tuyến bao gồm các chủ đề nâng cao luôn sẵn sàng giúp bạn giải quyết các vấn đề về CSS. Dưới đây là một số tài nguyên tốt nhất để bạn sử dụng.
Bài tập CSS
Các bài tập trong bài viết này cung cấp trải nghiệm CSS thông qua thực hành và bạn có thể tìm thấy nhiều bài tập tương tự trên mạng. Những bài tập này cũng nâng cao kiến thức và kỹ năng CSS của bạn trong việc xử lý các vấn đề CSS cụ thể và phổ biến. Nắm vững các bài tập này sẽ giúp bạn tạo ra một thiết kế đáp ứng xuất sắc, đồng thời làm quen với các bài tập CSS nâng cao.
"Nghề nghiệp đã bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi tham gia chương trình đào tạo. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với các giá trị và mục tiêu trong cuộc sống của mình!"
Venus, Kỹ sư phần mềm tại Rockbot
Tìm trận đấu Bootcamp của bạn
Dự án CSS
CSS là một trong những công nghệ giao diện người dùng được sử dụng nhiều nhất để phát triển trang web và thường được sử dụng với HTML. Các dự án CSS giúp bạn xây dựng danh mục đầu tư. Danh mục này có thể cung cấp những phương pháp thực hành có giá trị để mài giũa kỹ năng CSS của bạn và thể hiện trình độ thành thạo của bạn với các nhà tuyển dụng tiềm năng.
Câu hỏi CSS
Kiểm tra kiến thức và kỹ năng CSS của bạn là điều quan trọng để đạt được trình độ thành thạo về CSS. Cho dù bạn muốn kiểm tra kỹ năng CSS của mình hay thực hiện các câu đố bao gồm các chủ đề cụ thể, như cách tạo và sửa đổi danh sách không có thứ tự, hình nền, tệp riêng biệt, tên lớp hoặc độ dốc CSS, bạn đều có thể tìm thấy nhiều câu đố CSS trực tuyến.
Diễn đàn và blog CSS
Diễn đàn và blog viết mã CSS có thể là những tài nguyên hữu ích, cung cấp hỗ trợ và giải pháp cho những mối quan tâm phức tạp mà bạn có thể đang gặp khó khăn để tìm ra. Họ cũng cung cấp thông tin cập nhật về công nghệ mới và thông tin liên quan đến ngành có thể có tầm quan trọng thực tế đối với bạn.
Tôi có thể thực hành CSS ở đâu?
Như được minh họa trong bài viết này, bạn có thể thực hành CSS một cách độ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 thông qua các dự án và thêm chúng vào danh mục mã hóa của mình. Bạn cũng có thể thực hành trong khi học CSS thông qua các khóa học miễn phí hoặc trả phí.
Các 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à vô số thử thách.
- Codewell . Trang web này cung cấp các mẫu Figma trong thế giới thực để thực hành. Đây là một nơi tốt để nâng cao kỹ năng CSS của bạn. Bạn cũng có thể tham gia vào các cuộc trò chuyện có giá trị về các giải pháp và phản hồi trên trang web hoặc trong cộng đồng Slack.
- CSSBattle . Đây là một hệ thống gamification dành riêng cho CSS, là một cách tuyệt vời để kiểm tra và theo dõi tiến trình. Những trận chiến này sẽ không cho bạn biết cách làm việc với CSS nhưng chúng sẽ giúp bạn có được trải nghiệm CSS với các thuộc tính CSS trung cấp hơn.
- CodePen . CodePen cung cấp các thử thách CSS để bạn thực hiện trực tuyến. Bạn có thể chia sẻ giải pháp với những người khác đã tham gia, nhận phản hồi và xem mã của người khác để tìm hiểu thông tin chi tiết.
- Người cố vấn giao diện người dùng . Trên trang web này, bạn có thể giải quyết các thách thức về HTML, CSS và JavaScript trong thế giới thực. Có hơn 280.000 nhà phát triển xây dựng dự án, xem xét mã 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à thông qua chương trình đào tạo mã hóa. Chương trình đào tạo mã hóa cung cấp cho bạn một chương trình học tập thực hành có cấu trúc tốt và được các nhà tuyển dụng trong ngành công nhận. Bạn cũng có thể đăng ký một khóa học trực tuyến, xem video hướng dẫn hoặc đọc sách để tìm hiểu CSS.
Câu hỏi thường gặp về bài tập CSS
CSS dùng để làm gì?
Mã CSS được sử dụng để tạo thiết kế trang web cùng với HTML.
Mã CSS có phổ biến không?
Có, mã CSS rất phổ biến. Theo báo cáo của W3Techs, mã CSS được sử dụng bởi 96,3% tất cả các trang web hiện nay. Một số công ty lớn nhất sử dụng CSS, chẳng hạn như Google, YouTube và Facebook.
Tôi có thể kiếm được việc làm chỉ với kỹ năng viết mã CSS không?
Mặc dù bạn có thể làm việc chỉ với CSS nhưng CSS thường được sử dụng song song với các phần mềm khác. Chúng tôi khuyên bạn nên trang bị các kỹ năng về HTML, CSS và JavaScript, đặc biệt nếu bạn muốn trở thành nhà phát triển web.