Học lập trình frontend là bước đầu xây dựng một sự nghiệp thành công trong ngành IT. Học lập trình frontend từ căn bản đến nâng cao và xây dựng giao diện web đẹp mắt. thành coder chuyên nghiệp. Bắt đầu từ con số 0. Phù hợp cho mọi đối tượng. Hỗ trợ việc làm.
Trang 1KHÓA HỌC FRONT-END
Bài 01: Giới thiệu khóa học, học HTML
Trang 2Giới thiệu về khóa học Lộ trình khóa học
Giới thiệu về công việc Front-end
Hướng dẫn cài đặt phần mềm Học HTML
04 06
02 03
05
01
Nội dung
Trang 3● Tạo ra giao diện website để người
Trang 4● Tự tay lập trình được giao diện web theo bản thiết kế
● Giúp các bạn nắm vững được kiến thức nền tảng
● Đủ khả năng ứng tuyển được tại các công ty
01 Giới thiệu về khóa học
Mục tiêu chính của khóa học:
Khóa học gồm 44 buổi học, kéo dài khoảng 4 tháng
Trang 5● Hạn chế nghỉ học (không quá 6 buổi)
● Xem lại bài học sau khi học xong ít nhất 1 lượt (slide + file code)
01 Giới thiệu về khóa học
Yêu cầu về khóa học:
Trang 6● Phần 1: Giới thiệu và định hướng, học HTML, HTML5 (3 buổi)
● Phần 2: Học CSS, CSS3, Project mini 1 (5 buổi)
● Phần 3: Học Bootstrap 4 (4 buổi)
● Phần 4: Học GIT, GITHUB, Project mini 2 (2 buổi)
● Phần 5: Javascript cơ bản và nâng cao, Project mini 3(9 buổi)
● Phần 6: Package Managers, BEM, SASS/SCSS, Project mini 4 (3 buổi)
● Phần 7: ReactJS, Redux, React Router, Project mini 5 (10 buổi)
● Phần 8: Ant Design và Ant Design Charts (5 buổi)
● Phần 9: Project cuối khóa (3 buổi)
02 Lộ trình khóa học
Lộ trình khóa học: gồm 9 phần
Trang 7Landing page Luxcat Website bán cây xanh Website bán tour du lịch
03 Giới thiệu về công việc Front-end trong thực tế
● Link Website:
https://toptentravel.com.vn
Trang 803 Giới thiệu về công việc Front-end trong thực tế
Tìm job tuyển dụng tại:
● https://www.topcv.vn/
● https://itviec.com/
● Group tuyển dụng IT trên Facebook
Trang 904 Khái niệm UI - UX
UI là gì?
● UI Design (User Interface Design): là thiết kế giao diện người dùng
● Nếu website đẹp sẽ khiến nhiều người thích thú, tạo được thiện cảm tốt, tăng được độ tin tưởng
UX là gì?
● UX Design (User Experience Design): là thiết kế trải nghiệm người dùng
● UX là các thao tác mà người dùng thực hiện trên website
Trang 10● Color Highlight - Hiển thị màu sắc theo mã màu
● CSS Variables Autocomplete - Gợi ý các biến trong CSS để code nhanh hơn.
● HTML Boilerplate - Tạo khung HTML được soạn sẵn.
● HTML Snippets - Gợi ý code HTML
● Live Server - Khi lưu code thì web tự load lại
● Material Icon Theme - Icon cho theme dễ nhìn hơn
● Path Intellisense - Gợi ý đường dẫn các file
Trang 1106 Học HTML
6.1 Khái niệm
● HTML viết tắt của Hyper Text Markup Language.
● Là ngôn ngữ đánh dấu siêu văn bản.
● Không phải là ngôn ngữ lập trình.
● HTML có tác dụng tạo bố cục và định dạng trang web.
Trang 13● <head></head>: Khai báo các thông tin meta của trang web như: tiêu đề trang, charset.
● <title></title>: Cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu đề của trang.
● <body></body>: Cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang.
● <h1></h1>: Phần từ xác định một tiêu đề lớn.
● <p></p>: Phần tử xác định một đoạn văn bản.
Trang 1406 Học HTML
6.3 Hướng dẫn sử dụng Dev tools
● (Hướng dẫn trực tiếp khi học)
Trang 1506 Học HTML
6.4 Một số thẻ <meta>
● <meta charset="UTF-8">
● Xác định bộ ký tự được sử dụng, utf-8 để hỗ trợ hiển thị tiếng Việt.
● <meta name="keywords" content="HTML, CSS, JavaScript">
● Xác định từ khóa cho công cụ tìm kiếm.
● <meta name="description" content="Free Web tutorials">
● Xác định mô tả về trang web của bạn.
● <meta name="author" content="John Doe">
● Xác định tác giả của một trang.
● <meta name="viewport" content="width=device-width, initial-scale=1.0">
● Đặt chế độ xem để làm cho trang web của bạn hiển thị tốt trên tất cả các thiết bị.
Trang 16● Cú pháp: <! Nội dung comment >
● Phím tắt: Ctrl + /(Windows) hoặc Cmd + /(Mac)
Trang 17● <tagname>: Thẻ bắt đầu của element
● </tagname>: Thẻ kết thúc của element
● Nội dung : Nội dung của element
● Ví dụ: <h1>Tiêu đề lớn</h1>
● Các tagnamekhông phân biệt chữ hoa, chữ thường Nhưng nên viết chữ thường.
Trang 1806 Học HTML
6.5 Tạo Comments, Elements, Attributes
● Attributes (thuộc tính)
● Sẽ cung cấp thêm thông tin cho các element, nằm trong thẻ mở.
● Một element có thể có nhiều thuộc tính.
● Cú pháp: <tagname attribute-name="value">Nội dung </tagname>
● Trong đó:
● attribute-name: Tên thuộc tính
● "value": Giá trị của thuộc tính
● Ví dụ: <html lang="vi"></html>
Trang 2006 Học HTML
6.6 Tạo Headings, Paragraphs, Formatting
● Paragraphs (đoạn văn)
● Luôn luôn bắt đầu trên một dòng mới và thường là một khối văn bản.
Trang 2106 Học HTML
6.6 Tạo Headings, Paragraphs, Formatting
● Formatting (định dạng)
● <b></b> (bold - in đậm): Văn bản in đậm
● <strong></strong>: Văn bản in đậmvà quan trọng
● <i></i>(italic - in nghiêng): Văn bản in nghiêng
● <em></em>(emphasized - nhấn mạnh): Văn bản in nghiêng và quan trọng
● <small></small>: Văn bản chữ nhỏhơn
● <sub></sub>(subscripted - chỉ số dưới): Văn bản có chỉ số dưới
● <sup></sup>(superscripted - chỉ số trên): Văn bản có chỉ số trên
● <ins></ins>(inserted - chèn): Văn bản được chèn, có gạch chânbên dưới.
● <del></del>(deleted - đã xóa): Văn bản đã xóa
● <mark></mark>(marked - đánh dấu): Văn bản được đánh dấu
Trang 22Bài tập
Link bài tập:
https://khoa-hoc-front-end.vercel.app/lessons/lesson-1/index.html
Trang 23KHÓA HỌC FRONT-END
Bài 02: Học HTML, HTML5 (Tiết 2)
Trang 24Thẻ <a> (Chèn link) Thẻ <img> (Chèn ảnh)
Thẻ <audio> (Chèn audio) Thẻ <table> (Chèn bảng)
04 06
02 03
07
Class và Id
09
Trang 25● Thẻ <a></a> (anchor - mỏ neo) là thẻ để khi click vào thẻ đó sẽ chuyển hướng đến trang
● target: thuộc tính xác định nơi mà tài liệu được mở
● _ self: Mặc định Mở tài liệu ở tab hiện tại
● _blank: Mở tài liệu trong tab mới
● title: Thông tin bổ sung về một element
01 Thẻ <a> (Chèn link)
Trang 26● Thẻ <img /> là thẻ để nhúng ảnh vào trang web, thẻ img là thẻ trống, chỉ chứa các thuộc
tính và không có thẻ đóng
● Cú pháp: <img src=“duong-dan-hinh-anh.jpg" alt=“Mô tả hình ảnh">
● Thuộc tính:
● src (source - nguồn): Chèn đường dẫn ảnh
● alt(alternate - thay thế): Văn bản thay thế cho hình ảnh, hiển thị khi đường dẫn ảnh
bị lỗi
02 Thẻ <img> (Chèn ảnh)
Trang 27● Absolute File Paths (Đường dẫn tệp tuyệt đối): Đường dẫn tệp tuyệt đối là URL đầy đủ của tệp.
<img src="https://28tech.com.vn/assets/img/logo.png" alt=“Logo 28tech">
● Relative File Paths (Đường dẫn tệp tương đối): Đường dẫn tệp tương đối trỏ đến một tệp liên quan đến
trang hiện tại
<img src="logo.png" alt="Logo">: File "logo.png" nằm cùng thư mục với trang hiện tại.
<img src="images/logo.png">: File " logo.png" nằm trong thư mục images trong thư mục hiện tại.
<img src=“/images/logo.png">: File " logo.png" nằm trong thư mục images ở thư mục gốc của trang
web hiện tại
<img src=" /logo.png">: File " logo.png" nằm trong thư mục tăng một cấp so với thư mục hiện tại.
03 File Paths (Đường dẫn)
Trang 29● Thẻ <video></video> là thẻ để nhúng video vào trang web Trong thẻ video có thẻ
<source> để chứa đường dẫn file video và kiểu video
● Cú pháp:
<video width="320" height="240" controls>
<source src=“link-video.mp4" type="video/mp4">
</video>
● Thuộc tính:
● width/height: Chiều rộng và chiều cao của video Nếu không để width/height thì web có thể bị nhấp nháy trong khi tải video
● controls: Thuộc tính điều khiển, như là bật, tạm dừng, âm lượng
● loop: Lặp lại video
● src: Đường dẫn video
04 Thẻ <video> (Chèn video)
Trang 31● Thẻ <audio></audio> là thẻ dùng để nhúng audio vào trang web Trong thẻ audio có thẻ
<source> để chứa đường dẫn file audio và kiểu audio
● controls: Thuộc tính điều khiển, như là bật, tạm dừng, âm lượng
● loop: Lặp lại audio
● src: Đường dẫn audio
● type: Kiểu audio (Ví dụ: mpeg - là mp3, ogg, webm, wav)
05 Thẻ <audio> (Chèn audio)
Trang 33● Thẻ <table></table> dùng để tạo bảng trong HTML.
Trang 34● Ý nghĩa các thẻ:
● <table></table>: Xác định một bảng
● <thead></thead>: Phần đầu của bảng
● <tbody></tbody>: Phần thân của bảng
● <tr></tr> (table row): Xác định một hàng của bảng
● <th></th> (table header): Xác định tiêu đề của bảng
● <td></td>(table data): Xác định dữ liệu ô của bảng
● Thuộc tính:
● colspan: tạo ô mở rộng trên nhiều cột
● rowspan: tạo ô kéo dài trên nhiều hàng
06 Thẻ <table> (Chèn bảng)
Trang 35● Ví dụ 1:
06 Thẻ <table> (Chèn bảng)
Trang 36● Ví dụ 2:
06 Thẻ <table> (Chèn bảng)
Trang 37● Kiểu <ul></ul> (Unordered List - Không sắp xếp): Các mục con của nó sẽ không được đánh số,
● <ul></ul> (Unordered List): Danh sách hiển thị kiểu không được đánh số
● <li></li> (List Item): Một mục trong danh sách
07 Thẻ <ul>, <ol> (Chèn danh sách)
Kiểu ul:
Trang 38● Kiểu <ol></ol> (Ordered List - Sắp xếp): Các mục con của nó được sắp xếp theo thứ tự bằng số
● <ol></ol> (Ordered List): Danh sách hiển thị kiểu được đánh số hoặc chữ cái
● <li></li> (List Item): Một mục trong danh sách
07 Thẻ <ul>, <ol> (Chèn danh sách)
Kiểu ol:
Trang 39● Thuộc tính dành riêng cho thẻ <ol></ol>:
● type="1": Mặc định Các mục trong danh sách sẽ được đánh dưới dạng số
● type= "A": Các mục trong danh sách sẽ được đánh dưới dạng chữ hoa
● type="a": Các mục trong danh sách sẽ được đánh dưới dạng chữ thường
● type="I": Các mục trong danh sách sẽ được đánh dưới dạng số La Mã viết hoa
● type="i": Các mục trong danh sách sẽ được đánh dưới dạng số La Mã viết thường
07 Thẻ <ul>, <ol> (Chèn danh sách)
Kiểu ol:
Trang 4007 Thẻ <ul>, <ol> (Chèn danh sách)
Ví dụ:
Trang 41● Luôn luôn bắt đầu trên một dòng mới, và trình duyệt sẽ tự động thêm khoảng trống trước và sau element.
● Luôn luôn chiếm toàn bộ chiều rộngcó sẵn
● Một số thẻ dạng block:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1> - <h6>, <header>, <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>
08 Phân biệt kiểu hiển thị của element: block và inline
Kiểu block (khối):
Trang 42● Không bắt đầu trên một dòng mới, chiều rộng bằng với chiều rộng của element đó.
● Một số thẻ dạng inline:
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <em>, <i>, <img>,
<input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>
08 Phân biệt kiểu hiển thị của element: block và inline
Kiểu inline (nội tuyến - trong hàng):
Trang 43● Khi sử dụng cần nhớ quy tắc đảm bảo mô hình nội dung của HTML:
● Phần tử cấp độ inline không được chứa phần tử cấp độ block
● Inline chỉ chứa dữ liệu hoặc các phần tử inline khác
● Phần tử block thì được chứa các phần tử block, inline, dữ liệu
● Có trường hợp ngoại lệ là thẻ <a> (kiểu inline) nhưng có thể chứa phần tử kiểu block
08 Phân biệt kiểu hiển thị của element: block và inline
Lưu ý:
Trang 44● Thuộc tính class dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML Tên lớp có thể dùng trong CSS hoặc JavaScript để thực hiện một số tác vụ nhất định cho phần tử có tên lớp đó.
● Một class có thể áp dụng cho được nhiều element, và các element này không nhất thiết phải cùng loại thẻ
● Một class có thể nhận được nhiều giá trị, mỗi giá trị cách nhau bằng một khoảng trắng
● Thuộc tính class có thể được sử dụng trên bất kỳ phần tử HTML nào
● Tên lớp có phân biệt chữ hoa chữ thường
09 Class và Id
Class:
Trang 45● Thuộc tính id dùng để xác định một id duy nhất cho một element.
● Trong một trang các element không được phép trùng tên của id
● Tên id có thể dùng trong CSS hoặc JavaScript để thực hiện một số tác vụ nhất định cho phần tử có tên id đó
● Tên id có phân biệt chữ hoa chữ thường
● Lưu ý: Tên id phải chứa ít nhất một ký tự, không được bắt đầu bằng số và không được chứa khoảng trắng (dấu cách, tab, )
09 Class và Id
Id:
Trang 46● Các ký tự là chữ cái viết thường: từ a →z
● Các ký tự là chữ cái viết hoa: từ A → Z
● Các ký tự là chữ số: từ 0 → 9
● Dấu gạch dưới: _
● Dấu gạch nối:
-● Lưu ý: Tên id và tên class tuyệt đối:
● Không chứa các ký tự đặc biệt (ví dụ như ! @ # $ % ^ &)
● Không bắt đầu là một số từ 0 → 9
09 Class và Id
Quy tắc đặt tên class và id (giống nhau):
Trang 4709 Class và Id
Ví dụ về việc đặt tên id và tên class:
webcobanWebcobanwebCobAnwe9co3an_webc_obanweb-Cob-An
SAI 9webcoban (sai vì bắt đầu bằng chữ số)
web%^coban (sai vì có chứa các ký tự đặc biệt)
Trang 4809 Class và Id
Điểm khác nhau giữa "thuộc tính id" & "thuộc tính class":
Thuộc tính id - Một phần tử chỉ nhận một id
- Một tên id chỉ có thể dùng để đặt cho một phần tử duy nhất
- Khi muốn chọn một phần tử dựa theo id thì ta dùng cú pháp #ten-id
Thuộc tính class - Một phần tử có thể nhận một hoặc nhiều class
- Một tên class có thể dùng để đặt cho nhiều phần tử khác nhau
- Khi muốn chọn một phần tử dựa theo class thì ta dùng cú pháp ten-class
Trang 49Bài tập
Link bài tập:
https://khoa-hoc-front-end.vercel.app/lessons/lesson-2/index.html
Trang 50KHÓA HỌC FRONT-END
Bài 03: Học HTML, HTML5 (Tiết 3)
Trang 51Nhúng Iframe Một số thẻ Semantic
Forms (Form Attributes, Form Elements,
Input Types, Input Attributes)
Những tính năng HTML5 có mà HTML không có
Bài test trắc nghiệm
04
02 03
05
01
Nội dung
Trang 52● Thẻ <iframe></iframe> được sử dụng để hiển thị một trang web trong một trang web.
● Cú pháp:
<iframe src="url" title="description" height="200" width="300"></iframe>
● Ví dụ:
● <iframe src="https://daca.vn/" title="Website Daca" width="1200" height="600"></iframe>
● <iframe src="https://khoahoc.28tech.com.vn/" title="Website 28Tech" width="1200" height="600"></iframe>
01 Nhúng Iframe
Trang 53● Mục tiêu cho một liên kết:
● Thuộc tínhtargetcủa liên kết phải tham chiếu đến thuộc tínhnamecủa iframe
Trang 54● Semantic: Dịch ra là ngữ nghĩa Là những thẻ có nội dung bên trong có ý nghĩa tương ứng với tên thẻ đó.
● Một số thẻ Semantic:
● <article>: Xác định nội dung độc lập, khép kín
● <aside>: Xác định nội dung ngoài nội dung trang
● <details>: Xác định các chi tiết bổ sung mà người dùng có thể xem hoặc ẩn
● <summary>: Xác định tiêu đề hiển thị cho phần tử <details>
● <figcaption>: Xác định chú thích cho phần tử <figure>
● <figure>: Chỉ định nội dung độc lập, như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v.
● <header>: Chỉ định tiêu đề cho một tài liệu hoặc section
● <footer>: Xác định chân trang cho tài liệu hoặc section
● <main>: Chỉ định nội dung chính của một tài liệu
● <mark>: Xác định văn bản được đánh dấu / nhấn mạnh
● <nav>(navigation - dẫn đường): Xác định các liên kết điều hướng
● <section>: Xác định một phần trong tài liệu
● <time>: Xác định ngày / giờ
02 Một số thẻ Semantic