commit 95b11a57506fe015a79a04eb2f760fda30b92bd1
Author: Dao Duc <ducdt@hurasoft.com>
Date:   Sat Mar 25 12:09:04 2023 +0700

    Huong dan, Quy dinh du an

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..494e6d6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,118 @@
+<h1>Hướng dẫn các bước làm dự án mẫu</h1>
+
+<h2>Mô tả</h2>
+<p>Là nơi tổng hợp các giao diện dự án của khách hàng.</p>
+
+
+<h2>Hướng dẫn tạo dự án mẫu</h2>
+<p>
+    Quy trình:
+    <ol>
+        <li>Kéo tất cả file giao diện từ Repo về máy</li>
+        <li>Tạo 1 folder dự án mẫu</li>
+        <li>Upload code lên Repo (<a href="#huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</a>)</li>
+        <li>Cắt giao diện</li>
+        <li>Cuối mỗi ngày sẽ upload code đã cắt trong ngày hôm đó</li>
+    </ol>
+</p>
+<p>Khi cắt 1 giao diện mẫu mới sẽ có cấu trúc các file theo thư mục "<a href="" target="_blank">ten-du-an</a>" đã tạo ở trên (Download folder mẫu về, chỉnh sửa các thông tin theo quy định và cắt ghép).</p>
+
+
+<h2>Hướng dẫn đặt tên</h2>
+<p>Mỗi thư mục sẽ đặt tên theo quy định: <strong>ten-du-an</strong>. Mô tả của thư mục sẽ là URL dẫn đến giao diện đã được cắt ghép hoàn chỉnh </p>
+<p>VD: Giao diện mẹ và bé, mẫu 2 </p> 
+<ul>
+    <li>Tên folder: <strong>ten-du-an</strong></li>
+    <li>Mô tả: <a href="">url-du-an</a></li>
+</ul>
+
+
+<h2>Quy định cấu trúc</h2>
+<p>Cấu trúc 1 dự án mẫu sẽ bao gồm các thư mục con:</p>
+
+<ul>
+    <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/images" style="font-weight: bold;" target="_blank">images</a> : 
+        <ul>
+            <li>Chứa tất cả ảnh sử dụng cho dự án. Quy định về ảnh: Tất cả các ảnh icons (icon search, icon menu,...)</li>
+            <li>Kích thước mỗi ảnh icon khi export từ figma sẽ lấy kích thước <strong>x2</strong> (Để khi sử dụng ở mobile không bị vỡ nét)</li>
+            <li>Sau đó sẽ gộp chung các ảnh icon thành 1 ảnh lớn</li>
+            <li>
+                <p>Trong file CSS sẽ tạo 1 class chứa ảnh ở trên, background-size sẽ giảm 50% để hiển thị chính xác kích thước của icon. Khi sử dụng sẽ bắt theo tọa độ ảnh: </p>
+                <p>VD: ảnh có kích thước 500x500, vị trí hiển thị icon là: x = -200px, y = 0<br/>
+                    <strong>.icons {background: url(../images/sprite.png) no-repeat;background-size: 250px 250px;}</strong><br/>
+                    <strong>.icons.icon-search{background-position: -200px 0;}</strong>
+                </p>
+            </li>
+        </ul>
+    </li>
+
+   <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/js" style="font-weight: bold;" target="_blank">js</a>: 
+        <ul>
+            <li>Chứa các file JS sử dụng cho dự án.</li>
+            <li>Các plugin hiệu ứng, code js có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án (vd: tắt/bật xem thêm nội dung, tìm kiếm,....) sẽ gộp chung vào 1 file, đặt tên là <strong>library.js</strong> </li>
+        </ul>
+    </li>
+
+   <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/scss" style="font-weight: bold;" target="_blank">scss</a> :
+        <ul>
+            <li>Chứa các file CSS sử dụng cho dự án.</li>
+            <li>Sử dụng SASS để viết CSS</li>
+            <li>Các style có thể sử dụng chung cho PC, Mobile mà không cần chỉnh sửa riêng ở từng phiên bản, dự án sẽ gộp chung vào 1 file, đặt tên là <strong>library.css</strong></li>
+        </ul>
+    </li>
+
+   <li>
+        <a href="https://repo.hurasoft.com/ducdt/giao_dien_web_mau/src/branch/master/demo-ten_mau-stt_mau/index.html" style="font-weight: bold;" target="_blank">index.html</a>: 
+        <ul>
+            <li>Là file HTML</li>
+            <li>Có thể chia nhỏ thành nhiều file sử dụng cho từng giao diện (VD: homepage.html, category.html,...) hoặc gộp chung tất cả code HTML vào 1 file</li>            
+        </ul>
+    </li>
+</ul>
+
+<h2>Hướng dẫn đặt tên class</h2>
+<p>Ở mỗi trang sẽ bọc 1 thẻ chứa class là tên gọi của trang đó. Style css sẽ bắt theo class bọc ngoài cùng để tránh lỗi giao diện ở các trang khác. Độ sâu tối đa của style từ 2 -> 3 cấp </p>
+<p>VD: Style menu ở header css sẽ viết theo => .global-header .menu {....} </p>
+<ul>
+    <li>Header: <strong>class="global-header"</strong></li>
+    <li>Footer: <strong>class="global-footer"</strong></li>
+    <li>Trang chủ : <strong>class="homepage"</strong> </li>
+    <li>Danh sách sản phẩm : <strong>class="product-page"</strong> </li>
+    <li>Chi tiết sản phẩm : <strong>class="product-detail-page"</strong> </li>
+    <li>Giỏ hàng : <strong>class="cart-page"</strong> </li>
+    <li>Tin tức : <strong>class="article-page"</strong> </li>
+    <li>Chi tiết tin tức : <strong>class="article-page article-detail-page"</strong> </li>
+</ul>
+
+<h2 id="huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</h2>
+<p> Các bước up code:
+    <ol>
+        <li>Lấy tất cả code từ git url về máy</li>
+        <li>Kiểm tra trạng thái</li>
+        <li>Nếu có sự thay đổi, sẽ thêm file có sự thay đổi (Sẽ được thông báo ở bước 2)</li>
+        <li>Tạo ghi chú (Không viết tiếng việt có dấu)</li>
+        <li>Upload code</li>
+    </ol>
+</p>
+
+<p></p>
+
+<ol>
+    <li><strong>git pull (git URL) master:</strong> Lấy code về máy</li>
+    <li><strong>git status:</strong> Kiểm tra file nào có sự thay đổi</li>
+    <li><strong>git add 'tên file có sự thay đổi':</strong> Là file được báo đỏ ở git status</li>
+    <li><strong>git commit -m 'nội dung mô tả' :</strong> Comment nội dung </li>
+    <li><strong>git push origin master :</strong> Upload code</li>    
+</ol>
+
+<p>VD: Upload code từ url 'https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git', Thêm/Sửa file README.md</p>
+<ol>
+    <li>git pull https://repo.hurasoft.com/ducdt/giao_dien_web_mau.git master</li>
+    <li>git status</li>
+    <li>git add 'README.md'</li>
+    <li>git commit -m 'Huong dan, quy dinh'</li>
+    <li>git push origin master</li>    
+</ol>
\ No newline at end of file