| | | | |
| Học HTML | | 2 ngày | Yêu cầu: Biêt cấu trúc của 1 file HTML, gồm các thẻ: html, head, body, script, style, meta, link, title Biết cách gọi đường dẫn đến các file js, css thông qua thẻ script và link
Biết cách dùng các thẻ hay dùng: div, span, b, i, h1 – h6, p, a, img, ul, li
Biết cách dùng các thẻ thuộc nhóm table: table, thead, tbody, tfoot, td, th, colgroup, col
Biết cách dùng các attribute: style, src , readonly, hidden, disable, data-{attribute}, …
Chú ý: tất cả các ý trên chỉ cần dừng lại ở mức độ biết, không cần đào sâu. Vì trong quá trình làm các project sẽ hiểu hơn về các thẻ, cũng như bất cứ khi nào có thể vào W3school để tra cứu lại. |
| Học CSS/SCSS | | | Yêu cầu: CSS: Phân biệt 3 cách sử dụng: External CSS, Internal CSS, Inline CSS . Hiểu những trường hợp nào sẽ sử dụng cách CSS nào. Hiểu selector, property, value là gì chú ý hiểu kỹ về 5 loại selector: Simple selectors, Combinator selectors, Pseudo-class selectors, Pseudo-elements selectors, Attribute selectors Combinator selectors: Pseudo-class selectors: hover, focus, active, disabled, empty, first-of-type. last-of-type, nth-of-child, nth-of-type, … Pseudo-elements selectors: ::after (thường viết là :after), ::before (thường viết là :before), ::first-letter, ::first-line, ::selection
Hiểu độ mạnh, yếu của 1 selector, và cách tăng độ mạnh Có nên sử dụng #id trong css ? Nếu có, có cách nào để viết selector khác “đè“ đè được giá trị của các selector sử dụng #id ? !important là gì ? Cách đè các giá trị CSS bị style inline ngoài HTML
Hiểu về Box Model Cấu tạo của box model Các property: width, height, padding, border, outline, margin, Nếu giá trị của margin là giá trị âm thì nó có gì đặc biệt ? Hiểu về box-sizing, sự khác nhau giữa box-sizing: content-box và box-sizing: border-box . Width và height sẽ ảnh hưởng thế nào khi sử dụng content-box và border-box Hiểu kỹ về max-width, min-width, max-height, min-height
Hiểu về display: Hiểu sự khác nhau và cách sử dụng của các giá trị: inline, block, inline-block Sự khác nhau khi ẩn 1 element sử dụng visibility: hidden và display: none
Hiểu cách sử dụng của overflow Hiểu cách sử dụng của position Chú ý hiểu kỹ về position relative và position absolute. Các giá trị của top, left, right, bottom của 1 element sẽ hiển thị ngoài màn hình thế nào đối với các position khác nhau (trong số static, relative, absolute, sticky) ? Phần position sticky có thể chỉ cần đọc qua
Hiểu cách hoạt động của các property thuộc họ table Hiểu cách hoạt động của các property thuộc họ flex Cách căn giữa 1 khối sử dụng các property thuộc họ flex ứng dụng của việc kết hợp giữa flex-wrap: wrap ở khối cha và flex-grow, flex-basis ở các khối con
Hiểu về transition và ứng dụng của nó Biết cách sử dụng các property thuộc họ list và link Biết cách sử dụng các property thuộc họ background: background-color, background-image, background-position, … Biết cách sử dụng các property liên quan đến text: text-align, line-height, text-transform, color Biết cách sử dụng các property thuộc họ font: font-family, font-size, font-weight, font-style, … Biết cách thêm 1 font-family mới mà trình duyệt chưa hỗ trợ sẵn Biết cách sử dụng box-shadow, float, transform, animation Biết cách hiển thị các Icon, chẳng hạn của Font Awesome Biết các đơn vị của CSS: px, em, rem, vh, vw Biết cách ứng dụng calc() Biết cách căn giữa các block theo chiều ngang, dọc khi sử dụng các property: position, top. left, right, bottom, line-height, display, text-alight, margin, transform Lưu ý: Với những phần nào của CSS trong trang W3school mà chưa được list ở trên thì người học cũng nên đọc lướt qua để xem nó có gì, và ghi note lại là liệu nó có ứng dụng trong project của mình sau này được không.
SCSS: Hiểu cách phân tầng (và trường hợp nào mới nên phân tầng), cách sử dụng dấu & Hiểu cách dùng variable Hiểu cách dùng @mixin. @include Biết cách dùng @extend
BEM: Hiểu cách đặt tên các class theo BEM Hiểu cách đặt tên modifier theo webuild Envato Hiểu cách đặt tên các class có mục đích helper
CSS guideline: Nắm được tinh thần viết CSS đúng cách Hiểu cách viết css như thế nào sẽ tối ưu, hiệu quả. Cách tăng độ mạnh 1 selector mà không ảnh hưởng đến hiệu năng
Bootstrap: Biết cách chia các khoảng screen: xs, sm, md, lg, xl Hiểu: tại sao các class thuộc hệ grid được đánh số từ 1 đến 12 ? Cách dùng các class đó cách dùng các class có -pull, -push, -offset
|
| Thực hành HTML/CSS | Làm 1 trang theo thiết kế kế này: link Chú ý: | | Yêu cầu: Chính xác về màu sắc, chiều dọc, chiều ngang (đối với hình vuông thì phải chính xác chiều ngang, còn hình chữ nhật thì ít nhất phải gần bằng) Chính xác về màu sắc của các khối khi ở các trạng thái: hover, active, focus Khoảng cách giữa các khối ít nhất phải gần bằng khoảng cách trong thiết kế Phần HTML và CSS đều cần viết thoáng, cách dòng ở những chỗ cần thiết CSS cần viết theo chuẩn BEM Trong CSS cần chia ra từng khu vực rõ ràng, có comment ở những chỗ cần thiết
|
| Học Javascript | | js + dry: 6 ngày ES6 + typescript: 2 ngày
| |
| Thực hành sự kết hợp giữa Javascript và HTML/CSS | Tích hợp js vào trang đã làm ở bước 03, sao cho: | 2 ngày | Yêu cầu: |
| Học cách sử dụng các tool liên quan đến 1 project | | 2 ngày | git: cách cài đặt git cách tạo brand cách phân biệt các loại file thông qua màu sắc: cách dùng .gitignore ý nghĩa của các tag: màu vàng, màu xanh lá cây, màu tím cách commit, viết message và push commit lên server cách phân biệt các dòng code khi so sánh giữa các commit dựa trên màu sắc: Đâu là những dòng không bị chỉnh sửa Đâu là những dòng bị chỉnh sửa Đâu là những dòng được thêm mới Đâu là những dòng bị xóa Đâu là những dòng bị conflict code do merge các nhánh
cách merge code
nodejs: cách cài đặt nodejs cách dùng command line (cmd) và các lệnh trong node js hiểu cấu trúc và cách sử dụng của file package.json cách cài đặt, cập nhật, xóa 1 plugin sử dụng lệnh của nodejs
IDE: Webstorm: cách tạo 1 project các phím tắt hay dùng cách dùng version control: commit, push file, shelf change cách dùng terminal cách sử dụng setting của Webstorm: màu sắc, kiểu format code, cài plugin, … cách compare code
|
| Học Angular | Link | 6 ngày | |
| Thực hành 1 bài tập nhỏ để kiểm tra độ hiểu biết về Angular | Tạo 1 project có các yếu tố sau: | 2 ngày | |
| Nghiên cứu Primeng | Link | 1 ngày | Cách cài đặt, tích hợp primeng vào 1 project angular Cách tra cứu 1 element của primeng trên trang Link Cách cài đặt, sử dụng 1 element
|
| Thực hành Primeng | Tạo 5 component, mỗi component ứng với mỗi element Primeng dưới đây: Checkbox Radio Dropdown Calendar Table
Đối với Checkbox, Radio, Dropdown, Calendar thì cần style CSS sao cho giống nhất có thể với các element tương ứng trên trang: link (chú ý làm cả trường hợp disabled) Đối với table, cần hiển thị sao cho chính xác với thiết kế | 4 ngày | |
| Nghiên cứu cấu trúc của 1 project của công ty | Người học sẽ được người hướng dẫn gửi link invite để kéo sourcecode về | 6 ngày | Yêu cầu: Cần nắm rõ cấu trúc của sourcecode: Vị trí phần core do bên TN viết Vị trí để tạo các module, component, service, pipe Vị trí để style CSS Vị trí của các thư mục chứa ảnh, file
Hiểu cách tạo router của sourcecode Hiệu cách tạo module, component, service, pipe của sourcecode HIểu cấu trúc thư mục chứa style CSS của sourcecode Hiểu cách viết SCSS, comment SCSS của sourcecode
|
| Thực hành làm 1 module nhỏ dựa trên project của công ty | Dựa trên sourcecode được cung cấp, người học cần tạo trang sau. | 3 ngày | Yêu cầu: Component tạo trang nằm trong 1 lazy load module Tạo 1 service để mock data cho bảng Tận dụng tối đa những gì có sẵn trong sourcecode để tạo trang. Nếu trong trường hợp cần style thêm thì cần style đúng file, đúng thư mục
|