NỘI DUNG BÀI VIẾT
Trong bài viết này mình sẽ chỉ cho bạn có nên tìm hiểu về HTML và CSS không?
Xu hướng phát triển giao diện người dùng ngày càng tăng là ý tưởng mà bạn có thể tham gia ngay vào Javascript và thành công. Thành thật mà nói, bạn có thể làm tốt hơn hay tệ hơn. Nhưng bạn chỉ đang xây dựng trên nền tảng mỏng manh sẽ quay lại cắn bạn.
Tại sao tôi cần HTML hoặc CSS?
Các khung giao diện người dùng mà chúng ta biết ngày nay như React và Vue được xây dựng dựa trên các khối xây dựng cơ bản của một trang web: HTML và CSS. Mặc dù các khung giao diện người dùng này bổ sung những kiến thức cơ bản này thông qua một số công cụ thú vị và Javascript, những gì bạn đang xây dựng về cơ bản giống với trang web Space Jam từ năm 1996.
Nhưng tôi hiểu rồi, viết HTML và CSS theo cách thủ công đã có ngày tháng phải không?
Hiểu công cụ của bạn đang làm gì
Có ít nhất hiểu biết cơ bản về những gì đang diễn ra sẽ giúp bạn rất nhiều khi bạn phát triển và gỡ lỗi các ứng dụng của mình.
Bạn có thể gặp phải một số điều kỳ lạ trong trình duyệt, chẳng hạn như tại sao HTML lại biến đổi code ở đó? Sử dụng ví dụ sau:
<style>
p {
color: purple;
}
</style>
<h1>My Cool Page</h1>
<p>
Some cool stuff
<div>Is this still cool?</div>
</p>Code language: HTML, XML (xml)Khi tải phần mềm này lên trong Chrome, bạn sẽ nhận thấy một số thay đổi…
Tại sao tất cả các đoạn văn của tôi không mát và có màu tím?
Chà, hóa ra trình duyệt của bạn hữu ích và tự động sửa code của bạn. Thẻ đoạn văn ( <p>) không được chứa một phần tử cấp khối khác , vì vậy Chrome và các trình duyệt khác sẽ điều chỉnh nhanh HTML của bạn để làm cho nó hợp lệ. HTML rất khoan dung theo cách này! Nhưng đây là một lỗi phổ biến gây khó khăn cho các nhà phát triển cũ và mới, những người không quen với cách thức hoạt động của HTML.
Tìm hiểu sự kỳ diệu của CSS
Ngày nay CSS có thể làm được rất nhiều việc. Nó không chỉ đơn giản là thiết lập một vài màu mà còn mang lại cho bạn khả năng cung cấp các mẫu giao diện người dùng nhất quán trong toàn bộ ứng dụng của bạn.
Đừng sợ nó! Nếu bạn bắt đầu với Javascript, bạn có thể bị cám dỗ để làm mọi thứ ở đó, nhưng bạn sẽ nhanh chóng thấy rằng việc quản lý tất cả sức mạnh thực sự của CSS trong JS của bạn là một điều khó khăn và thành thật mà nói, không cần thiết trừ khi bạn là Facebook.
Bạn có thể làm gì? Xây dựng cảnh tiêu đề phim Alien bằng CSS thuần túy. Lấy một số hiệu ứng di chuột cho các nút của bạn . Hoặc chỉ tạo hoạt ảnh bất cứ điều gì!
Một điều yêu thích của tôi là tạo một lớp hoạt ảnh tải giống như Facebook lạ mắt sẽ áp dụng nền chuyển màu động cho bất kỳ thứ gì bạn thêm nó vào:
.loading {
background: linear-gradient(90deg, #eff1f1 30%, #f7f8f8 50%, #eff1f1 70%);
background-size: 400%;
animation: loading 1.2s ease-in-out infinite;
}
@keyframes loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}Code language: CSS (css)Crack mở một codepen và tự mình thử nó!
Làm cho kết quả tìm kiếm của bạn có liên quan
Các công cụ tìm kiếm sẽ cố gắng hết sức để tìm ra cách nội dung bạn viết có liên quan đến người dùng đang tìm kiếm nó như thế nào. Nhưng cách bạn viết HTML sẽ tạo ra sự khác biệt khi giúp họ xác định giá trị đó. Một sai lầm phổ biến mà tôi thấy là sử dụng các phần tử Heading không chính xác hoặc đơn giản là hoàn toàn không sử dụng chúng.
<h1>All</h1>
<h1>My</h1>
<h1>Content</h1>
<h1>Is</h1>
<h1>Important</h1>Code language: HTML, XML (xml)Hãy xem xét phác thảo của bài đăng trên blog này:
- Put Down the Javascript - Learn HTML & CSS
- Why do I need HTML or CSS?
- Understand what Your tools are doing
- Learn the magic of CSS
...Code language: JavaScript (javascript)“Tìm hiểu sự kỳ diệu của CSS” không phải là chìa khóa rút ra từ trang, vì vậy tôi không muốn coi điều đó là quan trọng nhất. Tuy nhiên, tiêu đề của bài đăng, “Bỏ qua Javascript – Học HTML & CSS”, phản ánh toàn bộ câu chuyện, khiến nó trở nên quan trọng nhất, vì vậy tôi muốn đặt nó ở vị trí số 1.
Vì vậy, với HTML của tôi, tôi muốn làm cho nó trông giống như sau:
<h1>Put Down the Javascript - Learn HTML & CSS</h1>
<h2>Why do I need HTML or CSS?</h2>
<h2>Understand what Your tools are doing</h2>
<h2>Put Down the JS - Learn HTML & CSS/h2>Code language: HTML, XML (xml)Điều này cho phép Google, Bing và tất cả các công cụ tìm kiếm khác biết chính xác phần nào nên là phần quan trọng nhất của trang và giúp xác định thứ bậc chung.
Thúc đẩy khả năng tiếp cận bằng cách phát triển toàn diện
Bằng cách không viết code một cách có trách nhiệm, chúng tôi tự động loại trừ mọi người truy cập vào trang web mà chúng tôi dày công xây dựng. Thường thì những người này quan tâm đến những gì đang được xây dựng cũng giống như bạn và tôi.
Bằng cách làm một chút bài tập về nhà trong lần đầu tiên và dành thêm một giây để suy nghĩ về những gì chúng ta đang viết, chúng ta có thể hòa nhập với tất cả bạn bè truy cập trang web của chúng ta.
Lấy một danh sách điều hướng đơn giản thường thấy trong hầu hết các trang web ngày nay. Bạn có thể bị cám dỗ để viết ra một số div vì chúng hoạt động đúng không?
<div className="nav">
<div><a href="#">Link 1</a></div>
<div><a href="#">Link 2</a></div>
<div><a href="#">Link 3</a></div>
</div>Code language: HTML, XML (xml)Vấn đề là, chúng không dễ dàng để trình đọc màn hình tiếp nhận. Để khắc phục điều này, bạn / về mặt kỹ thuật / có thể viết ít HTML hơn nữa ( div là 3 ký tự ul và li là 2?).
<ul className="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>Code language: HTML, XML (xml)Tiến thêm một bước nữa, nếu đây là menu điều hướng của bạn, hãy bọc nó trong một phần tử điều hướng HTML 5 (<nav>) và người dùng bây giờ sẽ có thể truy cập trực tiếp vào menu .
Đơn giản hóa code của bạn, nắm lấy chức năng gốc
Bạn sẽ ngạc nhiên về số lượng chức năng tồn tại nguyên bản trong các trình duyệt hiện đại , với nhiều trình duyệt hỗ trợ hơn mức bạn có thể cần (xin lỗi những người vẫn hỗ trợ IE9).
Với một số HTML cơ bản, bạn có thể tạo đầu vào văn bản có văn bản giống như tự động hoàn thành, có thể tìm kiếm trong trình đơn thả xuống:
<label>My Favorite Color</label>
<input type="text" name="color" list="colors">
<datalist id="colors">
<option value="Magenta">
<option value="Purple">
<option value="Ultraviolet">
</datalist>Code language: HTML, XML (xml)Tận dụng các bộ chọn giả CSS, chúng tôi có thể định kiểu động cho phần tử kiểu hộp kiểm tùy thuộc vào việc nó được chọn hay không:
<style>
.is-checked {
display: none;
}
#my-checkbox:checked + span .is-checked {
display: inline;
}
#my-checkbox:checked + span .not-checked {
display: none;
}
</style>
<label for="my-checkbox">
<input id="my-checkbox" type="checkbox" />
<span>
<span class="not-checked">Not Checked</span>
<span class="is-checked">Checked</span>
</span>
</label>Code language: HTML, XML (xml)Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
