Lập trình HTML5 CSS3 RWD JS BOOTSTRAP Online (Free)

GIỚI THIỆU

Khóa học cung cấp cho học viên là những bạn bắt đầu tìm hiểu về lập trình web muốn có đủ kiến thức và kỹ năng để có thể thực hiện các website tĩnh. Trang bị những kiến thức nền tảng vững chắc về lập trình Web bắt đầu từ HTML đến HTML5, từ CSS đến CSS3 và từ Javascript đến jQuery, để có thể nhúng các xử lý vào các trang HTML, lập trình Web ở mức client-side. Cung cấp nguồn kiến thức nền tảng về thiết kế 1 website tĩnh để học viên tự tin tham gia các khóa học về xây dựng web động như PHP & MySQL.

+ Công nghệ website mới được đưa vào giảng dạy trong khóa học này:

- Responsive Web Design (RWD) và HTML5 & CSS3 làm cho website có những ưu điểm sau:

1. Responsive Web Design (RWD): Đây là công nghệ mới trong thiết kế giao diện website – Với công nghệ này, website sẽ tự động điều chỉnh co giãn độ rộng và bố cục nội dung của trang web theo kích cỡ và độ phân giải màn hình của mọi thiết bị như: Laptop, Desktop, iPad, iPhone, Smartphone, Tablet sao cho thông tin hoặc hình ảnh trên trang web không bị mất vùng hiển thị do màn hình không đủ rộng khi truy cập web trên các iPhone, smartphone, . . . Các website thiết kế giao diện theo công nghệ cũ là định thông số độ rộng và độ phân giải màn hình thiết bị theo số cố định nên các website này phải có thêm 1 phiên bản website tương tự được đặt thêm chữ m.* để chạy trên các thiết bị như: iPhone, smartphone, iPad, tablet. Ví dụ như: vnexpress.net và m.vnexpress.net. Việc này sẽ mất công sức trong việc vận hành và quản lý website. Các website thiết kế theo công nghệ RWD sẽ đáp ứng tốt được chuẩn SEO mới nhất trên Mobile của Google (Mobile-Friendly)

2. HTML5 & CSS3: Hỗ trợ việc thiết kế giao diện & SEO của website tốt hơn.

3. BOOTSTRAP: Hỗ trợ việc thiết kế giao diện web Responsive nhanh hơn với Framework Bootstrap có sẵn.


Tham dự khóa học này, học viên sẽ được học về các kỹ thuật phân tích - lập trình tạo website đạt mục tiêu nói trên, cũng như học cách sử dụng các phần mềm chuyên dụng để lập trình tạo các trang web đạt tính thẩm mỹ cao.


Đối tượng: Tất cả những ai muốn có một nghề chuyên nghiệp trong lĩnh vực lập trình thiết kế & xây dựng website cho các công ty hiện nay.

 
Yêu cầu: Dành cho tất cả mọi đối tượng.
 
Tài liệu học tập và thực hành: Học trực tiếp bằng VideoClip chi tiết bằng tiếng Việt. 

Hoàn thành: Có khả năng Lập trình & thiết kế giao diện website linh hoạt, chuyên nghiệp hoàn chỉnh đạt cấp độ cao về hình ảnh thẩm mỹ, nội dung sinh động, đáp ứng được yêu cầu cần lập trình thiết hiện nay tại các doanh nghiệp.

Bạn sẽ học được những gì?

- Sau khóa học này Bạn sẽ nắm vững các kỹ thuật Lập trình web với:

1 - Adobe Dreamweaver CC.
2 - Lập trình web với HTML & CSS.
3 - Lập trình web theo công nghệ CSS3.
4 - Lập trình web theo công nghệ HTML5
5 - Lập trình web theo công nghệ RWD (Responsive Web Design) để có thể chạy trên tất cả các thiết bị Desktop, Mobile & Tablet
6 - Lập trình web theo chuẩn CSS3 Media Query để có thể chạy trên tất cả các thiết bị Desktop, Mobile & Tablet
7 - Lập trình web với Javascript
8 - Lập trình web theo công nghệ BOOTSTRAP để có thể chạy trên tất cả các thiết bị Desktop, Mobile & Tablet

 
NỘI DUNG CHƯƠNG TRÌNH

Môn 1: Lập trình web HTML, CSS & cách sử dụng DREAMWEAVER căn bản

- Giới thiệu tất cả các thẻ HTML cơ bản dùng để thiết kế giao diện website.
- Giới thiệu kỹ thuật thiết kế giao diện website bằng thẻ DIV.
- Thiết kế và tạo hợp lệ cho biểu mẫu FORM của trang web.
- Giới thiệu kỹ thuật trang trí giao diện trang web bằng CSS2.
- Giới thiệu tất cả các kỹ thuật tạo menu cho website.
- Bài tập tổng hợp: Lập trình thiết kế hoàn chỉnh giao diện website bán hàng trực tuyến với đầy đủ các module.


Môn 2: Lập trình web bằng CSS3

- Trang trí giao diện web bằng CSS3 Borders và CSS3 Border Image.
- Trang trí giao diện web bằng CSS3 Box Shadow.
- Trang trí giao diện web bằng CSS3 Text Shadow.
- Trang trí giao diện web bằng CSS3 Gradient.
- Trang trí giao diện web bằng CSS3 Fonts.
- Trang trí giao diện web bằng CSS3 Backgrounds.
- Tạo hiệu ứng hoạt hình cho web bằng CSS3 Transitions.
- Tạo hiệu ứng hoạt hình cho web bằng CSS3 Animations.
- Thiết kế giao diện web bằng CSS3 Multiple Columns.
- Tạo giao diện web bằng CSS3 User Intreface.
- Bài tập tổng hợp: Lập trình thiết kế giao diện và tạo hiệu ứng cho website bằng CSS3.


(Xem chi tiết)


Môn 3: Lập trình web bằng HTML5

- Giới thiệu ngôn ngữ HTML5.
- Cấu trức trang web HTML5.
- Sử dụng thẻ header và footer trong HTML5.
- Sử dụng thẻ nav để tạo menu cho website bằng HTML5.
- Sử dụng thẻ section, article, aside trong thiết kế giao diện website bằng HTML5.
- Sử dụng thẻ figure và figurecaption để chèn hình ảnh cho website bằng HTML5.
- Cách kết hợp thẻ Figure và CSS3 Transform để tạo hiệu ứng cho hình ảnh.
- Sử dụng thẻ audio và video để tạo âm thanh và video cho website.
- Sử dụng thẻ SVG để vẽ hình vector cho website.
- Sử dụng thẻ CANVAS để vẽ đồ hoạ cho website.
- Giới thiệu Geolocation HTML5 API để tạo bản đồ.
- Giới thiệu Web Storage: Session Storage và Local Storage.
- Giới thiệu Web SQL Database.
- Giới thiệu Web Workers.


Môn 4: Lập trình web bằng RWD (Responsive Web Design)

- Giới thiệu kỹ thuật lập trình thiết kế web theo công nghệ RWD.
- Giới thiệu CSS3 Media Queries.
- Bài tập tổng hợp: Lập trình thiết kế hoàn chỉnh giao diện website theo công nghệ RWD.

(Xem chi tiết)

Môn 5: Lập trình web bằng Javascript

- Giới thiệu Ngôn ngữ lập trình Javascript.
- Các hộp thoại cơ bản.
- Vị trí code javascript trong trang HTML
- Biến: khai báo, các giá trị...
- Hàm: cú pháp khai báo và khi được gọi.
- Cấu trúc điều khiển.
- Các đối tượng trong javascript.
- Một số phương thức cơ bản của đối tượng Math, String, Date.
- Một số phương thức cơ bản của đối tượng BOM, DOM


Môn 6: Lập trình web bằng Bootstrap 

- Giới thiệu Bootstrap CSS Frameworks V3.3.4
- Hướng dẫn cách cài đặt và nhúng Bootstrap Frameworks vào website
- Tìm hiểu cấu trúc của Bootstrap CSS Frameworks
- Hướng dẫn sử dụng hệ thống lưới của Bootstrap (Bootstrap Grid System) để thiết kế giao diện web Responsive
- Hướng dẫn thiết kế bảng (Table) trong Bootstrap
- Hướng dẫn cách thiết kế biểu mẫu (Form) trong Bootstrap
- Hướng dẫn cách thiết kế nút (Button) trong Bootstrap
- Hướng dẫn cách hiển thị hình ảnh trong Bootstrap
- Hướng dẫn sử dụng thành phần Helper classes Boostrap trong thiết kế giao diện web
- Hướng dẫn sử dụng thành phần Typography Bootstrap trong thiết kế giao diện web
- Hướng dẫn sử dụng thành phần Glyphicons Bootstrap trong thiết kế giao diện web
- Hướng dẫn sử dụng thành phần Dropdown trong Bootstrap
- Hướng dẫn sử dụng thành phần Button groups trong Bootstrap
- Hướng dẫn sử dụng thành phần Button dropdowns trong Bootstrap
- Hướng dẫn sử dụng thành phần Input groups trong Bootstrap
- Hướng dẫn sử dụng thành phần Navs trong Bootstrap
- Hướng dẫn sử dụng thành phần Navbar trong Bootstrap
- Hướng dẫn sử dụng thành phần Breadcrumbs trong Bootstrap
- Hướng dẫn sử dụng thành phần Pagination trong Bootstrap
- Hướng dẫn sử dụng thành phần Labels trong Bootstrap
- Hướng dẫn sử dụng thành phần Badges trong Bootstrap
- Hướng dẫn sử dụng thành phần Jumbotron trong Bootstrap
- Hướng dẫn sử dụng thành phần Page header trong Bootstrap
- Hướng dẫn sử dụng thành phần Thumbnails trong Bootstrap
- Hướng dẫn sử dụng thành phần Alerts trong Bootstrap
- Hướng dẫn sử dụng thành phần Progress bars trong Bootstrap
- Hướng dẫn sử dụng thành phần Media object trong Bootstrap
- Hướng dẫn sử dụng thành phần List group trong Bootstrap
- Hướng dẫn sử dụng thành phần Panels trong Bootstrap
- Hướng dẫn sử dụng thành phần Responsive embed trong Bootstrap
- Hướng dẫn sử dụng thành phần Responsive Wells trong Bootstrap
- Hướng cách sử dụng Bootswatch trong Bootstrap
- Hướng dẫn cách tùy biến hệ thống lưới Grid System Bootstrap dùng Pixel (không dùng %)
- Hướng dẫn cách sử dụng các Plugins Javascript trong Bootstrap: Carousel, Collapse, Buttons, Alert, Popovers, Tooltips, Tabs, ScrollSpy, Dropdowns, Modals vv...
- Xem thêm các bài học về cách thiết kế trang web bằng Bootstrap tại Blog hocwebgiare.com - Click vào đây

Bài tập tổng hợp: Thiết kế giao diện website hoàn chỉnh bằng Bootstrap, HTML5, CSS3

Đồ án cuối khóa

- Lập trình thiết kế hoàn chỉnh website tin tức online bằng HTML5, CSS3, RWD