Các công cụ bắt buộc phải có khi thiết kế website

Bài này mình sẽ giới thiệu tới các bạn các công cụ cần thiết để sử dụng CSS tốt nhất có thể. Thông thường thì mình dùng Sublime Text để làm trình biên tập CSS. Thằng này khá toàn diện, khá nhiều addon đi kèm. Tương đối tiện.

Một Pro làm CSS cần những công cụ gì để bắt đầu

• Một máy tính . Có thể điều đó nghe có vẻ rõ ràng đối với một số người, nhưng một số bạn đang đọc bài viết này trên điện thoại hoặc máy tính của thư viện. Để phát triển web nghiêm túc, tốt hơn hết là đầu tư vào máy tính để bàn hoặc máy tính xách tay chạy Windows, macOS hoặc Linux.
• Trình soạn thảo văn bản , để viết mã. Đây có thể là trình soạn thảo văn bản (ví dụ:  Visual Studio Code,  Notepad ++,  Sublime Text,  Atom,  Brackets, GNU Emacs hoặc VIM ) hoặc trình soạn thảo lai (ví dụ Dreamweaver hoặc WebStorm ). Trình chỉnh sửa tài liệu Office không phù hợp cho việc sử dụng này, vì chúng dựa vào các yếu tố ẩn gây cản trở các công cụ kết xuất được sử dụng bởi các trình duyệt web.
• Các trình duyệt web để kiểm tra mã. Hiện tại, các trình duyệt được sử dụng nhiều nhất là Firefox ,Chrome, Opera, Safari, Internet Explorer  và  Microsoft Edge. Đơn giản bằng cách nhấn tổ hợp Ctrl-Shift-I. Nó sẽ giúp bạn nhìn rõ các thuộc tính của bất cứ đối tượng nào trên website bạn đang nghiên cứu. Bạn cũng nên kiểm tra cách trang web của bạn hoạt động trên thiết bị di động và trên bất kỳ trình duyệt cũ nào mà đối tượng mục tiêu của bạn vẫn có thể đang sử dụng (chẳng hạn như IE 8, 10.) Lynx.
• Trình chỉnh sửa đồ họa: như GIMP , Paint.NET , Photoshop hoặc XD, để tạo hình ảnh hoặc đồ họa cho các trang web của bạn.
• Một hệ thống kiểm soát phiên bản , để quản lý các tệp trên máy chủ, cộng tác trong một dự án với một nhóm, chia sẻ mã và tài sản và tránh xung đột chỉnh sửa. Ngay bây giờ,  Git là hệ thống kiểm soát phiên bản phổ biến nhất cùng với  dịch vụ lưu trữ GitHub  hoặc GitLab.
• Một chương trình FTP: giúp bạn thao tác và sửa file tại máy tính và up lên hosting hoặc webserver rất nhanh. Không lo bị hỏng do sai dòng lệnh. Nếu có sai cũng backup cực nhanh. FTP được sử dụng trên các tài khoản lưu trữ web cũ hơn để quản lý các tệp trên máy chủ ( Git  đang ngày càng thay thế FTP cho mục đích này). Có rất nhiều chương trình FTP (S) có sẵn bao gồm Cyberduck, Fetch  và FileZilla .
• Một hệ thống tự động hóa:  như Grunt hoặc Gulp  để tự động thực hiện các tác vụ lặp đi lặp lại, chẳng hạn như giảm mã và chạy thử nghiệm.
• Mẫu, thư viện, khung, v.v., để tăng tốc độ viết chức năng chung.
• Thêm nhiều công cụ khác nữa, phần phụ này sẽ giúp bạn có cái nhìn tốt hơn và hoàn thiện cực nhanh nữa. Nếu bạn dùng WordPress thì CSS-Hero là một công cụ chỉnh trực tiếp tuyệt vời (có phí) hoặc Yellow Pencil(có phí) giúp bạn live mọi thứ, từ single page cho đến tỉ thứ khác trên web. Tùy biến thuộc tính theo danh sách hàm rất nhanh.

Những công cụ nào tôi thực sự cần, ngay bây giờ?

Giới thiệu hơi nhiều, chắc nhiều bạn thấy nó thật nhiều thứ phải không ? Thực tế thì các bạn pro đều dùng những công cụ hỗ trợ kia để xử lý cho nhanh. Chứ còn để làm được thì notepad mặc định cũng có thể là trình soạn thảo CSS của bạn 😀

Cài đặt phần soạn thảo văn bản

Bạn có thể đã có một trình soạn thảo văn bản cơ bản trên máy tính của bạn. Theo mặc định, Windows bao gồm Notepad và macOS đi kèm với TextEdit . Bản phân phối Linux khác nhau; Ubuntu đi kèm với  gedit theo mặc định.

Để phát triển web, có lẽ bạn có thể làm tốt hơn Notepad hoặc TextEdit. Chúng tôi khuyên bạn nên bắt đầu với Visual Studio Code , một trình chỉnh sửa miễn phí, cung cấp các bản xem trước trực tiếp và gợi ý về mã.

Cài đặt trình duyệt web hiện đại

Hiện tại, chúng tôi sẽ cài đặt một vài trình duyệt web trên máy tính để kiểm tra mã của chúng tôi. Chọn hệ điều hành của bạn bên dưới và nhấp vào các liên kết có liên quan để tải xuống trình cài đặt cho các trình duyệt yêu thích của bạn:

• Linux: Firefox , Chrome , Opera .
• Windows: Firefox ,  Chrome , Opera , Internet Explorer , Microsoft Edge , Brave  (Windows 10 đi kèm với Edge theo mặc định; nếu bạn có Windows 7 trở lên, bạn có thể cài đặt Internet Explorer 11; nếu không, bạn nên cài đặt trình duyệt thay thế)
• macOS: Firefox , Chrome , Opera , Safari , Brave (Safari đi kèm với iOS và macOS theo mặc định)

Trước khi tiếp tục, bạn nên cài đặt ít nhất hai trong số các trình duyệt này và chuẩn bị sẵn sàng để thử nghiệm.

Cài đặt một máy chủ web địa phương

Một số ví dụ sẽ cần được chạy bởi một máy chủ web để hoạt động thành công. Bạn có thể thiết lập Xamp. Tuy nhiên theo mình thì các bạn nên tập tành khi đã có web. Nếu không mình sẽ bổ sung bạn một bài viết hướng dẫn cách sử dụng một trình tạo web localhost giả lập tại máy của mình.

Trên đây mình đã hướng dẫn các bạn xong phần setup các tài nguyên cơ bản. Tiến tới bài tiếp theo thôi.

[related_posts_by_tax posts_per_page="6" title="Bài liên quan" taxonomies="category,post_tag"]