KHÓA HỌC

Khóa Học Front-end Web Cơ Bản Và Nâng Cao Với React.js

Học lập trình và thiết kế web front end từ căn bản cùng với framework React.js dẫn đầu về nhu cầu công việc lớn nhất hiện nay.

THÔNG TIN CƠ BẢN
  • HỌC PHÍ
    9,000,000₫
    toàn khóa
  • SĨ SỐ
    6
    / lớp
  • THỜI LƯỢNG
    3
    tháng
  • ĐĂNG KÝ

   Khóa học này dành cho ai?

  • Người mới, chưa từng biết lập trình trước đó.
  • Đã từng lập trình nhưng muốn đảm bảo kiến thức được hệ thống hoàn chỉnh.
  • Muốn học lập trình front end 1 cách bài bản.
  • Muốn được đào tạo các kiến thức dành cho công việc thực tế.
  • Nhân sự ngoài ngành lập trình muốn thay đổi công việc mới.
  • Bạn muốn có 1 việc làm liên quan đến web hoặc ngành công nghệ thông tin.
  • Bạn không tin tưởng các kiến thức rải rác và chắp vá trên mạng.
  • Muốn được sự hỗ trợ kỹ thuật, kinh nghiệm từ giảng viên kể cả sau khóa học.

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

  • Tạo các trang web front-end đầy đủ, thực tế bằng công nghệ tiên tiến từ đầu.
  • Tạo các trang web tĩnh với thuần HTML và CSS.
  • Sử dụng NodeJS để học JavaScript từ cơ bản.
  • Kỹ thuật lập trình với JavaScript.
  • Hiểu được input/output của HTTP Request.
  • JSON, XML và RESTful.
  • Tạo trang đích đẹp, tương thích nhiều kích thước màn hình (Responsive).
  • Triển khai xác thực người dùng.
  • Hiểu đầy đủ kiến trúc đằng sau ứng dụng React.js và cách ứng dụng.
  • Phát triển giao diện người dùng với React.js.
  • Tạo các ứng dụng single-page với React.js (1 trong các frameworks front-end) hiện đại nhất.
  • Phát triển ứng dụng web hiện đại, phức tạp, đáp ứng và có thể mở rộng với React.js.
  • Cách thức triển khai dự án front-end React.js, đưa vào ứng dụng.
  • Tập trung học các kiến thức được sử dụng trong công việc, đáp ứng nhu cầu các công ty.
Chương trình học - gồm 2 phần

Front-end Web Cơ Bản Và Nâng Cao

  • 1

    HTML - I - Căn bản

    Cài đặt các phần mềm cần thiết: Visual Studio Code & Notepad++.

    Mô hình web truyền thống và mô hình front-end, back-end và full-stack developers.

    Căn bản về HTML.

    • Cấu trúc của 1 file HTML và phần tử trong HTML.
    • Các phiên bản HTML và <!DOCTYPE html>.
    • Thẻ trong HTML: title, h1... h6, p, span, br.
    • Các loại list và table.
    • Hiển thị với Unicode trong HTML.
    • Thuộc tính của thẻ.
    • Thẻ img và a.
      • Đường dẫn tương đối và đường dẫn tuyệt đối.
    • Block và inline.

    So sánh các phiên bản trước HTML5 và sau HTML5.

    Thực hành dựng trang HTML với HTML4 và HTML5.

    THỜI LƯỢNG
    3 giờ
  • 2

    HTML - II - Nâng cao và HTML5/6

    Các tính năng nâng cao.

    • HTML Entities: thuận lợi và nhược điểm.
    • Sử dụng mã thay thế và một số ký tự đặc biệt thường dùng.

    Form và input.

    • Form và các phương thức.
    • Các loại input cơ bản.
    • Submit button.

    Các tính năng của HTML5/6.

    • Các loại input mới trong HTML5/6.
    • Audio và video.

    Giới thiệu về frame.

    • Giới thiệu và cách sử dụng frame hiệu quả.
    • Nhúng youtube clip vào web và ứng dụng quảng cáo.

    Thực hành.

    THỜI LƯỢNG
    3 giờ
  • 3

    CSS - I - Căn bản

    Giới thiệu CSS?

    • CSS là gì?
    • Vai trò của CSS trong việc thiết kế website.
    • Các mở rộng khác của CSS ngoài website.
    • Các phiên bản CSS.

    Sử dụng CSS

    • External CSS, Internal CSS và Inline CSS
    • Selector CSS: id, class, tag name, ...

    Sắp xếp các block: left, right.

    • Nhắc lại block và inline.

    Các thuộc tính cơ bản

    • Thuộc tính kích thước.
    • Thuộc tính màu sắc.
      • Mã màu theo hệ thập lục phân và hệ thập phân.
    • Thuộc tính font chữ.
    • Thuộc tính viền và bo tròn.
      • Các kỹ thuật tính toán viền và bo tròn.

    Thực hành.

    THỜI LƯỢNG
    3 giờ
  • 4

    CSS - II - Nâng cao

    CSS nâng cao

    • Đơn vị trong CSS.
    • Margin và padding (trong và ngoài).

    Vị trí các phần tử.

    • Tọa độ các phần tử.
    • Hệ qui chiếu tương đối và hệ qui chiếu tuyệt đối.
    • CSS transformation.
    • Tạo hiệu ứng hoạt hình với CSS.

    Đa giác với CSS3.

    Nâng cao về selector.

    • Các mối quan hệ trên dưới và ngang hàng.
    THỜI LƯỢNG
    3 giờ
  • 5

    Trang chi tiết sản phẩm - I - Dựng trang

    Giới thiệu các tính năng nâng cao của CSS3.

    stdio electronics demo

    Thực hành dựng trang sản phẩm: 

    • Tham khảo trang demo: https://electronics.stdio.vn.
    • Giảng viên hỗ trợ học viên phân tích thành phần của trang.
    • Tên sản phẩm: STDIO Starter Kit v2
    • Đường dẫn: https://electronics.stdio.vn/products/stdio-starter-kit-v2-5
    THỜI LƯỢNG
    3 giờ
  • 6

    Trang chi tiết sản phẩm - II - Xử lý đa màn hình

    Giới thiệu về responsive và xử lý hiển thị trang web trên nhiều kích thước màn hình khác nhau.

    • Vì sao phải responsive?
    • Các phương pháp hỗ trợ xử lý Responsive.
    • Lợi ích và nhược điểm khi sử dụng Responsive.

    Xử lý responsive.

    • @media và override css.
    • Thực hành thiết kế responsive cho trang chi tiết sản phẩm.
    THỜI LƯỢNG
    3 giờ
  • 7

    JavaScript - I - Tiếp cận JavaScript

    Giới thiệu ngôn ngữ lập trình JavaScript và vai trò JavaScript trong lập trình web.

    Nguyên tắc của các ngôn ngữ lập trình hiện đại.

    Thuận lợi và nhược điểm của các ngôn ngữ kịch bản như JavaScript.

    Giới thiệu NodeJS.

    • Giới thiệu NodeJS.
    • Cài đặt NodeJS.
    • Mối quan hệ giữa JavaScript, trình duyệt web, NodeJS.
    • Các ứng dụng khác của NodeJS.
    • Chương trình đầu tiên "Hello JavaScript".
    • Căn bản 1 dòng code trong JavaScript.
    • Thực hành.

    Biến trong JavaScript.

    • Biến vô hướng: thuận lợi và các bất lợi.
    • Thực hành.

    Các loại dữ liệu mở rộng.

    THỜI LƯỢNG
    3 giờ
  • 8

    JavaScript - II - Điều kiện và vòng lặp

    Cấu trúc điều điều kiện.

    • Cấu trúc rẽ nhánh if/else.
    • Cấu trúc switch/case.
    • Thực hành.

    Vòng lặp có điều kiện.

    • Vòng lặp while.
    • Vòng lặp for.
    • Thực hành.
    THỜI LƯỢNG
    6 giờ
  • 9

    JavaScript - III - Hàm và hàm nặc danh

    Hàm trong JavaScript.

    • Hàm trong ngôn ngữ JavaScript.
    • Sử dụng hàm dựng sẵn và hàm đã xây dựng.
    • Thực hành.

    Truyền hàm vào 1 hàm khác (Higher order functions).

    • Cách thức hiện thực và tính ứng dụng.
      • Giới thiệu về lập trình hàm (Functional programming).
    • Thực hành.

    Hàm nặc danh, cách khởi tạo và tính ứng dụng.

    • Thực hành.
    THỜI LƯỢNG
    3 giờ
  • 10

    JavaScript - IV - Ứng dụng vào lập trình web

    Ứng dụng JavaScript vào lập trình web.

    • Mối quan hệ giữa HTML và JavaScript.
    • Khai báo hàm JavaScript.
      • Internal JavaScript và External JavaScript.
    • 1 số hàm tiện ích trong JavaScript với trình duyệt web.

    Mô hình DOM.

    • Giới thiệu về mô hình DOM.
    • Truy cập các phần tử của HTML thông qua JavaScript thông qua tag, id và class.
    • Nhận và gán giá trị từ 1 phần tử.
      • Thuộc tính và nội dung.
      • Xử lý logic.

    Thực hành.

    THỜI LƯỢNG
    3 giờ
  • 11

    Xử lý sự kiện với JavaScript

    Mô hình sự kiện và các sự kiện.

    Xử lý sự kiện trên các phần tử.

    • Sự kiện tự gọi.
    • Sự kiện từ người dùng.

    Sự kiện chuột.

    • Xử lý các sự kiện từ chuột.

    Sự kiện từ bàn phím.

    • Mã ASCII và bàn phím.
    • Sự kiện và mã phím.
    THỜI LƯỢNG
    3 giờ
  • 12

    JavaScript ECMA6

    Default Parameter

    Template Literals

    Multi-line String

    Destructuring Assignment

    Enhanced Object Literals

    Arrow Function

    Block-Scoped Constructs Let and Const

    Class

    THỜI LƯỢNG
    3 giờ
  • 13

    Mô hình Front-end vs Back-end

    Mô hình Front-end vs Back-end.

    1. Mô hình Front-end vs Back-end.
    2. HTTP Request và tham số.
    3. Webservice.
      • Request và Response.
      • REST API.

    JSON và chuẩn giao tiếp.

    1. Kiến trúc của JSON.
    2. Ứng dụng vào giao tiếp Front-end vs Back-end.

    Demo và ứng dụng.

    THỜI LƯỢNG
    3 giờ

Xây Dựng Front-end Nâng Cao Với Nền Tảng React.js

  • 14

    Làm việc với Node Package Module - npm

    Làm việc với Node Package Module - npm

    • Giới thiệu package
    • Giới thiệu module
    • Giới thiệu 1 số lệnh npm cơ bản
    • Vai trò của file package.json

    Làm việc với Babel

    • Giới thiệu Babel
    • Cài đặt và sử dụng
    • module system, CommonJS và require
    THỜI LƯỢNG
    3 giờ
  • 15

    Giới thiệu và cài đặt React Native

    Giới thiệu ứng dụng đa nền tảng

    Thiết lập môi trường

    Tạo dự án đầu tiên

    Căn bản về React Native

    • Cấu trúc dự án
    • Sự khác biệt giữa React và React Native

    Khởi tạo Component mẫu

    Tính năng Destructor Import của ES6

    Life cycle của ứng dụng React Native

    Hiện thực Componenet Header của riêng mình cho App

    Sử dụng Header vừa khỏi tạo giới thiệu về export của ES6

    THỜI LƯỢNG
    3 giờ
  • 16

    Thiết kế giao diện người dùng

    Thiết kế giao diện người dùng

    • Styling cho các component trong React Native
    • Giới thiệu về FlexBox
    • Style cho componenet Header đã tạo ở mục 3.8
    • Xây dựng component Header

    Giao tiếp qua với server

    • HTTP Request / Response, RESTful và cấu trúc JSON
    • Thư viện Axios
    • Component trong React
    THỜI LƯỢNG
    3 giờ
  • 17

    Ứng dụng HTTP Request

    Ứng dụng HTTP Request

    • Hiện thực List Componenet để hiển thị dữ liệu từ server
    • Hiện thực Componenet Album để hiển thị từng item trong list
    • Hiện thực Componenet Card để có thể dễ dàng nhóm các componenet khác
    • Style cho Componenet Card
    • Component props và passing props giữa các component
    • Hiện các nhóm con của Card Component - CardItem

    Hoàn thiện ứng dụng

    • Hiển thị hình ảnh với component Image
    • Làm cho List có thể scroll được và các khái niệm về scroll
    • Xây dựng đối tượng Button
    • Linkining và Deep Link của ứng dụng
    THỜI LƯỢNG
    3 giờ
  • 18

    Trạng thái và xử lý bất đồng bộ

    State toàn cục và State bất biến

    Khởi tạo State bất biến

    Nghiệp vụ bất đồng bộ và đồng bộ với Redux

    Giới thiệu về Redux Thunk để giải quyết bất đồng bộ

    Chi tiết hơn về Redux Thunk

    Đăng nhập người dùng sử dụng Redux

    Hiện thực việc tạo tài khoản mới

    Hiện thực hiển thị dữ liệu sử dụng Redux

    Sử dụng Firebase kết hợp với Redux để tạo tài khoản

    Hiện thực hiển thị Spinner khi đang đăng nhập

    THỜI LƯỢNG
    3 giờ
  • 19

    Vấn đề tái sử dụng code

    Tái sử dụng Employee Form

    Create vs Edit Form

    Cách thức tái sử dụng forms

    Khởi tạo form từ state

    Cập nhật Firebase records

    Modal component

    Employee delete

    THỜI LƯỢNG
    3 giờ
  • 20

    Hiện thực web front-end - I

    Hiện thực các tính năng front-end theo hướng dẫn.

    THỜI LƯỢNG
    3 giờ
  • 21

    Hiện thực web front-end - II

    Gắn các thành phần giao tiếp back-end và front-end.

    THỜI LƯỢNG
    3 giờ
  • 22

    Triển khai ứng dụng

    Thêm launcher icon

    Thêm splash screen

    Cấu hình và build ứng dụng lên từng nền tảng tương ứng

    Upload ứng dụng lên Google Play

    Upload ứng dụng lên AppStore

    THỜI LƯỢNG
    3 giờ
Lịch khai giảng
Tháng 05
06
Thứ 2 - Thứ 4
18h - 21h
Không tìm được giờ học phù hợp?
Gọi 028.36205514 hoặc Inbox.
Xem thêm các chính sách
ƯU ĐÃI VÀ KHUYẾN MÃI HỌC PHÍ
Cá nhân & công ty có nhu cầu vui lòng gọi
028.36205514
Nghề lập trình Web Front-end chưa bao giờ mất "hot", vẫn phát triển mạnh và là nhu cầu của nhiều doanh nghiệp. Vậy lập trình web front end là gì? Cần học những gì để có thể phát triển ngành nghề này?
Xem thêm
Định luật Atwood khẳng định rằng "Bất cứ app nào có thể viết bằng JavaScript thì đều sẽ viết bằng JavaScript" và câu thần chú này đã luôn tồn tại và không hề thay đổi qua năm tháng.
Xem thêm
ĐÓNG
ĐĂNG KÝ
ĐỐI TÁC
©STDIO, 2013-2019