Chương 52: Hoàn thiện nền tảng kỹ thuật
Enjoy!
---------------------------
Hoàn thiện nền tảng kỹ thuật
Bài tập mà Takuya-san giao cho tôi: “Làm lại website của Mizunoya từ đầu, không dùng Google Sites.”
Tôi thử bắt tay vào làm bằng HTML, thứ mà Kobayashi-sensei đã dạy. Header, menu, nội dung, footer… về mặt cấu trúc thì đầy đủ cả. Thế nhưng, dù cố gắng thế nào, giao diện vẫn cứ thô cứng, thiếu tinh tế. Đổi font chữ cũng không khá hơn, thay màu nền cũng vậy — hoàn toàn không thể có được cảm giác gọn gàng, trau chuốt như Google Sites.
“Tại sao lại thế này chứ…”
Tôi đã thử thách bản thân bằng HTML, nhưng kết quả về mặt thiết kế lại khác xa mong đợi.
Tôi cắm đầu thử đủ mọi cách. Tăng giảm cỡ chữ, đổi màu nền, đổi màu chữ. Nhưng dù chỉnh sửa bao nhiêu lần, giao diện vẫn không thể đạt được vẻ đẹp tinh giản và chuyên nghiệp như những trang web tôi từng thấy.
“Chết tiệt… rốt cuộc là sai ở đâu?”
Một mình tôi rõ ràng đã chạm đến giới hạn. Thở dài một hơi, tôi đưa ra quyết định.
“Phải hỏi thầy Kobayashi thôi.”
Chiều hôm sau, sau giờ học, tôi tìm đến phòng tin học.
“Thưa thầy, em đã thử làm website bằng HTML rồi, nhưng phần thiết kế mãi không ổn ạ.”
Tôi cẩn thận kể lại toàn bộ sự việc. Lần này, tôi cũng nói cả chuyện của Takuya-san.
“Thật ra, ban đầu em làm website cho một tiệm bánh wagashi bằng Google Sites. Nhưng khi cho một đàn anh xem, anh ấy nói kiểu như: ‘Chỉ là dựa vào dịch vụ có sẵn thôi. Thứ cậu làm chỉ là chữ với hình ảnh.’ Em nghe mà tức lắm…”
Thầy Kobayashi bật cười khẽ.
“Ha ha, nói cũng nặng lời thật đấy. Nhưng mà… cũng không hẳn là sai. Google Sites hay WordPress đúng là rất tiện, nhưng khi muốn chỉnh chi tiết thiết kế hay tạo dấu ấn riêng thì vẫn có giới hạn. Dân thiết kế web chuyên nghiệp đều phải viết code từ đầu.”
Vừa nói, thầy vừa nhìn vào chiếc laptop của tôi.
“Vậy là lần này em định không dùng dịch vụ nào, tự làm từ đầu đúng không?”
“Dạ vâng. Nhưng mà…”
Tôi xoay màn hình laptop về phía thầy. Trên đó là phiên bản còn dang dở của website Mizunoya.
Kobayashi-sensei nhìn vào màn hình, gật gù.
“À, thầy hiểu rồi.”
“Em có thể chỉnh cỡ chữ, đổi màu… nhưng bố cục, khoảng cách, tổng thể nhìn cứ rất nghiệp dư, thô cứng ạ.”
Thầy tiếp tục gật đầu khi quan sát màn hình.
“Ừ, đúng rồi. Chỉ dùng HTML thì không thể tạo ra thiết kế đẹp được đâu. Em cần học thêm CSS.”
Thầy giải thích bằng giọng rất nhẹ nhàng.
“Được rồi, mình học CSS nhé.”
Nói rồi, thầy bắt đầu gõ bàn phím.
“CSS là viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để trang trí, tạo kiểu cho HTML. Ví dụ nhé…”
“Trước hết, em dùng HTML để tạo cấu trúc, sau đó áp style bằng CSS. Giả sử có một đoạn HTML như thế này…”
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>水野屋</h1>
<p>伝統の和菓子をお楽しみください</p>
</body>
</html>
“Với đoạn HTML đó, nếu em viết CSS như sau…”
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
border-bottom: 2px solid #007bff;
}
“Thì em có thể chỉ định màu sắc, font chữ, bố cục cho từng phần tử HTML. Nếu HTML là bộ khung xương, thì CSS giống như quần áo khoác lên vậy.”
“Ra là thế… Nghĩa là chỉ với HTML thì không làm được phần thiết kế, mà phải viết phần đó bằng CSS, đúng không ạ?”
Tôi thử diễn đạt lại điều mình vừa hiểu.
Khi lắng nghe thầy giải thích, tôi cảm nhận rõ ràng sự hứng thú đang lớn dần trong lòng. CSS… nếu có thứ này, có lẽ tôi thực sự có thể tạo ra một website mang dáng dấp của dân chuyên nghiệp.
Một cánh cửa mới, chậm rãi nhưng chắc chắn, đang mở ra trước mắt tôi.
“Em về bắt tay vào làm ngay đây ạ!”
Rời khỏi phòng tin học, tôi vội vã chạy thẳng về nhà.
Sáu giờ tối, vừa về đến nơi, tôi lập tức lao vào học CSS. Tôi gõ lại những đoạn code mà thầy Kobayashi đã chỉ, chỉnh sửa từng chút một rồi mở trình duyệt để kiểm tra kết quả. Không chỉ vậy, tôi còn lần theo các trang web hướng dẫn CSS, thử nghiệm đủ kiểu.
Màu sắc thay đổi, font chữ đổi khác, bố cục dần gọn gàng hơn… mỗi lần nhìn thấy sự khác biệt hiện ra trên màn hình, tim tôi lại rộn ràng không tả xiết.
Gần mười một giờ đêm, mẹ lo lắng ghé đầu vào phòng.
“Kenta, khuya rồi mà con còn làm gì thế?”
“CSS ạ… À, mẹ. Con đang chỉnh lại thiết kế website một chút thôi…”
“Gần mười hai giờ rồi đấy. Mai còn phải đi học mà?”
“Vâng, con biết rồi. Con sắp ngủ đây.”
Nhưng tôi không dừng lại được. Tôi đã hoàn toàn bị cuốn vào sức hấp dẫn của CSS.
“Cái này… thú vị thật sự…!”
Chỉ cần thay đổi một dòng code, giao diện trên trình duyệt đã biến đổi hoàn toàn. Cảm giác ấy chẳng khác nào đang làm phép thuật.
Đến khi nhận ra, tôi đã hoàn thành lần lượt hết trang học CSS này đến trang khác.
Trong đêm khuya, cuối cùng bài tập mà Takuya-san giao—“Làm lại website của Mizunoya”—cũng hoàn thành.
Tôi mở trang chủ lên, đặt cạnh phiên bản Google Sites cũ để so sánh. Màu header, cách bố trí menu, font chữ, kích thước hình ảnh… tôi kiểm tra từng chi tiết một.
“Hoàn hảo rồi… nhìn y hệt bản gốc.”
“Được rồi…! Lần này mình nhất định sẽ làm Takuya-san phải nhìn lại!”
Với cấu trúc HTML và phần trang trí bằng CSS, tôi đã tái hiện được thiết kế gần như hoàn chỉnh. Trong niềm phấn khích, tôi nén toàn bộ file lại thành ZIP rồi gửi qua LINE.
“Yamada-san, em đã hoàn thành bài tập rồi ạ! Tái hiện được gần như hoàn hảo!”
Ba mươi phút sau, tin nhắn hồi đáp từ Takuya-san xuất hiện.
“Hoàn toàn không đạt.”
“Hả!?”
Tôi chết lặng, mắt dán chặt vào màn hình điện thoại.
Hãy bình luận để ủng hộ người đăng nhé!