Dự án HTML & CSS giúp bạn thực hành kỹ năng frontend

Hầu như người mới bắt đầu học frontend nào cũng từng vấp phải bức tường này.

Các bài hướng dẫn bắt đầu mờ nhạt dần. Bạn biết thẻ div là gì. Bạn có thể nhìn lướt qua stylesheet của người khác và hiểu chuyện gì đang xảy ra. Xem ba video về Flexbox? Đã xong. Nhưng khi bạn mở một tệp index.html trống và con trỏ chuột nhấp nháy trước mắt, đầu óc bạn bỗng trở nên trống rỗng.

Xem thêm một bài hướng dẫn nữa không phải là giải pháp. Tự làm một dự án mới là câu trả lời.

Một dự án đủ nhỏ để hoàn thành trong những ngày cuối tuần, với một kết quả trực quan mà bạn có thể khoe với bạn bè. Kiến thức HTML và CSS chỉ thực sự khắc sâu khi bạn tự tay gõ code, làm hỏng nó, rồi tự tìm cách sửa lại những gì mình đã làm hỏng.

Các lộ trình học HTML và CSS là một trong những phần hoạt động sôi nổi nhất trên nền tảng Coddy. Và những người kiên trì đủ lâu để cảm thấy tự tin với code frontend đều có một điểm chung: họ hoàn thành các dự án nhỏ một cách hằng ngày. Họ không đợi đến khi mình "biết đủ nhiều". Họ bắt tay vào xây dựng, vấp tường, tra cứu thông tin, rồi tiếp tục tiến bước.

Hướng dẫn này sẽ mang đến cho bạn 18 dự án HTML và CSS được sắp xếp theo cấp độ kỹ năng, từ một trang web đơn trang cho đến một carousel chỉ dùng CSS. Bạn không cần phải xây dựng tất cả chúng. Hãy chọn một dự án vào cuối tuần này và hoàn thành nó.

Tại sao làm dự án lại tốt hơn việc chỉ xem hướng dẫn

Đọc code mang lại cảm giác hiệu quả. Nhưng thực tế thì không phải vậy.

Dù dành cả tháng xem video trên YouTube, bạn vẫn có thể không tự dựng nổi một landing page cơ bản, bởi vì việc xem và việc viết code sử dụng các vùng tư duy khác nhau. Đặc biệt là với CSS, bạn phải tự tay gõ thì mới nhớ lâu được, vì phần lớn CSS là những điều chỉnh nhỏ nhặt mà bạn chỉ có thể học được qua những lần thử và sai.

Các dự án cũng buộc bạn phải tra cứu thông tin! Công việc frontend thực chất gồm khoảng 30% viết code và 70% tìm kiếm trên MDN, đọc tài liệu (docs), và tìm hiểu xem tại sao một phần tử (element) lại bị lệch đi hai pixel. Các bài hướng dẫn thường che giấu tất cả những khó khăn đó.

Một lợi ích khác của việc làm dự án là bạn có sản phẩm thực tế để chỉ vào. Câu nói "Tôi đang học HTML và CSS" thật khó để mang lại cảm giác tự hào. Nhưng "Tôi đã tự làm trang web nhà hàng này, đây là đường link" lại là thứ bạn có thể tự tin gửi cho bạn bè. Cảm giác "chính tay mình làm ra" đó là động lực giúp mọi người vượt qua những tuần học tập gian nan.

Cách thiết lập môi trường (Bỏ qua nếu bạn đã làm xong)

Không cần thiết lập gì cầu kỳ cho HTML và CSS. Bạn chỉ cần ba thứ sau:

1. Một trình soạn thảo mã nguồn (text editor). VS Code là lựa chọn phổ biến nhất của hầu hết mọi người. Nó hoàn toàn miễn phí, và sau khi làm được vài dự án, bạn sẽ thấy có rất nhiều tiện ích mở rộng (extension) CSS đáng để cài đặt.
2. Một trình duyệt. Bất kỳ trình duyệt nào bạn đang sử dụng. Công cụ dành cho nhà phát triển (dev tools) (nhấp chuột phải, chọn Inspect - Kiểm tra) là cách bạn gỡ lỗi (debug) các vấn đề về bố cục (layout). Hãy rèn luyện thói quen này từ sớm.
3. Một thư mục cho mỗi dự án. Chỉ cần tệp index.html và style.css để bắt đầu! Đừng bận tâm về các công cụ đóng gói (build tools), framework, hay các "thực hành tốt nhất" (best practices) trong dự án đầu tiên của bạn.

Nếu bạn muốn bỏ qua bước thiết lập, các bài học HTML và bài học CSS của Coddy chạy trực tiếp trên trình duyệt mà không cần cài đặt. Điều này rất hữu ích khi bạn muốn thực hành một khái niệm cụ thể mà không cần tạo một dự án mới. Còn nếu không, một thư mục và một trình soạn thảo mã nguồn là quá đủ.

Các dự án HTML & CSS cho người mới bắt đầu

Năm dự án này sử dụng các kiến thức cơ bản: tiêu đề (heading), đoạn văn (paragraph), hình ảnh, danh sách (list), liên kết (link), cùng một chút màu sắc và khoảng cách. Sau vài bài học HTML và CSS, bạn hoàn toàn có thể hoàn thành bất kỳ dự án nào trong số này chỉ trong vài giờ.

1. Trang tri ân (Tribute Page)

Hãy chọn một người mà bạn ngưỡng mộ (một nhạc sĩ, nhà văn, vận động viên, nhà khoa học) và xây dựng một trang tri ân đơn trang. Một tiêu đề lớn, một ảnh nổi bật (hero image), một tiểu sử ngắn, dòng thời gian về cuộc đời họ, và một danh sách các liên kết để tìm hiểu thêm. Toàn bộ trang web chỉ sử dụng tiêu đề, đoạn văn, hình ảnh, danh sách và CSS cơ bản để định dạng chữ (typography) và khoảng cách. Đây là dự án HTML đầu tay kinh điển vì một lý do: không có gì ở đây là khó cả.

2. Trang cá nhân "Giới thiệu bản thân" (About Me)

Một trang web cá nhân đơn trang để giới thiệu về bản thân bạn. Hình ảnh, tiểu sử ngắn, danh sách những thứ bạn yêu thích, và một phần thông tin liên hệ. Bạn sẽ được điểm cộng nếu đưa trang web này lên mạng. GitHub Pages hoàn toàn miễn phí và chỉ mất vài phút để thiết lập. Giờ đây bạn đã có một đường link thực tế để chia sẻ rồi.

3. Thẻ công thức nấu ăn (Recipe Card)

Một công thức nấu ăn với hình ảnh nổi bật của món ăn, danh sách nguyên liệu, các bước thực hiện được đánh số, và thời gian chuẩn bị được hiển thị trong một hộp chi tiết nhỏ. Dự án này giúp bạn học cách phân biệt danh sách có thứ tự (ordered list) và không có thứ tự (unordered list), cách định kích thước hình ảnh, và cách sắp xếp một trang web nhiều nội dung trông thật ngăn nắp thay vì lộn xộn.

4. Trang biểu mẫu liên hệ (Contact Form)

Một trang web có biểu mẫu (form): tên, email, tin nhắn, và nút gửi. Biểu mẫu này chưa cần phải gửi dữ liệu đi đâu cả, đó là phần việc của JavaScript. Mục tiêu ở đây là làm quen với các phần tử biểu mẫu HTML (input, textarea, label, button) và định dạng (style) chúng để không bị thô kệch như giao diện mặc định của trình duyệt. Biểu mẫu xuất hiện trong hầu hết mọi dự án frontend, vì vậy việc làm quen với chúng ngay từ bây giờ sẽ mang lại lợi ích lớn sau này.

5. Thực đơn nhà hàng đơn giản (Restaurant Menu)

Một trang thực đơn đơn giản cho một nhà hàng giả định. Các danh mục (món khai vị, món chính, món tráng miệng), mỗi món ăn đi kèm tên và mô tả ngắn. Hãy thêm một banner nổi bật ở trên cùng và một phần chân trang (footer) nhỏ hiển thị giờ mở cửa. Dự án này giúp bạn thực hành cách nhóm nội dung thành các phần (section), lặp lại các bố cục, và lựa chọn một bảng màu hài hòa.

Các dự án cấp độ trung cấp (Flexbox, Grid, Bố cục)

Bạn sẽ bắt đầu sắp xếp bố cục một cách bài bản, xử lý nhiều phần khác nhau, và tạo ra một sản phẩm trông giống như một trang web thực tế trên mạng. Hầu hết các dự án này đều dựa vào Flexbox hoặc CSS Grid, đây chính là những kỹ năng quan trọng mà bạn cần rèn luyện.

6. Landing Page cho một sản phẩm giả định

Hãy chọn một sản phẩm (một ứng dụng, một công cụ SaaS, một thương hiệu nến thơm, hoặc bất cứ thứ gì) và xây dựng một trang landing page giống như trang chủ của sản phẩm đó. Phần nổi bật (hero section) với tiêu đề chính và nút kêu gọi hành động (call-to-action - CTA). Một phần giới thiệu ba tính năng nổi bật ở bên dưới. Phần đánh giá của khách hàng (testimonials). Chân trang với các liên kết. Toàn bộ dự án này là một bài tập rèn luyện Flexbox và Grid tuyệt vời, đồng thời là bài học về khoảng cách và phân cấp thị giác (visual hierarchy).

7. Trang web Portfolio cá nhân

Một trang web gồm nhiều phần để giới thiệu các sản phẩm của bạn, ngay cả khi hiện tại "sản phẩm" của bạn chỉ là hai trang tri ân và một thẻ công thức nấu ăn. Phần đầu trang (header) có thanh điều hướng (navigation), phần nổi bật, lưới hiển thị dự án, phần giới thiệu bản thân, và phần liên hệ. Hãy sử dụng Grid cho bố cục lưới dự án, và Flexbox cho thanh điều hướng và phần nổi bật.

Đây là một dự án hữu ích ngay cả khi bạn nghĩ mình chưa cần đến portfolio. Ngay khi bạn bắt đầu ứng tuyển công việc hoặc làm tự do (freelance), bạn đã có sẵn một trang web để giới thiệu bản thân.

8. Bảng giá dịch vụ (Pricing Table)

Ba mức giá được xếp cạnh nhau, mỗi mức giá nằm trong một thẻ (card) riêng biệt có tên gói, danh sách tính năng và nút kêu gọi hành động. Hãy thêm nhãn nổi bật "Phổ biến nhất" (Most Popular) cho gói ở giữa. Các bảng giá trông có vẻ đơn giản nhưng lại ẩn chứa nhiều chi tiết phức tạp: các thẻ phải có chiều cao bằng nhau, các danh sách gạch đầu dòng phải thẳng hàng, và hiệu ứng di chuột (hover) trên các nút. Đây là một bài thực hành Flexbox tuyệt vời.

9. Trang chủ Blog

Một trang danh sách bài viết của blog: đầu trang có thanh điều hướng và thanh tìm kiếm, một bài viết nổi bật ở trên cùng, một lưới các bài viết gần đây ở bên dưới, thanh bên (sidebar) chứa các danh mục và bình luận mới nhất, và chân trang ở dưới cùng. Dự án này dạy bạn cách xử lý bố cục nội dung với nhiều khu vực khác nhau, gần gũi hơn với giao diện thực tế của các dự án thực tế.

10. Trang đăng nhập và đăng ký (Login & Signup)

Hai trang web có liên quan đến nhau, một trang đăng nhập và một trang đăng ký, với biểu mẫu được căn giữa, tiêu đề mang thương hiệu, và các liên kết để chuyển đổi qua lại giữa hai trang. Thử thách ở đây là tạo ra một giao diện trông thật tinh tế mà không bị quá đà. Những trang đăng nhập tốt nhất thường được căn chỉnh chuẩn xác và đẹp mắt hơn một chút so với mong đợi của người dùng. Đây là một bài tập rèn luyện gu thẩm mỹ rất hay nhưng thường bị xem nhẹ.

11. Giao diện Dashboard tĩnh

Một bố cục bảng điều khiển (dashboard) tĩnh: thanh điều hướng bên trái, thanh trên cùng chứa thông tin người dùng, khu vực nội dung chính với một vài thẻ số liệu thống kê, một khung trống cho biểu đồ, và danh sách hoạt động gần đây. Chưa cần có tính năng tương tác nào ở đây cả. Đây thuần túy là một dự án về bố cục. Grid sẽ đảm nhận hầu hết các phần việc nặng nhọc. Sau khi hoàn thành, bạn sẽ hiểu tại sao CSS Grid lại tồn tại, và tại sao những người chưa từng thử dùng nó lại liên tục phàn nàn về việc dựng bố cục.

Các dự án hiệu ứng & hoạt ảnh (Animation) CSS

Bây giờ chúng ta sẽ đến với phần thú vị nhất. Các dự án này có quy mô nhỏ hơn nhưng tập trung nhiều hơn vào CSS. Chúng rất tuyệt vời để bạn làm quen với các hiệu ứng chuyển cảnh (transitions), keyframes, biến đổi (transforms), và các lớp giả (pseudo-classes) như :hover và :focus.

12. Hiệu ứng tải trang (Loading Spinner)

Một hiệu ứng tải trang thuần CSS. Hãy thử một vài biến thể: một vòng tròn xoay, ba dấu chấm nhấp nháy, một vòng tròn mạch đập, hoặc một thanh tiến trình liên tục chạy đầy. Mỗi biến thể chỉ mất khoảng 15 dòng CSS nhưng sẽ dạy cho bạn về @keyframes, animation, và transform.

13. Thư viện ảnh với hiệu ứng di chuột (Hover Effects)

Một lưới các bức ảnh mà khi bạn di chuột qua mỗi bức ảnh, một dòng chú thích sẽ hiện ra với hiệu ứng chuyển cảnh mượt mà. Hãy thử các hiệu ứng khác nhau: một lớp phủ trượt lên, phóng to hình ảnh, hoặc một bộ lọc màu mờ dần. Đây là dự án giúp hầu hết mọi người thực sự hiểu cách hoạt động của transition. Bạn cũng sẽ học được cách xếp chồng các phần tử bằng position: absolute.

14. Thanh điều hướng có hoạt ảnh (Animated Navigation Bar)

Một thanh điều hướng với logo ở bên trái và các mục menu ở bên phải, trong đó các mục menu sẽ tự động gạch chân khi di chuột qua bằng một hiệu ứng trượt mượt mà, và trang hiện tại sẽ luôn được gạch chân. Trên thiết bị di động, menu sẽ thu gọn thành biểu tượng ba sọc (hamburger icon) để mở ra một menu thả xuống (dropdown). Đây là một khuôn mẫu (pattern) mà bạn sẽ sử dụng mãi mãi: các trạng thái hoạt ảnh trên các phần tử tương tác, cùng với khả năng hiển thị tương thích (responsive) trên nhiều kích thước màn hình khác nhau.

15. Hiệu ứng lật thẻ CSS (CSS Card Flip)

Một chiếc thẻ tự động lật mặt khi di chuột qua để lộ thông tin ở mặt sau (một câu trích dẫn, một định nghĩa, hoặc một chi tiết bổ sung). Dự án này sử dụng transform: rotateY và backface-visibility, hai thuộc tính CSS mà bạn ít khi dùng tới nhưng lại mang lại cảm giác vô cùng kỳ diệu trong lần đầu tiên chúng hoạt động. Một dự án nhanh gọn nhưng mang lại sự tự tin rất lớn.

16. Trình trình chiếu ảnh chỉ dùng CSS (CSS-Only Image Slider)

Một carousel ảnh cuộn theo chiều ngang với các nút điều khiển trước/sau, được xây dựng hoàn toàn bằng CSS mà không cần JavaScript. Bí quyết ở đây là sử dụng các nút chọn (radio buttons) được ẩn đi và bộ chọn (selector) :checked để thay đổi hình ảnh hiển thị. Đây là một kỹ thuật thông minh, giúp bạn nhận ra mình có thể làm được bao nhiêu điều chỉ với CSS trước khi cần đến JS. Dự án này rất đáng để thử một lần, ngay cả khi thông thường bạn sẽ xây dựng nó bằng JavaScript.

Các dự án HTML & CSS nâng cao

Những dự án cuối cùng này dành cho những ai đã thành thạo các kiến thức cơ bản và muốn tìm kiếm một thử thách thực sự. Chúng vẫn hoàn toàn là HTML và CSS thuần túy (không cần JavaScript) nhưng sẽ đòi hỏi bạn rất nhiều về khả năng dựng bố cục, sự tỉ mỉ và lòng kiên nhẫn.

17. Sao chép giao diện một trang chủ nổi tiếng (Clone Homepage)

Hãy chọn một trang web thực tế (trang chủ Netflix, landing page của Spotify, hoặc trang sản phẩm Apple cho một thiết bị cụ thể) và tái tạo lại phần giao diện hiển thị của nó bằng HTML và CSS một cách chính xác nhất có thể. Không cần phải làm cho các tính năng hoạt động, chỉ cần khớp hoàn toàn về bố cục, định dạng chữ, khoảng cách và màu sắc.

Bạn sẽ mất hàng giờ để tự hỏi làm thế nào họ có được khoảng đệm (padding) chính xác đến vậy, rồi hiểu ra tại sao các lưới lại được đo lường theo cách đó, và bắt đầu chú ý đến các quyết định thiết kế bố cục trên mọi trang web bạn truy cập. Các nhà phát triển frontend thường truyền tai nhau về việc thực hiện bài tập này trong nhiều năm.

18. Vẽ tranh bằng CSS (CSS Art)

Vẽ một thứ gì đó chỉ bằng các phần tử div và CSS. Nhiều người đã tạo ra những bức minh họa chi tiết đến kinh ngạc bằng cách này: các nhân vật hoạt hình, phong cảnh, động vật, thậm chí cả chân dung. Hãy bắt đầu với một thứ đơn giản như một tách cà phê, một khuôn mặt cười, hoặc một chú robot cơ bản.

Nghe có vẻ ngớ ngẩn cho đến khi bạn thực sự bắt tay vào làm. Sau đó, nó sẽ trở thành một bài học sâu sắc về position, border-radius, box-shadow, các dải màu (gradients), và transform. Cuối cùng, bạn sẽ hiểu CSS ở một cấp độ mà hầu hết những người mới bắt đầu không bao giờ đạt tới, chỉ từ việc cố gắng vẽ một hình tròn bên trong một hình chữ nhật.

Vai trò của Coddy trong hành trình của bạn

Các bài học HTML và bài học CSS của Coddy được thiết kế để lấp đầy khoảng trống giữa "Tôi muốn học điều này" và "Tôi có thể tự xây dựng một dự án." Mỗi bài học chỉ kéo dài khoảng năm phút, bạn sẽ viết code thực tế ngay trên trình duyệt, và Bugsy (trợ lý AI tích hợp trong bài học) sẽ luôn có mặt khi bạn gặp khó khăn, chẳng hạn như tại sao margin: auto lại không thể căn giữa phần tử của bạn theo chiều dọc.

Toàn bộ lộ trình được xây dựng xoay quanh việc thực hành hằng ngày. Năm phút chỗ này, năm phút chỗ kia, cùng một mô hình giúp mọi người mở các ứng dụng học ngôn ngữ mỗi sáng, nay được áp dụng vào việc học lập trình. Nếu bạn từng bỏ dở một khóa học tự học nào đó khi mới đi được khoảng 30% chặng đường, thì định dạng bài học ngắn gọn (bite-sized) này chính là thứ bạn đang thiếu.

Cả HTML và CSS đều nằm trong gói miễn phí, áp dụng cho mọi bài học và không cần thiết lập. Điều đó thường khiến nhiều người ngạc nhiên. Bạn sẽ không phải gặp một bức tường thu phí (paywall) khi đang học dở Flexbox!

Một vài thói quen hữu ích

Trước khi bạn chọn một dự án, đây là ba điều nhỏ nhặt nhưng mang lại sự khác biệt đáng ngạc nhiên:

Sử dụng công cụ dành cho nhà phát triển của trình duyệt. Nhấp chuột phải vào bất kỳ phần tử nào, chọn Inspect (Kiểm tra), và nhìn vào bảng styles. Bạn có thể chỉnh sửa trực tiếp CSS trên trình duyệt để xem kết quả ngay lập tức. Đây là công cụ gỡ lỗi tốt nhất mà bạn từng sử dụng, và nó đã có sẵn miễn phí trên mọi trình duyệt.

Xây dựng ưu tiên thiết bị di động (mobile-first). Hãy bắt đầu viết CSS cho màn hình nhỏ trước, sau đó thêm các truy vấn phương tiện (media queries) để giao diện trông đẹp mắt trên các màn hình lớn hơn. Làm ngược lại sẽ khó khăn hơn nhiều. Đây là khuôn mẫu mà hầu hết code frontend hiện đại đang sử dụng, vì vậy việc rèn luyện thói quen này ngay từ bây giờ sẽ giúp bạn đỡ phải sửa lại code sau này.

Hoàn thành phiên bản thô trước. Hãy làm cho trang web hoạt động được với nội dung tạm thời (placeholder) và định dạng cơ bản. Việc trau chuốt hãy để sau. Sai lầm mà nhiều người mới bắt đầu mắc phải là dành ba tiếng đồng hồ để tạo ra một chiếc nút hoàn hảo trước khi nhận ra bố cục trang web thực tế không hoạt động, và giờ đây mọi thứ phải làm lại từ đầu.

Nên xây dựng gì tiếp theo

Nếu bạn hoàn thành một dự án và dự án tiếp theo hiện ra một cách rõ ràng trong đầu, đó là một dấu hiệu tốt. Bạn đã sẵn sàng!

Hãy chọn dự án tiếp theo trong danh sách này và bắt đầu. Đừng đợi cho đến khi bạn cảm thấy "đủ sẵn sàng", bởi vì cảm giác đó sẽ không bao giờ đến. Chỉ là một ngày nào đó, bạn chợt nhận ra mình đã xây dựng được sáu sản phẩm và sản phẩm thứ bảy có vẻ hoàn toàn nằm trong tầm tay.

Nếu bạn không biết nên chọn gì tiếp theo, hãy mặc định chọn dự án nào khiến bạn cảm thấy hơi e ngại một chút. Sự bứt phá về kỹ năng chỉ xảy ra ở ranh giới của vùng an toàn, chứ không phải ở ngay giữa vùng an toàn đó.

Và nếu bạn đang vấp phải những bức tường ở các kiến thức cơ bản (bộ chọn không hoạt động, bố cục bị vỡ, Flexbox không có tác dụng), hãy tạm dừng dự án một buổi và tham gia một số bài học tập trung để lấp đầy khoảng trống kiến thức đó.

Các lộ trình HTML và CSS của Coddy được thiết kế chính xác cho việc đó: thực hành ngắn gọn, có mục tiêu vào đúng khái niệm bạn đang bị kẹt, rồi quay lại tiếp tục dự án của mình.