PSD sang HTML từ A đến Z

0.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ộ.

0.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.

0.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.

0.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.

0.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.

0.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ụ:

meta
link
script
favicon

0.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

0.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.

0.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, chi tiết thì các bạn có thể xem thêm ở đây:
http://kipalog.com/posts/Gia-nhu-CSS-can-giua-tai-lieu-that-don-gian

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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tuds

32 bài viết.
93 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
40 5
Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá....
tuds viết 12 tháng trước
40 5
White
17 2
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw width. 1 vw = 1% c...
tuds viết gần 2 năm trước
17 2
White
17 2
Nhiều khi đọc mấy cái bài tuyển dụng họ viết, biết gulp, biết bootstrap, biết js biết biết ... là một lợi thế. Nhiều lúc tôi cũng không hiểu nghĩa...
tuds viết gần 2 năm trước
17 2
Bài viết liên quan
White
17 7
(Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) Like status gốc để hóng phần 2 nhé :P. (Link)
Huy Hoàng Phạm viết 1 năm trước
17 7
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
32 bài viết.
93 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!