PSD sang HTML từ A đến Z

1.Intro

Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính trong này sẽ được tiết lộ.

2. Thiết kế file PSD

Hướng dẫn vẽ những phần chi tiết của file PSD phần sau sẽ đi chi tiết đến canh chỉnh.

Chia sẻ các công cụ canh chỉnh layout trong PSD guides, rule, slice tool, rounded rectangle, filter … Các bạn sẽ được tiếp cận với các công cụ này hiệu quả hơn khi thực hành trực tiếp vào file PSD.

3. Căn chỉnh layout bằng các công cụ guides trong PSD

Chia sẻ các công cụ canh chỉnh layout trong PSD guides, ruler, slice tool, rounded rectangle, filter … Các bạn sẽ được tiếp cận với các công cụ này hiệu quả hơn khi thực hành trực tiếp vào file PSD.

4. Tạo thư mục chứa source html/css và các thứ liên quan

Trong bài này chúng ta sẽ đi đến việc tạo các thư mục website cụ thể ví dụ như css/images/js/font cũng như file index.html.

5. Cắt hình ảnh từ PSD ra ngoài thư mục

Ở bài này chúng ta sẽ tìm hiểu phần nào nên cắt ra ảnh, phần nào có thể viết được bằng CSS cũng như là lưu trữ các hình ảnh ở đâu trong thư mục.

6. Nên biết gì trong thẻ head

Một số thuộc tính trong thẻ head mà bạn nên biết ví dụ:

7. Lên cấu trúc html trong tag body

Phần này chúng ta sẽ đi vào thiết lập html trong body để có được một cái box căn giữa cũng như là các phần chi tiết bên trong.

Bao gồm cách đặt tên class và phân chia vị trí họp lý cho html

8. Toàn tập background trong css

Giới thiệu về background trong css còn 3 cái

‘’’

background-attachment

background-clip

background-origin

‘’’

là những cái nâng cao mình sẽ chia sẻ ở bài khác.

9. Căn giữa tài liệu bằng CSS

Video hướng dẫn một trong rất nhiều cách mà các bạn có thể căn giữa tài liệu.

10 – Căn chỉnh đối tượng và thuộc tính display block

Căn chỉnh các đối tượng ngay hàng thẳng lối với các thuộc tính

‘”

• margin
• display: block
• v.v… ‘’’

11. Use google web fonts in project web

Việc sử dụng font vào website là điều rất cần thiết khi thiết kế website.

Trong bài này chúng ta sẽ tiếp cận đến việc sử dụng google web font để làm giảm tải cho host cũng như sẻ thuận tiện khi sử dụng font.

12. Fontawesome in website (END)

Sử dụng một thư viện web font để làm icon cho website thay vì vẽ các icon cụ thể.

Cũng như tối ưu tốc độ của font.

link website : http://fontawesome.io/

Link cndjs: https://cdnjs.com/libraries/font-awesome

Kết bài

Bà con nào muốn học cơ bản thì đây là thứ mà các bạn cần phải nhai trước khi làm những thứ khác.

ITZone via kipalog