Khóa học Fullstack SERN (SQL, Express.js, React.js, Node.js) Web Developer Miễn Phí với Hỏi Dân IT - #10 Thực Hành Cắt HTML từ Template Mẫu Design Từ Z đến A - HTML Cho Người Mới Bắt Đầu

Trong thực tế đi làm, chúng ta có một nghề dành cho Frontend đấy chính là cắt HTML từ Photoshop hoặc từ giao diện có sẵn (tạo từ việc designer kéo thả components trên các website, ví dụ như Figma: https://www.figma.com/ - Công cụ dành cho designer phổ biến nhất hiện nay). 👉Ngày xưa thì chúng ta cắt HTML từ file giao diện psd của Photoshop, tuy nhiên, những năm trở lại đây, Figma mới là công cụ phổ biến nhất để designer thiết kế giao diện. 🚀Video này chính là một bài thực hành dành cho các bạn muốn biết, muốn học làm sao để có thể "tư duy" và thực hành cắt HTML từ một template có sẵn. Mình viết học cắt Template thành HTML từ Z tới A bởi vì ở đây, quan trọng nhất chính là "tư duy' tạo bố cục layout cũng như xác định được các tags HTML cần dùng. 🎁Template mẫu các bạn xem tại đây: https://harypham97.github.io/template-bootstrap/ ❤ Source code video này: Sẽ được cập nhật sau khi mình làm các video hướng dẫn về Github (vì mình sẽ dùng code video này để làm ví dụ đẩy lên Github) ------------------------------------ IMPORTANT ----------------------------- 🚀Learn by doing : trong thời gian sắp tới, mình dự định sẽ có 1 tutorial học và thực hành để trở thành 1 fullstack web developer, với công nghệ sử dụng như sau: ✔ Frontend: Reactjs + Redux. HTML/CSS-scss/Bootstrap4 (reactrap) ✔ Backend: Node.js (Express) + MySql (Sequelize) 👉 Đây là video thứ tự 10 trong khóa học này 👉 Các videos này sẽ được cập nhật vào playlist - Khóa học Fullstack Web Developer Miễn Phí với Hỏi Dân IT: https://www.youtube.com/playlist?list=PLncHg6Kn2JT6E38Z3kit9Hnif1xC_9VqI 👉 Các bạn đăng ký kênh, bật thông báo để có thể nhận được những video từ series này một cách sớm nhất nhé ❤ ------------------------------------ IMPORTANT ----------------------------- 🧠 Nội dung video: 0:00 Giới thiệu 0:17 Template Design mẫu 2:30 Bắt đầu Project 7:50 Cách chia bố cục layout 10:48 Thêm background Image 15:20 Reset các CSS mặc định 17:41 Tại sao dùng DIV để hiển thị ảnh 29:15 Tư duy phân tích Layout 44:29 Căn phải Header 50:00 Chỉnh border tròn 53:02 Thêm logo 1:03:07 Thêm icon ảnh 1:11:07 Hoàn thiện project 🌎 Tìm mình tại đây: 1. Facebook Fanpage (Tiếng việt): https://www.facebook.com/askITwithERIC 2. Facebook Fanpage (Tiếng anh): https://www.facebook.com/haryphamdev 3. Github: https://github.com/haryphamdev 4. Youtube channel: https://www.youtube.com/channel/UCVkBcokjObNZiXavfAE1-fA?sub_confirmation=1 5. Email: [email protected] Cần giải đáp thắc mắc (hỗ trợ), các bạn vui lòng comment bên dưới video hoặc inbox trực tiếp qua facebook cho mình. ĐỪNG QUÊN NHẤN CHUÔNG 🔔 ĐỂ NHẬN CẬP NHẬT VIDEO MỚI NHẤT CŨNG NHƯ ► ĐĂNG KÝ KÊNH! ► https://bit.ly/31P4KhK #fullstackDeveloper #khoaHocWebMienPhi #HoiDanIT