diff --git a/README.md b/README.md index 119ea0d..0176314 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,12 @@ Repo lưu lại kinh nghiệm, kiến thức ở Hapo. ## Mục lục 1. [Coding Standard](coding-standard.md) 2. [Cơ bản về Git](git.md) -2. [Cơ bản về PHP](php.md) -3. [Cơ bản về Laravel](laravel.md) -4. [Cơ bản về HTML&CSS](css.md) -5. [Cơ bản về Javascript](javascript.md) -6. Các mục khác +3. [Cơ bản về PHP](php.md) +4. [Cơ bản về Laravel](laravel.md) +5. [Cơ bản về HTML&CSS](css.md) +6. [Cơ bản về Javascript](javascript.md) +7. [Cơ bản về Markdown](./markdown/markdown.md) +8. Các mục khác Mỗi chủ đề sẽ được chia thành các folder riêng, trong đó sẽ chứa các file markdown ghi chi tiết cho từng chủ đề Các chủ đề sẽ được yêu cầu theo dạng [Issues](https://github.com/haposoft/wiki/issues), tự assign vào issues nếu bạn muốn contribute cho phần đó để tránh bị conflict với các thành viên khác. diff --git a/coding-standard/html-css.md b/coding-standard/html-css.md index bdc98d8..9d167d9 100644 --- a/coding-standard/html-css.md +++ b/coding-standard/html-css.md @@ -1,13 +1,13 @@ # HTML&CSS coding convention -#HTML Convention +# HTML Convention -##Tất cả các thẻ (tags) phải là chữ thường +## Tất cả các thẻ (tags) phải là chữ thường ```
``` -###Sử dụng tên ý nghĩa khi đặt cho ID và các phần tử HTML +### Sử dụng tên ý nghĩa khi đặt cho ID và các phần tử HTML ``` txtName, txtAge ``` @@ -16,7 +16,7 @@ thay vì text1, text2 ``` -###Indent HTML code consistently (Thụt lề cho mã HTML) +### Indent HTML code consistently (Thụt lề cho mã HTML) ```
@@ -31,10 +31,11 @@ text1, text2 ``` -###Không sử dụng inline style attributes -Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợi thế sau: -- Có thể dễ dàng chỉnh sửa giao diện cho mã HTML +### Không sử dụng inline style attributes +Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợi thế sau: +- Có thể dễ dàng chỉnh sửa giao diện cho mã HTML - Có thể kế thừa CSS nếu bạn muốn sử dụng lại nó ở 1 nơi khác. + ```
@@ -43,9 +44,9 @@ Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợ
``` -###Sử dụng 1 file CSS riêng không đặt trong trang HTML +### Sử dụng 1 file CSS riêng không đặt trong trang HTML -###Tuân thủ W3C validate +### Tuân thủ W3C validate - Việc này giúp website của bạn tối ưu được các đoạn mã HTML và hỗ trợ cho SEO - Có thể check W3C validate trên trang https://validator.w3.org/ @@ -178,10 +179,10 @@ Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợ } } -###Đặt tên cho class +### Đặt tên cho class - Khi đặt tên cho class theo cấu trúc `[Tên viết tắt của dự án]-[Chức năng của section]` -###Phân chia section rõ ràng +### Phân chia section rõ ràng - Phân chia section rõ ràng với từng chức năng của nó Đặt tên class theo chức năng và hướng tới "Đối tượng" diff --git a/coding-standard/javascript.md b/coding-standard/javascript.md index 04411e7..a2ce058 100644 --- a/coding-standard/javascript.md +++ b/coding-standard/javascript.md @@ -100,6 +100,7 @@ function handleThings(name, opts = {}) { ``` ### Khoảng trắng + - Sử dụng 2 khoảng trắng tương ứng với 1 tab - Sau các từ khóa `if`, `while`, `do`, ... phải có 1 khoảng trắng - Trước và sau các biến có khoảng trắng diff --git a/html-css/convention.md b/html-css/convention.md index edd4925..6c17277 100644 --- a/html-css/convention.md +++ b/html-css/convention.md @@ -5,9 +5,11 @@ * Không dùng ID làm selector ### Không tốt - #some-body { - // ... - } +``` +#some-body { + // ... + } +``` ### Tốt .some-body { diff --git a/html-css/html.md b/html-css/html.md index 9be9978..e42b212 100644 --- a/html-css/html.md +++ b/html-css/html.md @@ -34,6 +34,7 @@ text1, text2 Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợi thế sau: - Có thể dễ dàng chỉnh sửa giao diện cho mã HTML - Có thể kế thừa CSS nếu bạn muốn sử dụng lại nó ở 1 nơi khác. + ```
diff --git a/html.md b/html.md index 9be9978..dc72312 100644 --- a/html.md +++ b/html.md @@ -34,11 +34,12 @@ text1, text2 Hạn chế sử dụng nó càng ít càng tốt, điều này có những lợi thế sau: - Có thể dễ dàng chỉnh sửa giao diện cho mã HTML - Có thể kế thừa CSS nếu bạn muốn sử dụng lại nó ở 1 nơi khác. + ``` - +<-- INSTEAD OF -->
- +<-- USE -->
``` diff --git a/markdown/markdown.md b/markdown/markdown.md new file mode 100644 index 0000000..b65aa1c --- /dev/null +++ b/markdown/markdown.md @@ -0,0 +1,193 @@ +# Markdown + +## Markdown là gì: + +- Markdown là một syntax đơn giản và dễ sử dụng để style đoạn văn bản trên nền tảng GitHub +- Markdown cho phép người dùng format chữ cái, thêm ảnh hay tạo danh sách sử dụng một vài kí tự đặc biệt ví dụ như # hay * + +## Syntax + +Một vài syntax của markdown: + +### Heading + +``` +# h1 +## h2 +### h3 +#### h4 +##### h5 +###### h6 +``` + +# h1 +## h2 +### h3 +#### h4 +##### h5 +###### h6 + +### Styling + +Bold : ```** **``` hoặc ```__ __``` + +Italic : ```* *``` hoặc ```_ _``` + +Strikethrough : ```~~ ~~``` + +Bold và italic : ```** **``` và ```_ _``` + +``` +bold is **this** or __this__ +italic is *this* or _this_ +this is ~~strikethrough~~ +this is **_bold and italic_* +``` + +bold is **this** or __this__ + +italci is *this* or _this_ + +this is ~~strikethrough~~ + +this is **_bold and italic_* + +### List + +#### Unordered list + +Sử dụng syntax - hoặc * + +``` +- item 1 +- item 2 +* item 3 +* item 4 +``` + +- item 1 +- item 2 +* item 3 +* item 4 + +#### Ordered list + +Bắt đầu dòng bằng 1 số + +``` +1. item 1 +2. item 2 +3. item 3 +``` + +1. item 1 +2. item 2 +2. item 3 + +#### Task list + +```- [x]``` đánh dấu task đã hoàn thành, +```- []``` đánh dấu task chưa hoàn thành + +``` +- [x] Finished task +- [ ] Unfinish task +- [ ] Open pull request +``` + +- [x] Finished task +- [ ] Unfinish task +- [ ] Unfinish task + +### Hình ảnh + +``` +Đây là logo công ty (hover để xem tiêu đề): + +Inline-style: +![alt text](https://haposoft.com/assets/front/img/haposoft.png "Logo 1") + +Reference-style: +![alt text][logo] + +[logo]: https://haposoft.com/assets/front/img/haposoft.png "Logo 2" +``` + +Đây là logo công ty (hover để xem tiêu đề): + +Inline-style: +![alt text](https://haposoft.com/assets/front/img/haposoft.png "Logo 1") + +Reference-style: +![alt text][logo] + +[logo]: https://haposoft.com/assets/front/img/haposoft.png "Logo 2" + +### Links + +Có rất nhiều cách để tạo liên kết bằng markdown : + +``` +Inline style : [inline-style link](http://wiki.haposoft.com/) + +Inline với tiêu đề (hover để xem tiêu đề) : [inline-style with title](http://wiki.haposoft.com/ "Haposoft") + +Reference style : [reference-style link][Haposoft] + +[Haposoft]: http://wiki.haposoft.com/ + +Hoặc có thể ghi trực tiếp liên kết vào như http://wiki.haposoft.com/ hay +``` + +Inline style : [inline-style link](http://wiki.haposoft.com/) + +Inline với tiêu đề (hover để xem tiêu đề) : [inline-style with title](http://wiki.haposoft.com/ "Haposoft") + +Reference style : [reference-style link][Haposoft] + +[Haposoft]: http://wiki.haposoft.com/ + +Hoặc có thể ghi trực tiếp liên kết vào như http://wiki.haposoft.com/ hay + +### Xuống dòng + +Để xuống dòng ta chèn vào giữa một dòng trống + +``` +Đây là đoạn văn thứ nhất + +Đây là đoạn văn thứ hai +``` + +Đây là đoạn văn thứ nhất + +Đây là đoạn văn thứ hai + +### Emoji + +Có thể thêm emoji bằng cách sử dụng syntax :Mã emoji: + +``` +:+1: :smile: :family: +``` + +:+1: :smile: :family: + +Xem danh sách toàn bộ emoji và code ở [Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet/) + +### Bảng + +Mỗi hàng được viết trên 1 dòng. Dòng header cell được phân biệt bằng cách sử dung tối thiểu 3 dấu ```-```. +Các cột được phân biệt với nhau bằng dấu ```|``` + +``` +Tên | Tuổi +--- | --- +Nguyễn Văn A | 20 +Hoàng Văn B | 30 +``` + +Tên | Tuổi +--- | --- +Nguyễn Văn A | 20 +Hoàng Văn B | 30 \ No newline at end of file