Html và Css là công cụ giúp bạn xây dựng giao diện website là bước đầu tiên trong lộ trình học lập trình web đi làm. Bài viết này unitop chia sẻ đến bạn cách học html css cho người mới bắt đầu hiệu quả kiếm được tiền!
Html Css là gì? Tại sao nên học html css?
HTML (Hypertext Markup Language) và CSS (Cascading Style Sheets) là hai ngôn ngữ cơ bản trong phát triển web. Chúng được sử dụng để xây dựng và thiết kế các trang web.
Dưới đây là mô tả về mỗi ngôn ngữ:
- HTML (Hypertext Markup Language): HTML là ngôn ngữ đánh dấu sử dụng để tạo nội dung trên trang web. Nó sử dụng các thẻ (tags) để định dạng và cấu trúc các phần tử trên trang web, chẳng hạn như văn bản, hình ảnh, liên kết và nhiều phần tử khác. HTML đóng vai trò quan trọng trong việc đánh dấu nội dung và xây dựng cấu trúc trang web.
- CSS (Cascading Style Sheets): CSS là ngôn ngữ được sử dụng để kiểm soát giao diện và thiết kế của trang web. Nó cho phép bạn định dạng màu sắc, kích thước, khoảng cách, vị trí và kiểu hiển thị của các phần tử HTML. CSS giúp trang web trở nên hấp dẫn hơn, dễ đọc hơn và dễ quản lý hơn.
Dưới đây là một số lý do tại sao nên học HTML và CSS:
- Xây dựng trang web: HTML và CSS là công cụ cơ bản để bạn có thể tạo và thiết kế trang web. Nếu bạn muốn trở thành một nhà phát triển web hoặc thiết kế web, việc hiểu và làm chủ hai ngôn ngữ này là điều cần thiết.
- Kiểm soát cách hiển thị website: CSS cho phép bạn kiểm soát hoàn toàn giao diện của trang web. Bằng cách áp dụng CSS một cách hiệu quả, bạn có thể tạo ra giao diện đẹp mắt và thân thiện với người dùng. Bạn không phải phục thuộc vào ai, chính bạn có thể làm được điều đó.
- Nền tảng bước qua giai đoạn Js: HTML và CSS là cơ sở để bạn học các ngôn ngữ và thư viện JavaScript, jQuery và các thư viện và framework phát triển web khác. Sử dụng HTML và CSS đúng cách cũng giúp bạn hiểu và làm việc với Js dễ dàng hơn.
- Kiếm tiền bằng freelancer: Có rất nhiều công việc với yêu cầu chuyển file thiết kế từ Photoshop, Figma sang Html Css. Bạn hoàn toàn có thể sử dụng kỹ năng html css của mình đến kiếm tiền tự do tại nhà.
Tóm lại, học HTML và CSS là phần quan trọng trong tiến trình xây dựng giao diện website. Cho dù bạn muốn phát triển theo frontend, backend hay fullstack thì thành thạo html css là một bước nền tảng vững chắc giúp bạn phát triển sự nghiệp của mình.
Yêu cầu trước khi học html css
Để bắt đầu học html css bạn cần đảm bảo có những điều sau:
- Một máy tính cá nhân nối mạng internet.
- Máy tính cần cài đặt phần mềm code website dễ sử dụng như Visual Studio Code.
- Có khoảng thời gian tập trung cho việc học và thực hành html css trong thời gian dài đến khi hoàn thiện kỹ năng.
Lộ trình học html css?
Html css giúp chúng ta xây dựng giao diện website, là một phần không thể thiết trong dự án website. Vậy lộ trình học html css như nào cho hiệu quả?
Lộ trình học html
Khi bạn truy cập vào một website bạn thấy gì?
Tất nhiên đó là hình ảnh, tiêu đề, đoạn văn bản, bảng biểu, link liên kết…
Dưới đây là những thẻ html quan trọng bạn cần học để bắt đầu xây dựng phần khung website.
| Thẻ HTML | Tác dụng |
|---|---|
<html> | Xác định cấu trúc HTML của trang web. |
<!-- --> | Chú thích dòng hoặc đoạn mã trong HTML. |
<h1>, <h2>, <h3>, … | Định nghĩa tiêu đề với các cấp độ khác nhau trong trang. |
<p> | Định nghĩa đoạn văn bản. |
<Lorem> | Tạo văn bản mẫu “Lorem Ipsum” để làm ví dụ. |
<br> | Thêm dòng mới (xuống dòng) trong văn bản. |
<img> | Hiển thị hình ảnh trên trang web. |
<a> | Tạo liên kết đến các trang web khác. |
<ul>, <ol>, <li> | Định nghĩa danh sách không có thứ tự hoặc có thứ tự. |
<table>, <tr>, <td> | Tạo và định dạng bảng trên trang web. |
<form>, <input>, <textarea> | Tạo biểu mẫu để nhập dữ liệu từ người dùng. |
<div> | Sử dụng để nhóm và định dạng các phần tử HTML. |
<header>, <nav>, <section>, <article>, <aside> | Sử dụng trong HTML5 để cung cấp cấu trúc và đánh dấu phần tử trong trang web. |
Lộ trình học css cho người mới
Dưới đây là những nội dung css quan trọng bạn cần nắm vững:
Tìm hiểu 3 cách nhúng css vào website
- Inline Css
- Internal Css
- External Css
Cú pháp viết code css đầu tiên
Cách comment code css
Các loại selector quan trọng trong website:
- Selector toàn cục universal
- Selector Element HTML
- Selector Class, Id
- Selector con cháu, hậu duệ
- Selector cha con
- Selector theo nhóm
- Selector theo thuộc tính
- Selector hover chuột
- Selector before, after
- Selector kết hợp – khoanh vùng
- Selector định vị trí phần tử con (:first-child, :last-child, :nth-child)
- Selector loại trừ (:not)
- Selector phần tử anh chị em liền kề (+)
- Selector phần tử đằng sau cùng cấp (~)
- Form – Selector :focus
- Form – Selector :checked
- Thứ tự ưu tiên và cách thăng hạng style CSS
Thứ tự ưu tiên và cách thăng hạng style CSS với !important
Css định dạng text
- Thiết lập font chữ cho văn bản sử dụng thuộc tính “font-family.”
- Điều chỉnh kích thước của font chữ với thuộc tính “font-size.”
- Thiết lập khoảng cách giữa các dòng văn bản bằng thuộc tính “line-height.”
- Căn chỉnh văn bản theo các vị trí khác nhau (trái, phải, giữa, đều) sử dụng thuộc tính “text-align.”
- Thay đổi việc hiển thị chữ hoa và chữ thường với thuộc tính “text-transform.”
- Điều chỉnh đậm và nhạt cho văn bản sử dụng thuộc tính “font-weight.”
- Tạo in nghiêng cho văn bản với thuộc tính “font-style.”
- Thiết lập đường gạch ngang cho văn bản sử dụng thuộc tính “text-decoration.”
- Hủy bỏ đường gạch chân cho văn bản bằng thuộc tính “text-decoration.”
- Thiết lập màu sắc cho văn bản bằng thuộc tính “color.”
- Giới thiệu một số mã màu thường được sử dụng cho văn bản.
Css định dạng khối
- Thiết lập kích thước rộng và cao cho khối sử dụng thuộc tính “width” và “height.”
- Thiết lập màu nền cho khối bằng thuộc tính “background-color.”
- Sử dụng thuộc tính “background-image” để đặt hình ảnh nền cho khối.
- Điều chỉnh kích thước của hình nền khối bằng thuộc tính “background-size.”
- Thiết lập cách hình nền khối lặp lại bằng thuộc tính “background-repeat.”
- Đặt vị trí của hình nền khối bằng thuộc tính “background-position.”
- Cố định hình nền khi cuộn trang sử dụng thuộc tính “background-attachment.”
- Giới thiệu thuộc tính “background” để rút gọn việc thiết lập nền.
- Tạo vùng đệm và đường viền cho khối bằng các thuộc tính “padding” và “border.”
- Xác định kích thước của khối sử dụng hai cách: “width/height” và “max-width/max-height.”
- Tạo lề và khoảng cách giữa các khối sử dụng thuộc tính “margin.”
- Sử dụng thuộc tính “float” để kiểm soát vị trí và thứ tự hiển thị của các phần tử trên cùng một hàng.
- Hiển thị danh sách bài viết theo kiểu dạng float.
- Giới thiệu thuộc tính “clear” để xử lý ảnh hưởng của “float.”
- Ẩn một phần tử HTML trong website bằng thuộc tính “display” và “visibility.”
- Thiết lập hiển thị phần tử dưới dạng “inline” và “inline-block.”
- Hiển thị phần tử dưới dạng “block.”
- Tạo cấu trúc HTML cho layout hai cột và khắc phục sai lầm khi sử dụng “height.”
- Giới thiệu thuộc tính “display: flex” và cách điều chỉnh layout bằng “flex-direction.”
- Quy định xuống dòng cho các phần tử flex với thuộc tính “flex-wrap.”
- Căn chỉnh các phần tử flex theo chiều ngang sử dụng “justify-content.”
- Thay đổi thứ tự hiển thị của phần tử với thuộc tính “order.”
- Đặt kích thước ban đầu cho các phần tử flex bằng thuộc tính “flex-basis.”
- Điều chỉnh tỷ lệ nở của các phần tử flex với thuộc tính “flex-grow.”
- Điều chỉnh tỷ lệ co của các phần tử flex với thuộc tính “flex-shrink.”
- Sử dụng cách viết rút gọn cho các thuộc tính flex.
- Căn chỉnh các phần tử flex theo chiều thẳng đứng sử dụng “align-items.”
- Thay đổi thuộc tính “display” trên đối tượng.
- Tạo tịnh tiến cho khối so với vị trí ban đầu sử dụng “position” và “top/left.”
- Điều chỉnh vị trí của khối con trôi nổi trên một khối cha bằng “position.”
- Cố định một khối trong layout sử dụng “position” và “z-index.”
- Xác định vị trí hiển thị khi xếp chồng các lớp bằng “position.”
- Xử lý nội dung tràn khối sử dụng “overflow.”
- Khắc phục lỗi thường gặp khi sử dụng “ul” và “li” trong danh sách.
- Cấu trúc hiển thị thông tin sản phẩm và bài viết theo hàng ngang.
Các hiệu ứng css3 phổ biến
- Thuộc tính làm trong suốt khối – opacity
- Hiệu ứng làm mềm quá trình thay đổi CSS – transition
- Thuộc tính xoay đối tượng theo một góc cho trước – ratio
- Tăng giảm kích thước đối tượng theo tỉ lệ – scale
- Hiệu ứng đổ bóng khối – box-shadow
Thêm icon fonts vào website
Sử dụng google fonts vào website
Kỹ năng đọc bản thiết kế từ Photoshop, Figma
Nắm chắc 7 loại layout phổ biến trên website
Nắm rõ nguyên lý và triển khai giao diện website chạy trên đa thiết bị (Responsive Web Design)
Sau khi học chắc html css nền tảng bạn nên học thêm các Css Framework để tắc độc độ triển khai dự án. Có thể kết đến như Bootstrap Css, Tailwind Css…
Xây dựng đồ án giao diện website hoàn chỉnh
Học để biết khác hoàn toàn với học để tạo ra sản phẩm và được trả tiền khi đi làm.
Bạn cần luyện kỹ năng xây dựng website hoàn chỉnh từ một bản thiết kế được gọi là “cắt html css”.
Xem thêm: Cắt html css từ psd là gì? Cần chú ý những gì?
Ở bước này bạn cần tự tay tạo ra từ 2-3 dự án html css khác nhau kết hợp css thuần và css framework để hoàn thiện dự án.
Dự án bạn làm càng chỉn chu bạn càng có nhiều lợi thế khi làm dự án hoàn chỉnh sau này cũng như nhận dự án freelancer.
Lưu ý: Trong hành trình đạo tạo hướng dẫn học viên học lập trình web đi làm khi kiểm tra code học viên thực hành các bài tập html css tôi nhận ra có 95% bài đăng lên gặp lỗi sai. Không những lỗi cú pháp mà còn gặp lỗi tư duy code html css tối ưu.
Vậy nên tốt nhất bạn nên tìm một môi trường học có người kinh nghiệm check code và góp ý lỗi sai trong các bài thực hành phối hợp kỹ năng của bạn trong các dự án nhỏ đến lớn.
Biết là khó nhưng nếu bạn có một người dẫn đường tận tâm đó là mắt xích quan trọng giúp bạn học đúng làm chuẩn ngay từ đầu và đạt kết quả cao trong hành trình đi làm của bạn.
Tổng kết
Trong bài viết này, unitop học web đi làm chia sẻ đến bạn nhanh lộ trình học html css cho người mới bắt đầu.
Nhiều người bảo sao nhiều thứ quá vậy làm sao học được?
Tin vui dành cho bạn!
Chỉ cần 21 ngày học tập kiên trì bạn đã có thể hoàn thiện kỹ năng xây dựng giao diện website theo ý mình. Đây chính là nấc thang đầu tiên giúp rất nhiều học viên unitop đã học đi làm với thu nhập tốt.
Thấu hiểu được những khó khăn của người học lập trình web trong giai đoạn đầu học html css tôi đã đúc kết kinh nghiệm trong 195+ bài học và được kèm cặp trực tiếp qua nhóm kín tại chương trình Html Css 21 Ngày để giúp bạn hoàn thiện kỹ năng html css quan trọng đầu tiên.
Phan Văn Cương và cộng sự
P/s: Nếu bạn gặp khó khăn hãy inbox cho tôi để được tư vấn!
Trước khi chúng ta gặp lại nhau, bạn có thể bấm vào đây để tải và đọc cuốn ebook chia sẻ về hành trình vượt qua khó khăn từng bước trở thành một web developer và giờ đây là người dẫn dắt đồng hành giúp hàng ngàn người có công việc thu nhập từ 8-50tr/tháng.
Hẹn gặp lại!
