Người mới bắt đầu học HTML và CSS có thể gặp phải một số phiền toái không lường trước được của việc lập trình, ví dụ như làm mới trang liên tục và cố gắng tham chiếu đúng thư mục hay tệp tin mong muốn. 6 lời khuyên dành cho người mới bắt đầu học HTML và CSS sau đây có thể giúp bạn giải quyết vấn đề đó nhanh chóng để tiết kiệm thời gian của bản thân.
Sử dụng phím tắt
Thường sẽ mất một khoảng thời gian nhất định khi bạn thực hiện một thao tác nào đó. Nếu bạn có thể giảm đi một giây khi lưu, chuyển đổi qua lại giữa các cửa sổ hay làm mới,… thì hiệu suất công việc của bạn sẽ tăng lên. Bạn có thể thực hiện được điều đó bằng cách sử dụng các phím tắt. Chúng không chỉ giúp người mới bắt đầu học HTML và CSS trở nên chuyên nghiệp hơn mà còn giúp họ không cần phải đắn đo quá nhiều mỗi khi thực hiện các thao tác đơn giản nữa.
Dưới đây là một số phím tắt yêu thích của tôi, cả ở hệ điều hành Mac và Windows:
Lưu: ⌘/Ctrl + S
Làm mới: ⌘/Ctrl + R
Mở một thẻ mới: ⌘/Ctrl+ T
Đóng thẻ: ⌘/Ctrl + W
Mở lại thẻ đã đóng cuối cùng: ⌘/Ctrl +Shift + T
Chuyển đến thẻ kế tiếp (đối với thẻ trước đó thì thêm Shift): ⌃/Ctrl + Tab
Đóng ứng dụng hiện tại: ⌘ + Q // Alt + F4
Chuyển đổi ứng dụng: ⌘/Alt + Tab
Chọn trường URL của trình duyệt: ⌘ + L // Alt + D
Mở công cụ phát triển trình duyệt: ⌘+ ⌥+ I hoặc Ctrl + Shift + I hoặc F12
[Chỉ dành cho hệ điều hành MAC] Chuyển đổi các cửa sổ của cùng một ứng dụng: ⌘ + `
[Chỉ dành cho hệ điều hành MAC] Mở cài đặt của ứng dụng: ⌘ + ,
[Chỉ dành cho hệ điều hành MAC] Phóng to tối đa ứng dụng: Nhấp đúp vào bất cứ vị trí nào trên thanh menu
[Chỉ dành cho hệ điều hành MAC] Xóa ký tự bên phải con trỏ: fn + delete
[Trong trình chỉnh sửa mã] Tìm và mở tệp trong dự án: ⌘/Ctrl + P
[Trong trình chỉnh sửa mã] Tìm kiếm toàn cầu: ⌘/Ctrl + Shift + F
Nếu bạn gặp khó khăn trong việc sử dụng Vim:
Thoát: Esc rồi :q
Lưu và thoát: Esc rồi :wq, hoặc Shift + Z + Z
Tối ưu hóa môi trường phát triển của bạn
Mỗi người đều có quá trình phát triển riêng, không có một bộ công cụ hay cài đặt quy chuẩn nào dành cho tất cả mọi người. Vì vậy, người mới bắt đầu học HTML và CSS hãy thử mọi thứ, đọc nhiều hơn và xem xem điều gì là phù hợp nhất với bản thân mình.
Môi trường phát triển tích hợp (IDE’s)
Các chương trình soạn thảo mã trực tuyến đều có những ưu và nhược điểm riêng của mình. Tuy vậy, hầu hết các nhà phát triển web mà tôi biết đều đa phần sử dụng các trình Sublime, VSCode hoặc Vim. Hãy chọn chương trình yêu thích của bạn nhưng đừng bao giờ dùng Atom. Bên cạnh đó, các nhà phát triển web đều sử dụng giao diện tối.
Nếu là người mới bắt đầu học HTML và CSS, bạn sẽ phải Google để biết cách đưa các thông số vào cài đặt bên dưới cho IDE mà bạn chọn. Dưới đây là những cài đặt chuẩn ưu tiên của tôi:
Đặt giới hạn ký tự cho ngắt dòng tự động là 100 ký tự
Hiển thị thước kẻ: 80, 100 ký tự
Thêm từ điển để kiểm tra chính tả
Nhấn nút Tab thay thì thanh dấu cách (Space)
Chuyển đổi nút Tab thành dấu cách, tốt nhất là 2
Hiển thị tất cả các ký tự vô hình
Cắt bớt khoảng trắng ở cuối khi lưu
Sử dụng Prettier nếu bạn không thích mã tự động định dạng
Các chương trình phần mềm khác
Bạn có thể sử dụng phần mềm để tự động việc làm mới trình duyệt khi cập nhật mã như LiveReload
Sử dụng ngôn ngữ tiền xử lý CSS như SASS để tạo kiểu dễ dàng hơn. Một số tính năng tuyệt vời bao gồm lồng lớp, biến và thu nhỏ các tập tin.
Các chương trình dòng/ lệnh như iTerm2 với nhiều tính năng tùy chỉnh hỗ trợ bạn thực hiện công việc dễ dàng.
Biên tập trực tuyến
Sử dụng các trình soạn thảo trực tuyến như CodePen, JSFiddle hoặc CodeSandbox. Đây là một lựa chọn cho bạn nếu chỉ muốn kiểm tra một cái gì đó hoặc trong trường hợp bạn có nhiều máy tính khác nhau và không muốn cập nhật tệp tin của mình thường xuyên. Nói về cách bạn sẽ cập nhật và khớp mã trên các máy tính, bạn nên học Git.
Git được sử dụng khá phổ biến ở tất cả các công ty công nghệ và rất hữu hiệu trong việc kiểm soát phiên bản và hợp tác làm việc. Bạn có thể sử dụng GitHub để tra cứu các dự án nguồn mở và xem các ví dụ mã ở đó. Một lần nữa, phần mềm bạn chọn sử dụng là tùy thuộc vào bạn: GitHub Desktop, GitKraken hay CLI.
Viết thông điệp cam kết tốt là rất quan trọng. Nếu bạn từng phân vân khi đặt tên các tệp Final, Final2, Fina-Final-For-Real,... thì sau đó bạn sẽ biết cuộc đấu tranh giữa những cái tên khó hiểu.
Nếu bạn kết thúc bằng CLI, bạn nên thiết lập một số bí danh git (phím tắt).
Biết và sử dụng các phương pháp hoạt động tốt nhất của HTML
Mã hóa ngữ nghĩa
Điều này giúp giữ cho mã sạch và dễ đọc. Mã hóa ngữ nghĩa vừa giúp cho người khác hiểu được ý của bạn mà còn giúp chính bản thân bạn hiểu được ý của mình trong tương lai.
Để tìm hiểu thêm về việc sử dụng thẻ nào hãy đọc các tài liệu và ví dụ trên các trang web như MDN. Bạn cũng có thể đã đọc những bài viết từ W3Schools. Tuy nhiên, tôi khuyên bạn nên tránh đọc chúng vì thường lỗi thời, sai hoặc không tốt như các bài viết của MDN.
Mã hóa ngữ nghĩa cũng hỗ trợ trong khả năng tiếp cận. Bạn có biết hiện có khoảng 20% người bị khuyết tật? Theo Webaim: “Không phải tất cả những người khuyết tật đều khó khăn trong việc truy cập internet, tuy nhiên nó vẫn chiếm một phần đáng kể trong dân số. Các doanh nghiệp sẽ không khôn ngoan, cố tình loại trừ 20, 10 thậm chí là 5% khách hàng tiềm năng của họ ra khỏi trang web. Đối với các trường học và các tổ chức chính phủ nó không chỉ là không khôn ngoan mà trong nhiều trường hợp, việc làm đó là vi phạm pháp luật.
Trích dẫn (và ký hiệu)
Việc sử dụng các trích dẫn có thể dẫn đến nhiều lỗi và tái cấu trúc. Hãy chắc chắn rằng, các ký hiệu trích dẫn là thích hợp cho văn bản vì chúng trái ngược với các ký hiệu chung thẳng, thường được dùng cho lập trình.
Phím tắt:
“= “, ”= ”
"= "
Hãy nhớ rằng, bạn không cần phải sử dụng các thực thể HTML nếu trình soạn thảo mã của bạn hỗ trợ Unicode, nhưng bạn nên cẩn thận khi sử dụng “&” và các ký hiệu vì bạn có thể gặp lỗi.
Thiết kế hợp lý
Sử dụng breakpoint một cách hợp lý, thường thì hãy sử dụng 2-3 breakpoint ở 600px, 900px và 1200px.
Ngoài ra, bạn nên thiết kế bố cục cho thiết bị di động trước khi thiết kế cho máy tính để bàn. Nếu bạn quên các breakpoint thì ít nhất bạn cũng có được một mớ hỗn độn hoạt động thay vì mớ hỗn độn hỏng.
Biết và sử dụng các phương pháp hoạt động tốt nhất của CSS
CSS là một ngôn ngữ phát triển liên tục, các tính năng được thêm mới thường xuyên, các xu hướng đến rồi đi và luôn có những trải nghiệm mới.
BEM (Khối, phần tử, công cụ sửa đổi)
BEM là quy ước đặt tên được sử dụng để giải quyết tất cả các vấn đề cụ thể mà mọi người gặp phải khi viết mã lộn xộn. Nếu bạn là người mới bắt đầu học HTML và CSS thì nó sẽ là công cụ hữu hiệu giúp cuộc sống của bạn dễ dàng hơn đấy và bạn cũng có thể tránh sử dụng thẻ !important.
Lời khuyên dành cho người mới bắt đầu học HTML và CSS:
Bạn nên tham khảo nguồn tài liệu tại MDN hơn là W3Schools.
Post-Script-Pro-Tip: Sử dụng kích thước font chữ em hoặc rem bởi chúng có khả năng mở rộng hơn.
Sử dụng công cụ phát triển của trình duyệt
Đây được xem là công cụ tốt nhất dành để học tập cho người mới bắt đầu học HTML và CSS bởi chúng cho phép bạn chỉnh sửa và xem mã của mình tại thời gian thực. Bạn có thể thử nghiệm những gì mình viết và lưu lại vào trình chỉnh sửa mã của bạn nếu hài lòng.
Các trình duyệt Chrome, Safari, Firefox đều có các công cụ phát triển với những chức năng và tính năng khác nhau.
Chrome có một số công cụ SEO, hiệu suất, phân tích như Lighthouse (cải thiện trang web của bạn).
Firefox dẫn đầu về phí hiển thị: lưới, vì vậy, nó cho phép bạn xem các hàng, cột và khoảng trống tốt hơn. Firefox Nightly có một tính năng thú vị mà không có kiểu CSS nào được sử dụng. Điều này rất tốt cho các nhà phát triển (từ người mới bắt đầu đền những người giàu kinh nghiệm) bởi vì bạn không thể đoán được tại sao một cái gì đó lại hoạt động!
Các công cụ phát triển của Safari giúp bạn dễ dàng kiểm tra thiết kế phù hợp với các thiết bị Apple khác nhau chưa.
Sử dụng nguồn tài nguyên trực tuyến
Khi bạn đã nắm được các nguyên tắc cơ bản, bạn có thể tận dụng tất cả các thư viện và ứng dụng trên web để hỗ trợ bạn làm tốt công việc viết mã của mình một cách tối ưu nhất. Ví dụ:
Đối với những mẫu và chủ đề mã được tạo sẵn, bạn có thể sử Bootstrap hoặc Materialize - đây là những khung CSS chứa các mẫu thiết kế giúp bạn không phải lo lắng quá nhiều về kiểu dáng và chức năng.
Nếu bạn cần bảng màu, rất may là những người khác đã tạo bảng màu sẵn cho bạn nhưng cũng có một số công cụ để làm bảng màu riêng theo ý muốn của bạn.
Nếu bạn cần hình ảnh, Unsplash sẽ là công cụ tiếp theo mà người mới bắt đầu học HTML và CSS cần với những hình ảnh chứng khoán miễn phí theo giấy phép.
Nếu bạn cần nguồn phông chữ miễn phí và dễ sử dụng, hãy chọn Google Fonts.
Nếu bạn điều chỉnh kích thước phông chữ, hãy dùng Type Scale.
Nếu bạn cần các biểu tượng, Font Awesome và Noun Project là nguồn tài nguyên miễn phí tuyệt vời.
Để gỡ các lỗi và các câu hỏi chung, hãy kiểm tra Stack Overflow. Có thể những người khác đã hỏi cùng một câu hay gặp phải lỗi tương tự bạn. Vì vậy, chỉ cần bạn lướt nhanh qua trang web này. Ngoài ra, còn có các chủ đề cho những bạn quan tâm mạng lưới Stack Exchange như thiết kế đồ họa và UX.
Figma là một công cụ thiết kế trực tuyến tuyệt vời. Bạn có thể tạo ra các bản vẽ, khung dây, vector, nguyên mẫu với nó. Nó là miễn phí cho sử dụng cá nhân.
Notion là một công cụ cộng tác/ ghi chú/ bảng tính/ bảng dự án/… Nó hoạt động khác nhau ở mỗi người, tùy thuộc việc bạn cần gì. Nó cũng là miễn phí cho sử dụng cá nhân.
Hi vọng với những lời khuyên trên đây có thể giúp người mới bắt đầu học HTML và CSS được dễ dàng và không phải đau đầu suy nghĩ về những vấn đề cơ bản nữa. Hãy áp dụng chúng có hiệu quả cho quá trình học tập của bản thân nhé.
Xem thêm: Soi tất tần tật nghề kỹ sư DevOps
Dịch từ: Medium
_____________________
JT1 - IT Recruitment Agency
Website: https://www.jt1.vn
Email: hi@jt1.vn
Điện thoại: +8428 6675 6685
Xem thêm các bài viết khác tại: https://www.jt1.vn/blog
Theo dõi chúng tôi tại: https://www.facebook.com/jt1asia/
