Với sự phát triển của rất nhiều ngôn ngữ lập trình, phong cách và đánh dấu, việc học thiết kế web đang trở nên phức tạp hơn bao giờ hết. May mắn thay, có rất nhiều công cụ có sẵn để giúp bạn bắt đầu. Tìm kiếm một số tài nguyên cơ bản, chẳng hạn như hướng dẫn trực tuyến hoặc một cuốn sách cập nhật về thiết kế web. Khi bạn đã sẵn sàng bắt đầu, hãy bắt đầu bằng cách nắm vững những kiến thức cơ bản về HTML và CSS. Sau đó, bạn có thể bắt đầu khám phá các ngôn ngữ thiết kế web nâng cao hơn, như JavaScript!
Các bước
Phương pháp 1/4: Tìm tài nguyên thiết kế web
Bước 1. Kiểm tra trực tuyến các khóa học và hướng dẫn thiết kế web
Internet có đầy đủ thông tin chi tiết về thiết kế web và rất nhiều thông tin được cung cấp miễn phí. Bạn có thể bắt đầu bằng cách tham gia một số khóa học trực tuyến miễn phí trên Udemy hoặc CodeCademy, hoặc tham gia một cộng đồng mã hóa như freeCodeCamp. Bạn cũng có thể tìm thấy các video hướng dẫn thiết kế web trên YouTube.
- Nếu bạn biết chính xác những gì bạn đang tìm kiếm, hãy thử thực hiện tìm kiếm bằng các thuật ngữ cụ thể (ví dụ: “bộ chọn lớp trong hướng dẫn CSS”).
- Nếu bạn là người mới bắt đầu chưa có kinh nghiệm thiết kế web, hãy bắt đầu bằng cách tìm hiểu về những điều cơ bản về mã hóa trong HTML và CSS.
Bước 2. Xem xét tham gia một lớp học tại một trường cao đẳng hoặc đại học địa phương
Nếu bạn đang theo học một trường cao đẳng hoặc đại học, hãy kiểm tra với bộ phận khoa học máy tính của trường bạn hoặc tham khảo danh mục khóa học của bạn để tìm hiểu xem có khóa học thiết kế web nào không. Nếu bạn không đi học, hãy kiểm tra xem có trường cao đẳng hoặc đại học nào gần bạn có cung cấp các lớp giáo dục thường xuyên về thiết kế web hay không.
Một số trường đại học cung cấp các lớp học thiết kế web trực tuyến dành cho bất kỳ ai muốn đăng ký. Kiểm tra các trang web như Coursera.org để tìm các lớp thiết kế web miễn phí hoặc giá cả phải chăng do các giảng viên đại học dạy
Bước 3. Lấy một số sách thiết kế web từ hiệu sách hoặc thư viện
Một cuốn sách hay về thiết kế web có thể là một tài liệu tham khảo vô giá khi bạn đang học và áp dụng nghề của mình. Tìm kiếm những cuốn sách cập nhật về thiết kế web chung hoặc các định dạng và ngôn ngữ mã hóa cụ thể mà bạn muốn học.
Đọc tạp chí và các bài báo trên blog về thiết kế web cũng là một cách tốt để học các kỹ thuật mới, lấy cảm hứng và bắt kịp các xu hướng mới nhất
Bước 4. Tải xuống hoặc mua một số phần mềm thiết kế web
Phần mềm thiết kế web tốt có thể giúp bạn xây dựng trang web hiệu quả và hiệu quả hơn, đồng thời cũng rất tốt để giúp bạn tìm hiểu chi tiết về việc áp dụng mã hóa, tập lệnh và các yếu tố thiết kế quan trọng khác. Bạn có thể được lợi khi sử dụng các công cụ như:
- Các chương trình thiết kế đồ họa, như Adobe Photoshop, GIMP hoặc Sketch.
- Các công cụ xây dựng trang web, chẳng hạn như WordPress, Chrome DevTools hoặc Adobe Dreamweaver.
- Phần mềm FTP để chuyển các tệp đã hoàn thành của bạn lên máy chủ của bạn.
Bước 5. Tìm một số mẫu trang web để chơi khi bạn bắt đầu
Không có gì sai khi sử dụng các mẫu khi bạn tìm hiểu các kiến thức cơ bản về thiết kế web. Thực hiện tìm kiếm các mẫu trang web bạn thích và xem kỹ mã để có ý tưởng về cách nhà thiết kế kết hợp các trang lại với nhau. Bạn cũng có thể thử nghiệm với việc thay đổi mã và thêm các yếu tố của riêng bạn vào mẫu.
Thực hiện tìm kiếm các mẫu trang web miễn phí để bắt đầu hoặc thử nghiệm với các mẫu đi kèm với phần mềm thiết kế web của bạn
Phương pháp 2/4: Thành thạo HTML
Bước 1. Làm quen với các thẻ HTML cơ bản
HTML là một ngôn ngữ đánh dấu đơn giản được sử dụng để định dạng các phần tử cơ bản của một trang web. Bạn có thể định dạng các phần tử khác nhau của trang web của mình bằng cách sử dụng các thẻ. Các thẻ xuất hiện trong dấu ngoặc nhọn trước và sau mỗi phần tử và cung cấp hướng dẫn về cách phần tử đó sẽ hoạt động trên trang. Để đóng thẻ, hãy đặt dấu / trước thẻ cuối cùng bên trong dấu ngoặc nhọn.
- Ví dụ: nếu bạn muốn một số văn bản của mình in đậm, bạn sẽ bao quanh phần tử bằng thẻ, như sau: Văn bản này được in đậm.
- Một số thẻ phổ biến bao gồm (đoạn văn), (ký tự liên kết, xác định văn bản được liên kết) và (phông chữ, có thể giúp xác định các thuộc tính khác nhau của văn bản, như kích thước và màu sắc).
- Các thẻ khác xác định các phần khác nhau của chính tài liệu HTML. Ví dụ: được sử dụng để chứa thông tin về trang sẽ không hiển thị cho người xem, như từ khóa hoặc mô tả trang sẽ xuất hiện trong kết quả của công cụ tìm kiếm.
Bước 2. Tìm hiểu cách sử dụng thuộc tính thẻ
Một số thẻ cần thông tin bổ sung để chỉ định cách chúng hoạt động. Thông tin bổ sung này xuất hiện trong thẻ mở và nó được gọi là “thuộc tính”. Tên thuộc tính xuất hiện ngay sau tên thẻ, được phân tách bằng dấu cách. Giá trị thuộc tính được gắn vào tên thuộc tính bằng dấu = và được bao quanh bởi dấu ngoặc kép.
- Ví dụ: nếu bạn muốn làm cho một số văn bản của mình có màu đỏ, bạn có thể làm điều đó bằng cách sử dụng thẻ và thuộc tính màu phông chữ thích hợp, như sau: Văn bản này có màu đỏ.
- Nhiều hiệu ứng trước đây thường đạt được với các thuộc tính thẻ HTML, chẳng hạn như thiết lập các màu phông chữ khác nhau, giờ đây thường được thực hiện bằng mã hóa CSS.
Bước 3. Thử nghiệm với các phần tử lồng nhau
HTML cũng cho phép bạn đặt các phần tử bên trong các phần tử khác để tạo định dạng phức tạp hơn. Ví dụ: nếu bạn muốn xác định một đoạn văn và sau đó in nghiêng một số văn bản trong đoạn văn, bạn có thể làm như sau:
Tôi thích viết mã!
Bước 4. Làm quen với các phần tử trống
Một số phần tử trong HTML không cần cả thẻ mở và thẻ đóng. Ví dụ: nếu bạn đang chèn một hình ảnh, bạn chỉ cần một thẻ “img” chứa tên thẻ và bất kỳ thuộc tính cần thiết nào khác (chẳng hạn như tên tệp hình ảnh và bất kỳ văn bản thay thế nào bạn muốn thêm cho mục đích trợ năng). Ví dụ:
Bước 5. Khám phá bố cục cơ bản của một tài liệu HTML
Để trang web dựa trên HTML của bạn hoạt động bình thường, bạn cần biết cách định dạng toàn bộ trang. Điều này liên quan đến việc xác định nơi mã html của bạn bắt đầu và kết thúc, cũng như sử dụng các thẻ để xác định phần nào của mã sẽ được hiển thị so với phần nào ở đó để cung cấp thông tin cơ bản ẩn. Ví dụ:
- Sử dụng thẻ để xác định trang của bạn dưới dạng tài liệu HTML.
- Tiếp theo, chứa toàn bộ trang của bạn trong các thẻ để xác định nơi mã của bạn bắt đầu và kết thúc.
- Đặt bất kỳ thông tin nào sẽ không được hiển thị cho người xem, chẳng hạn như tiêu đề trang, từ khóa và mô tả trang của bạn, trong các thẻ.
- Xác định nội dung trang của bạn (tức là bất kỳ văn bản và hình ảnh nào bạn muốn người xem nhìn thấy) bằng các thẻ.
Phương pháp 3/4: Làm quen với CSS
Bước 1. Sử dụng CSS để áp dụng các kiểu cho các tài liệu HTML của bạn
CSS là một ngôn ngữ biểu định kiểu cho phép bạn áp dụng các yếu tố kiểu dáng và thiết kế khác nhau cho trang web của mình. Ví dụ: nếu bạn muốn áp dụng có chọn lọc một phông chữ hoặc màu văn bản cụ thể cho một số thành phần văn bản trên trang của mình, bạn có thể tạo một tệp CSS để làm điều đó. Sau đó, bạn có thể chèn tệp CSS vào tài liệu HTML của mình ở bất kỳ đâu bạn muốn.
-
Ví dụ: nếu bạn muốn tệp CSS chuyển tất cả các phần tử đoạn văn trong tài liệu HTML của mình sang màu xanh lục, bạn có thể tạo tệp.css chứa các dòng:
- P {
- màu xanh lá cây;
- }
- Sau đó, bạn sẽ lưu tệp với tên như style.css.
- Để áp dụng biểu định kiểu vào tài liệu HTML của bạn, bạn sẽ chèn biểu định kiểu đó dưới dạng phần tử liên kết trống trong các thẻ. Ví dụ:
Bước 2. Làm quen với các phần tử của bộ quy tắc CSS
Một đoạn mã CSS riêng lẻ được gọi là “bộ quy tắc”. Bộ quy tắc chứa các phần tử khác nhau xác định những gì bạn muốn mã của mình thực hiện. Bao gồm các:
- Bộ chọn, xác định phần tử HTML bạn muốn tạo kiểu. Ví dụ: nếu bạn muốn bộ quy tắc của mình ảnh hưởng đến các phần tử của đoạn văn, bạn sẽ bắt đầu bộ quy tắc của mình bằng chữ cái “p”.
- Khai báo, xác định các thuộc tính bạn muốn tạo kiểu (chẳng hạn như màu phông chữ). Khai báo được chứa trong dấu ngoặc nhọn {}.
- Thuộc tính, chỉ định thuộc tính nào của phần tử HTML mà bạn muốn tạo kiểu. Ví dụ: trong thẻ, bạn có thể chỉ định rằng bạn muốn tạo kiểu màu cho văn bản.
- Giá trị thuộc tính xác định cụ thể cách bạn muốn thay đổi thuộc tính (ví dụ: nếu thuộc tính là màu phông chữ, thì giá trị thuộc tính sẽ là "xanh lá cây").
- Bạn có thể sửa đổi một số thuộc tính khác nhau trong một khai báo.
Bước 3. Áp dụng CSS cho văn bản của bạn để làm cho kiểu chữ của bạn trông đẹp mắt
CSS rất hữu ích để áp dụng nhiều hiệu ứng khác nhau cho văn bản của bạn mà không cần phải viết mã riêng từng thuộc tính trong HTML. Thử nghiệm với việc thay đổi các thuộc tính sắp chữ khác nhau trong CSS, bao gồm:
- Màu phông chữ
- Cỡ chữ
- Họ phông chữ (ví dụ: phạm vi phông chữ bạn muốn sử dụng trong văn bản của mình)
- Căn chỉnh văn bản
- Chiều cao giữa các dòng
- Khoảng cách giữa các chữ cái
Bước 4. Thử nghiệm với các hộp và các công cụ bố cục CSS khác
CSS cũng hữu ích để thêm các yếu tố trực quan hấp dẫn vào trang của bạn, chẳng hạn như hộp văn bản và bảng. Ngoài ra, bạn có thể sử dụng nó để thay đổi bố cục tổng thể của trang và xác định vị trí của các phần tử khác nhau so với nhau.
Ví dụ: bạn có thể xác định các thuộc tính như chiều rộng và màu nền của một phần tử, thêm đường viền hoặc đặt lề sẽ tạo khoảng trống giữa các phần tử khác nhau trên trang của bạn
Phương pháp 4/4: Làm việc với các ngôn ngữ thiết kế khác
Bước 1. Tìm hiểu JavaScript nếu bạn muốn thêm các yếu tố tương tác vào các trang của mình
JavaScript là một ngôn ngữ tuyệt vời để học nếu bạn quan tâm đến việc thêm các tính năng nâng cao hơn vào trang web của mình, chẳng hạn như hoạt ảnh và cửa sổ bật lên. Tham gia một khóa học hoặc tìm kiếm các hướng dẫn trực tuyến về cách viết mã bằng JavaScript và kết hợp các phần tử được mã hóa đó vào các trang web của bạn | sử dụng HTML.
Trước khi có thể làm quen với JavaScript, bạn cần phải làm quen với những kiến thức cơ bản về xây dựng trang trong HTML và CSS
Bước 2. Làm quen với jQuery để viết mã JavaScript dễ dàng hơn
jQuery là một thư viện JavaScript có thể đơn giản hóa việc lập trình Java bằng cách cho phép bạn truy cập vào nhiều phần tử JavaScript được mã hóa trước. jQuery là một công cụ tuyệt vời nếu bạn đã quen thuộc với những kiến thức cơ bản về mã hóa JavaScript.
Bạn có thể truy cập thư viện jQuery và nhiều tài nguyên quý giá khác thông qua jQuery.org, trang web của jQuery Foundation
Bước 3. Nghiên cứu ngôn ngữ phía máy chủ nếu bạn quan tâm đến phát triển back-end
Mặc dù HTML, CSS và JavaScript là lý tưởng cho các nhà thiết kế web tập trung vào những gì người dùng thấy và làm trên trang web, các ngôn ngữ phía máy chủ sẽ hữu ích nếu bạn quan tâm hơn đến công việc hậu trường. Nếu bạn muốn tìm hiểu về phát triển back-end, hãy tập trung vào việc học các ngôn ngữ như Python, PHP và Ruby on Rails.
Những ngôn ngữ này rất hữu ích để quản lý và xử lý dữ liệu mà người dùng không nhìn thấy. Ví dụ, PHP có thể được sử dụng để xây dựng các công cụ tạo mật khẩu an toàn trên các trang web yêu cầu đăng nhập
Tập tin trợ giúp
Trang tính gian lận HTML
Trang tính gian lận CSS
