Ví dụ, ở phần giao diện đăng nhập tài khoản mua hàng, người dùng cần 2 ô input và nút submit, lúc này lập trình viên Front-end sẽ cần kỹ năng cơ bản là HTML. Tuy nhiên, nếu giao diện đó được đặt trong giao diện tổng của trang web, với header, navigation, footer,... thì việc phải nắm được cả CSS là điều đương nhiên.
Và khi bạn đăng nhập xong, việc trình duyệt không cần load lại mà người dùng đã có thể đăng nhập thành công và truy cập vào nội dung bên trong thì khi đó việc xử lý bất đồng bộ bằng Javascript của bạn là thứ không thể thiếu.
Còn rất nhiều nhiều những phát sinh, yêu cầu nâng cao hơn mà người dùng cần khi sử dụng web hoặc ứng dụng. Do đó, việc trở thành Lập trình viên Front-end bạn phải nắm chắc nhiều kiến thức, kỹ năng cụ thể.
1. Lập trình viên Front-end cần chuẩn bị những gì để nhanh thành nghề?
Comment từ khi viết HTML
<!-- BEGIN div-header -->
<div id="header">
<p>Viblo</p>
</div>
<!-- END div-header -->
<!-- BEGIN div-body -->
<div id="body">
...
</div>
<!-- END div-body -->
<!-- BEGIN div-footer -->
<div id="footer">
<p>Footer</p>
</div>
<!-- END div-footer -->
Không phải nói nhiều về tác dụng của của viết comment trong code. Khi viết code dài, việc phải đóng bớt các tag lớn là chuyện bình thường, tuy nhiên khi có comment thì mọi thứ trở nên dễ dàng hơn nhiều đúng không.
Bootstrap hay không Bootstrap?
Là một framework nổi tiếng nhất về responsive. Độ thuận tiện khi dùng nó là điều đã được chứng minh ở mọi ngóc ngách trên thế giới, miễn xó đó có dev đang ngồi. Tuy nhiên có bao giờ bạn gặp phải tình cảnh nếu dự án không dùng Bootstrap nữa thì không biết sẽ viết CSS như thế nào chưa? Việc học thành thạo Bootstrap là rất tốt, tuy nhiên hãy cố gắng làm chủ kỹ năng CSS của mình ngay từ đầu. Đừng chỉ vào Bootstrap xem cách họ đặt tên cho class mà hãy F12 lên rồi xem họ đã làm nó như thế nào nhé.
<div role="alert">
This is a primary alert—check it out!
</div>
Đơn giản nhỉ, 3 dòng nhưng thực ra cũng không easy lắm đâu, nên nếu muốn custom lại thì hãy thuần thục nó thật tốt.
.alert {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
Một điều nữa, Bootstrap khá là nặng, và khi làm xong thì surprise... trang của bạn chả khác gì trang của người khác. Nên hãy sử dụng Bootstrap một cách đúng đắn nhất nhé, đừng để như hình ở trên thì khi surprise tập 2 là bạn nghỉ việc rồi.
Semantic Markup
Khi Bootstrap không còn ở trong túi bạn, thì việc làm quen với Semantic Markup sẽ giúp con đường Frontend bớt chông gai hơn.
<!-- HTML -->
<!-- Bad Semantics -->
<div class="article">
<div class="article_title">Title</div>
<div class="the_content">Content
<div class="darkbold">text</div>
Content
</div>
</div>
<!-- Good Semantics -->
<article>
<h1>Title</h1>
<p>Content
<b>Text</b>
Content
</p>
</article>
Hãy thử tìm hiểu BEM là gì và thử thay đổi cách đặt tên class của mình theo quy tắc để xem nó có xứng đáng được bạn mang theo bên mình không nhé:
<!-- HTML -->
<a class="btn btn--big btn--orange">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>
<!-- CSS -->
/* Một Block (khối) độc lập */
.btn {}
/* Element (phần tử) con, phụ thuộc vào Block ở trên */
.btn__price {}
/* Modifier (bộ điều chỉnh) thay đổi trạng thái của Block */
.btn--orange {}
.btn--big {}
Tối ưu việc viết code HTML và CSS bằng cách sử dụng tag HTML hợp lý và đặt tên class CSS có ý nghĩa là thói quen tốt và không khó để làm quen và học nó nên hãy cố gắng sử dụng từ sớm nhé.
Javascript HTML DOM
Việc học Javascript là điều bắt buộc với một Frontend dev, để master nó và phát triển khi sử dụng với các Framework thực sự là khó. Tuy nhiên hãy cố gắng đi từ căn bản nhất, đừng vội vàng quá với JQuery hay những Framework khác. Và quan trọng đó là hãy hiểu thật kỹ DOM, mọi thứ đi thật xa rồi cũng sẽ trở về DOM.
- DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website
- DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML
- DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML
- DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML
- DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML
- DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó
- DOM Navigation: dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha - con của các thẻ HTML
- DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object)
2. Tìm hiểu sự khác nhau giữa các trình duyệt
Hãy thử code của mình trên các trình duyệt khác nhau, vì không phải người dùng nào cũng có Chrome hay Firefox để vừa làm vừa test như dev đúng không. Một vài thuộc tính CSS như transition cần vendor prefixes để làm việc trên nhiều trình duyệt.
Extensions
Một số extensions mà mình vẫn thường sử dụng ở trình duyệt Chrome từ lúc mới học đến giờ, code tốt nhưng nhanh hơn nữa thì cũng tốt hơn chứ nhỉ.
Wappalyzer
Ghé xem 1 trang web đẹp, có animation mượt mà, người làm Frontend rất tò mò liệu rằng trang web này đang sử dụng những công nghệ nào để làm được như vậy. Thì Wappalyzer đây chính là công cụ cho phép chúng ta biết được các công nghệ được sử dụng trong 1 trang web
Fontface Ninja
Fontface Ninja là extension cho phép chúng ta biết loại font được sử dụng ở bất kỳ 1 trang web nào đó. Công cụ hiển thị được name, size, line spacing và letter spacing của font.
Page Ruler
Đây là công cụ mang lại sự chuẩn xác về khoảng cách và kích thước của thành phần giữa bản thiết kế với HTML.
Postman
Trong quá trình làm Frontend dev, chúng ta thường phải query API. Thì Postman chính là công cụ tiện lợi giúp chúng ta request đến API.
Full Page Screen Capture
Full Page Screen Capture cho phép chụp trang hiện tại từ đầu đến cuối trang, rất hữu dụng thi cần chụp toàn bộ trang đã làm HTML so sánh với bản design xem có chuẩn chưa.
Nguồn: Vblo.asia
Tại Bachkhoa-Aptech, tham gia khóa học Lập trình viên Quốc tế, chỉ sau 4 tháng bạn hoàn toàn có thể trang bị full-stack kỹ năng của Lập trình viên Front-end và tham gia thực tập doanh nghiệp với vị trí này!
Tham khảo khóa học tại: http://laptrinhvien.bachkhoa-aptech.edu.vn/
Tham khảo sản phẩm Front-end sau 3 tháng của sinh viên BKAP:
Bachkhoa-Aptech là đơn vị trực thuộc Aptech Ấn Độ - tập đoàn Công nghệ thông tin (CNTT) hàng đầu trên thế giới. Thương hiệu Aptech đã liên tục 18 năm nhận giải thưởng TOP ICT cho đơn vị đào tạo CNTT xuất sắc nhất Việt Nam.
Địa chỉ: Tòa nhà HTC, 236B & 238 Hoàng Quốc Việt, Bắc Từ Liêm, Hà Nội
Hotline: 0968 27 6996
Email: tuyensinh@bachkhoa-aptech.edu.vn
