HTML CSS là gì? Dùng HTML/CSS để dựng ngay portfolio xịn sò cho riêng bạn

809

Bài dịch từ tác giả: Aditi Venkatesh

HTML & CSS là gì?

HTML là từ viết tắt của Hypertext Markup Language, đây là thứ được dùng để đánh dấu cũng như phân biệt phần nội dung từ cấu trúc của 1 trang web, để trình duyệt của bạn biết chính xác nội dung để hiển thị và cách trang web đó được cấu trúc ra sao. Vậy HTML có phải là ngôn ngữ lập trình không? Nó không phải là ngôn ngữ lập trình, nó được dùng để tạo ra các cấu trúc website đơn giản rất dễ hiểu và ai cũng có thể học được.

CSS (Cascading Style Sheets) lại là một ngôn ngữ giúp định hình phong cách cho website. Chúng ta sử dụng CSS để định dạng phần nội dung được chỉ định trong tài liệu HTML. Nói thêm, CSS được phát triển bởi W3C vào năm 1996 nhằm hỗ trợ nhiều tính năng mà HTML chưa thể làm được, ví dụ như gắn tag để định dạng trang web.

Cũng chính vì vậy, mục đích của Workshop này chính là dạy cho bạn những điều cơ bản của việc lập trình web. Chúng ta sẽ làm điều này bằng cách sử dụng các ví dụ của việc dựng portfolio cá nhân cho riêng bạn!

Dựng web là gì?

Quá trình dựng web bằng các ngôn ngữ như JavaScript, Dart hay ngay cả Python cũng cần dùng tới các framework nhất định. Và ở workshop này, chúng ta chỉ tập trung vào việc dùng HTML/CSS thôi.

Vậy thì 1 website là gì? Nó là 1 set các trang có thể truy cập được bằng cách sử dụng 1 tên miền. Các ví dụ phổ biến của 1 tên miền bao gồm ‘www.google.com‘ hay ‘www.facebook.com‘, rất quen thuộc phải không nào?

Các website hoạt động như thế nào? Khi bạn gõ ra 1 tên miền, trình duyệt mà bạn đang sử dụng (chẳng hạn như Chrome) sẽ kết nối tới 1 máy chủ web, bằng cách dùng 1 địa chỉ IP, vốn được tìm thấy bằng cách phiên dịch tên miền đó. Máy chủ web chính là 1 máy tính được kết nối tới internet và nhận các yêu cầu tới trang web từ trình duyệt của bạn. Máy chủ sau đó sẽ gửi trả thông tin về trình duyệt của bạn, như 1 tài liệu HTML, để hiển thị trang web!

Bạn muốn tìm hiểu thêm? Hãy xem thêm tại đây nhé: https://bit.ly/cca-web-requests.

Và cuối cùng, portfolio cá nhân là gì?

Portfolio là 1 cách để chứng minh kinh nghiệm coding của bạn đồng thời cho thấy lịch sử làm việc trước đó nữa. Các portfolio cơ bản nhất chính là resume (sơ yếu lý lịch) được chuyển tải thành 1 website. Nó bao gồm tên, kinh nghiệm làm việc trước đó và hình ảnh của bạn.

Portfolio là 1 cách tuyệt vời để tăng chiều sâu cho resume của bạn khi ứng tuyển vào các  vai trò công việc và cho phép bạn nổi bật giữa hàng vạn CV của các ứng viên khác. Nó cũng là cách hoàn hảo để hiển thị bất kỳ dự án riêng mà bạn đã hoàn thành!

Nếu bạn muốn xem 1 vài ví dụ thú vị cho portfolio hãy xem thử tại đây nhé:
https://www.awwwards.com/websites/portfolio/

Bắt tay vào phần chính thôi!

Chúng ta sẽ dùng VSCode cho workshop này. Dưới đây là hướng dẫn về cách setup VSCode để trải nghiệm của bạn được tốt nhất.

1. Cài đặt VSCode:
https://code.visualstudio.com/docs/setup/setup-overview

2. Download plugin ‘Open In Browser’:
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

3. Plugin này cho phép bạn chạy website: bằng cách nhấp-trái chuột trên file HTML và chọn ‘Open in default browser – Mở trong trình duyệt mặc định’ (còn với Mac, phím tắt sẽ là ⌥ B nhé)

4. [Không bắt buộc] Tùy chỉnh VS code bằng cách dùng những plugins sau:
https://code.visualstudio.com/docs/languages/html &
https://code.visualstudio.com/docs/languages/css

5. Chuẩn bị sẵn resume: và vài hình ảnh sẽ làm bản thiết kế của website bạn dễ dàng hơn nhiều.

portfolio.html

Đây là nơi code HTML của bạn chạy.

Cài đặt file
Đầu tiên, tạo 1 file tên là ‘portfolio.html’. Sau đó, thêm 1 declaration tới file này để trình duyệt có thể biết mà expect 1 file HTML.

<!DOCTYPE html>
 <! -- your code will go here -->
</html>


Hãy bắt đầu bằng việc thêm heading. HTML có những thẻ cụ thể cho phép bạn thêm heading, chúng nằm trong phạm vi từ <h1>,…,<h6>.

Thêm văn bản

Chúng ta có thể thêm 1 Heading 1 (Heading lớn nhất) bằng đoạn code này:

<h1> The Computing and Commerce Association </h1>

Tiếp theo, ta thêm 1 đoạn văn ngắn. Chúng ta có thể làm điều này bằng cách dùng thẻ <p></p>.

<p> The Computing and Commerce Association aims to “Connect the professionals of today with the professionals of tomorrow”. We are dedicated to providing value-adding opportunities for our members. </p>

Hình ảnh

Vậy là chúng ta đã có 1 heading và vài thông tin rồi, nhưng chắc bạn cũng cảm thấy ta đang thiếu cái gì đó phải không? Đúng rồi, đã đến lúc thêm hình ảnh vào thôi!

  5 điều phiền toái nhất của CSS


HTML cho phép bạn thêm 1 hình ảnh bằng cách dùng thẻ <img> chứa 1 thuộc tính nguồn (src) mà sẽ chứa 1 hướng đi tới hình ảnh đó và alternative text (atl), cho phép bạn mô tả hình ảnh cho SEO và khả năng tiếp cận.

<img src=”cca-committee.jpg” alt=”CCA Committee”>

Lưu ý: Nếu bạn đã lưu trữ hình ảnh ở 1 thư mục riêng biệt, hãy chắc chắn sử dụng hướng đi chính xác tới file đó nhé.

Siêu liên kết – Hyperlinks

Siêu liên kết cho phép chúng ta thêm thông tin bổ sung bằng cách liên kết tới 1 website bên ngoài, thành phần khác nhau của cùng 1 website hay trang khác bên trong 1 website.

<a href=”https://www.linkedin.com/company/ccamonash/"> Check us out on Linkedin </a>

Thêm 1 danh sách

Thêm 1 danh sách là 1 cách súc tích và ngắn gọn cho các thông tin cần hiển thị như kinh nghiệm hay kỹ năng trước đây của bạn. Trong phần này chúng ta sẽ thêm 1 danh sách không theo thứ tự nào, nhưng hãy nhớ thêm 1 chức danh vào danh sách của bạn, khá là quan trọng đấy!

<h2> What we do </h2>
<ul>
 <li> Events </li>
 <li> Weekly Newsletters </li>
 <li> Articles </li>
 <li> Social Media Marketing </li>
</ul>

portfolio.css

Cài đặt file

Tạo 1 file trong cùng thư mục với portfolio.html và đặt tên cho nó là ‘portfolio.css’. Đây sẽ là nơi chúng ta sẽ đặt code vốn định dạng nội dung trong file html. Thực ra có nhiều cách để kết hợp CSS vào 1 file HTML.

  9 CSS animation mới "mãn nhãn" cho các project

Trong ví dụ này mình sẽ dùng 1 file CSS bên ngoài nên đầu tiên ta sẽ cần thêm 1 reference trong file HTML:

<link rel=”stylesheet” type=”text/css” href=”portfolio.css”>

Văn bản tùy chỉnh

CSS cho phép bạn tùy chỉnh nhiều tính năng khác nhau bao gồm font và màu sắc của văn bản. Để tùy chỉnh các thành phần, chúng ta cần có thể tham chiếu đến các phần tử trong văn bản HTML. Chúng ta sẽ làm điều này bằng cách dùng 1 thuộc tính lớp.

Trong portfolio.css, hãy thêm 1 thuộc tính lớp tới thẻ <h1>.

<h1 class=”CCA”> The Computing and Commerce Association </h1>

Giờ thì chúng ta đã biết cách để thay đổi font, màu và kích cỡ rồi. Hãy thêm điều này vào file CSS để cho phép ta làm được như thế.

.CCA {
 font-size: 40px;
 color: #ee6225;
 font-family: Arial, Helvetica, sans-serif;
}


Căn chỉnh – Alignment

CSS có nhiều thuộc tính căn chỉnh cho phép chúng ta position các phần tử. Để căn chỉnh văn bản, chúng ta cần dùng thuộc tính ‘text-align’

.CCA {
 <! -- this code is unchanged -- >
 text-align: center;

}

.description {
 font-family: Arial, Helvetica, sans-serif;
 text-align: center;
}


Về việc căn chỉnh 1 hình ảnh cũng sẽ tương tự như trên. Lưu ý rằng chúng ta đã thêm 1 tên lớp ‘committee’ vào phần hình ảnh rồi nhé.

.committee {
 display: block;
 margin-left: auto;
 margin-right: auto;
}


Background

Với CSS bạn có thể thêm background cho dù chúng là hình ảnh hay màu gì. Tại đây, chúng ta sẽ thêm màu cho background.

Màu background có thể set được bằng chữ cũng như bằng HEX code. Chiều rộng và chiều cao được set 100% để đảm bảo toàn bộ trang web được bao phủ toàn bộ.

.body {
 background-color: antiquewhite;
 width: 100%;
 height: 100%;
}

Chúng ta đã thêm 1 thẻ <body></body>  ở đây để ‘đóng gói’ đoạn code. Trong CSS bạn cũng có thể đề cập tới các yếu tố nhất định bằng cách dùng cái thẻ mà chúng ta đã thực hiện ở trên.

<!DOCTYPE html >
 <body>
 <! --your code is here -- >
 </body>
</html>

Thử thách


Giờ thì bạn đã biết những điều cơ bản về HTML/CSS rồi! Đây là 1 số thử thách mà mình muốn bạn test lại bản thân, tin mình đi nó thực sự có ích đấy!

1. Tạo hoạt ảnh cho các hình ảnh để chúng cuộn xuyên qua trang
2. Thêm 1 trang web bổ sung và thanh điều hướng
3. Thêm 1 cuộn parallax vào website của bạn

Nếu bạn muốn học hỏi thêm về cách deploy trang web của mình, hãy đợi bài hướng dẫn về AWS của mình vào kỳ sau nha (sẽ sớm thôi!)

Và thế là xong rồi! Phần cấu trúc cơ bản cho portfolio của bạn đã hoàn tất. Đừng quên rèn luyện và chia sẻ ‘tác phẩm’ của bạn với mình nhé! 

 

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev


Bài viết gốc tại: Medium
 

Báo cáo bài viết vi phạm bản quyền>>