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: – 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:
❤ 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:
👉 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):
2. Facebook Fanpage (Tiếng anh):
3. Github:
4. Youtube channel:
5. Email: haryphamdev@gmail.com
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! ►
#fullstackDeveloper #khoaHocWebMienPhi #HoiDanIT
🌹Bạn nào muốn mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, hãy dùng MoMo quét mã QR tại link này nhé: https://me.momo.vn/hoidanit (lưu ý: tên người nhận là PHAM VAN TUAN)
Đây là video #10 trong series học và thực hành (miễn phí) để trở thành 1 fullstack web developer.
👉Xem Full Playlist này tại đây: https://www.youtube.com/watch?v=VvvXhNbFWKY&list=PLncHg6Kn2JT6E38Z3kit9Hnif1xC_9VqI&index=1
👉 Cần giải đáp thắc mắc, cũng như hỗ trợ, tham gia group Facebook : https://www.facebook.com/groups/hoidanit
👉 Fanpage Facebook Tiếng Việt: https://www.facebook.com/askITwithERIC
👉Các bạn đăng ký kênh, Like cũng như comment để mình có thêm động lực làm video nha. Cảm ơn mọi người ❤
👉Chanel khác của mình (Tiếng anh): https://www.youtube.com/channel/UCHqJxLo7mKam9GKqqwr2wfA
mình thêm class trong file css, rồi lưu mà không thấy hiện trên trình duyệt
Làm sao để chuyển cái tab F12 đó xuống dưới vậy anh, trình duyệt của e bật lên nó ở bên phải.
cho mình hỏi làm sao để ảnh background hiện đủ ra như template bạn
anh ơi sao a viết mà nó cách dữ liệu ra vậy ạ
vd : height: 50px;
cảm giác nó dễ nhìn hơn hản á a
vẫn giữ temp này à pro
Cắt template html thuộc front-end hả anh?
Anh có Template này ko e xin với
A cho e hỏi sao a format được css dưới dạng đó vậy ạ.
Bạn giảng khá dễ hiểu. Có điều mình ko hiểu ở chỗ là sao mình phải dùng display: inline-block; thì mình mới padding được cho 2 thẻ <a> vậy bạn?
<3 Hay quá anh owii, a có group để trao đổi hk anh
sao mình thêm red vào mà không thấy thay đổi gì nhỉ
anh hướng dẵn rất hay