0

Khóa học Web Front-end development (160h)

  • Ngày bắt đầu: 24 tháng 11
  • Thứ 3, 5, 7: 19:00 - 21:30
  • ShareSpace 92 Nguyễn Công Trứ, Q1

Đăng ký thông tin để nhận giáo trình học Front end


Khóa học Web Front-end development (160h)

17,000,000 VNĐ

  • Tại sao học Web front-end?

    Học front-end giúp hiểu rõ cách hoạt động của hệ thống web Nordic Coder

    Kiến thức và kĩ năng

    Khóa học cung cấp các kiến thức thực tế và kỹ năng cần thiết cho một lập trình viên Web Front-end. Giúp học viên tự lập trình và hiểu rõ từng dòng code để tạo website responsive bằng HTML5 và CSS3 cơ bản và nâng cao. Hiểu sâu và lập trình Javascript (ES6) một cách thuần thục. Hiểu rõ thư viện ReactJS  và sử dụng thành thạo thư viện này để lấy dữ liệu phía Back-end, sau đó xử lý hiển thị và các tương tác phía Front-end.

    Khóa học front end xây dựng được một trang web responsive Nordic Coder

    Sản phẩm cuối khóa

    Với dữ liệu và API phía Back-End cho sẵn, tự code để xây dựng được một trang web responsive như trang ẩm thực hoặc trang thương mại điện tử. Với đầy đủ các tính năng.

    Định hướng nghề nghiệp sau khóa học lập trình front end Nordic Coder

    Định hướng nghề nghiệp

    Sau khóa học lập trình front end, học viên sẽ được trang bị kiến thức nền tảng để trở thành lập trình viên web Front-End.

    Những lợi ích dành cho học viên
    2 buổi học SEO offline

    160 giờ học + support online

    Thực hành xây dựng các ứng dụng bắt kịp xu thế công nghệ & sử dụng những công cụ được dùng trong dự án thực tế như Confluence, Jira, Slack.

    Đội ngũ giảng viên hàng đầu

    Giảng viên là các chuyên gia có nhiều kinh nghiệm trong thiết kế và phát triển ứng dụng web

    Mở rộng networking trong ngành thiết kế UX

    Mở rộng networking và các lợi ích khác

    Tham gia các sự kiện networking, workshop dành riêng cho cựu học viên và nhận học bổng cho các khóa học lập trình tiếp theo.

    Hỗ trợ học phí

    Học viên được hỗ trợ chia nhỏ học phí và đóng theo từng đợt áp dụng cho mọi hình thức thanh toán.

  • HTML5 & CSS3 cơ bản

      • Hướng dẫn cài đặt và sử dụng công cụ, môi trường cần thiết cho khóa học (VSCode)
      • Giới thiệu các khái niệm cơ bản: Web Server (Hosting, Domain), Web client (Browser)
      • Cấu trúc thẻ cơ bản của một trang web.
      • Các thẻ thông dụng: heading (h1 h6), p, div, pre, span, strong,…
      • Đường dẫn: absolute vs relative path
      • Tạo liên kết với thẻ <a>, hình ảnh với thẻ <img>
      • Thực hành: Tạo trang web hồ sơ cá nhân và dùng công cụ surge để đưa lên Internet
      • Các thẻ tạo table
      • Lý thuyết về ảnh, audio, video
      • Nhúng đa phương tiện với thẻ <audio>, <video>, <embed>,<iframe>
      • Lab:
        • Bổ sung vào trang hồ sơ cá nhân bài hát/video thích xem nhất
        • Nhúng bản đồ địa chỉ nhà vào trang hồ sơ cá nhân.
      • Ba cách chèn CSS cơ bản vào trang HTML
      • Selector: tag, class, id, combinator, pseudo
      • Box Model: border, margin, padding, width, height, box-sizing
      • Các thuộc tính về: background, text
      • Xây dựng layout website với thuộc tính float/clear, overflow
      • Lab: Thực hành xây dựng layout cho trang web theo 1 hình mẫu cho trước
      • Flex Container và Flex Items
      • Các thuộc tính: flow, wrap, justify-content, align items, flex-basis
      • Thực hành qua game: flexbox froggy
      • Lab: Dùng Flexbox xây dựng trang web theo 1 hình mẫu cho trước.
      • Tạo danh sách nhiều cấp với thẻ ul, ol
      • Các loại position (static, relative, fixed, absolute, sticky)
      • Các thuộc tính: left, top, right, bottom, z-index,…
      • Tạo hiệu ứng với các thuộc tính: Transform, Transition, animation
      • Lab:
        • Tạo menu nhiều cấp (multi-level menu)
        • Tạo hộp thoại ChatBox cố định
        • Tạo các hiệu ứng đẹp mắt cho những trang đã làm được
      • Sử dụng media query để tạo tính năng responsive cho website.
      • Thực hành tạo web responsive theo hai kiểu (desktop first and mobile first)
      • Responsive images (picture and image’s srset)
      • Responsive videos
      • Sử dụng Framework Bootstrap để tạo website responsive
      • Lab: Tạo lại các trang web bằng Framework Bootstrap: home (Trang chủ), listing (danh sách sản phẩm), detail (chi tiết sản phẩm)
      • Thẻ form và các thuộc tính thông dụng.
      • Thẻ input, select/option, textarea
      • Các loại input mới và thẻ mới được bổ sung trong HTML5
      • Kiểm tra dữ liệu trên form bằng các thuộc tính mới của HTML5
      • Lab: Kết hợp Bootstrap và Form để tạo các trang: register (Đăng ký), login (Đăng nhập), contact (Liên hệ)
      • Thẻ @font-face
      • Giới thiệu Google fonts
      • Giới thiệu font Font Awesome.
      • Lab: Hoàn thiện các trang: home, listing, detail, about, contact, register, login
      • Tiếp tục hoàn thiện các trang: home, listing, detail, about, contact, register, login
      • Thêm các hiệu ứng để tăng hiệu quả trang web.
      • Tối ưu SEO
      • Hướng dẫn đưa project lên Github
      • Thuyết trình project

    Javascript cơ bản

      • Giới thiệu hệ thống kiểm soát phiên bản Git
      • Sử dụng công cụ Git (GUI – Giao diện đồ họa)
      • Git phân nhánh và hợp nhất nhánh
      • Giải quyết xung đột hợp nhất với VSCode
      • Giới thiệu Gitlab
      • Gitlab: giao diện, quản lý nhóm, quản lý dự án, cài đặt
      • Lab: Tạo tài khoản mới trên Gitlab.com và thực hành các thao tác Git
      • Cài đặt công cụ và thiết lập môi trường (NodeJS)
      • Kiểu dữ liệu, biến, hằng, toán tử biểu thức
      • Cấu trúc rẽ nhánh
      • Lab: Làm các bài thực hành
      • Kiểu dữ liệu mảng
      • Cấu trúc lặp cho mảng
      • Lab: Làm các bài thực hành về lệnh lặp và mảng
      • Hàm và tham số cho hàm (tham trị, tham chiếu)
      • Lab: Làm các bài thực hành vềcác lệnh đã học trên các hệ thống chấm lập trình tự động: Hackerrank,…
    • Lab: Làm các bài thực hành vềcác lệnh đã học trên các hệ thống chấm lập trình tự động: Hackerrank,…

    • Lab: Làm các bài thực hành vềcác lệnh đã học trên các hệ thống chấm lập trình tự động: Hackerrank,…

      • Giới thiệu DOM
      • DOM và tương tác bằng JS thuần
        • Tìm kiếm một phần tử DOM
        • Thêm, sửa, xóa phần tử DOM

      Lab: Minigame (Card – matching, Tic-Tac-Toe)

      • Tìm hiểu sâu hơn về Event flow trong JS
      • Giới thiệu JQuery
      • Tương tác với DOM bằng JQuery

      Lab: Minigame (Card – matching, Tic-Tac-Toe)

      • Giới thiệu JSON và thao tác với JSON
      • Giới thiệu REST và API RESTful
      • Lấy dữ liệu thông qua API phía Back-End (AJAX, fetch) và xử lý phía Front-End
      • Lab: xây dựng trang tab Chrome mới hiển thị dự báo thời tiết và một số ảnh nền ngẫu nhiên từ Unsplash
    • Với Data API phía Back-end cho trước, lập trình JS lấy dữ liệu và xử lý hiện thị phía Front-end. Gồm các thao tác cơ bản: Thêm, xem, sửa, xóa (CRUD)

      • Bất đồng bộ với Promise
      • Template strings
      • Arrow functions
      • Rest parameters
      • Spread operator
      • Cookie and Local storage
      • OOP
      • Lab: Cập nhật các chức năng của các bài đã làm sang nhưng đăc tính mới.

    ReactJS cơ bản

      • Giới thiệu ReactJS
      • Cài đặt công cụ và thiết lập môi trường
      • Tạo ứng dụng Hello world đầu tiên
      • Tạo components cơ bản

      Lab: Xây dựng giao diện cho trang Home, Category, Detail

      • Components lồng nhau
      • Hiểu rõ về State và Lifecycle
      • Tạo và thay đổi State trong component
      • Xử lý sự kiện trong React

      Lab: Xây dựng chức năng cho trang Category (filter, sort)

      • Giới thiệu React Hook

      Lab: Xây dựng và hoàn thiện chức năng cho các trang Home, Category, Detail

      • Giới thiệu React Router
      • Sử dụng HOC
      • Lazy-loading với React Router
      • React Form
      • Auth workflow

      Lab: Áp dụng React Router và hoàn thiện trang Home, Category, Detail. Xây dựng Form và chức năng Login/Logout, Register

      • Giới thiệu Redux
      • Ba quy tắc chính của Redux
      • Redux Data Flow

      Lab: Ứng dụng Redux cho các trang Home, Category, Detail, Login, Register, Cart.

      • Middleware Redux
      • Redux-thunk

      Lab: Ứng dụng Redux cho các trang Home, Category, Detail, Login, Register, Cart.

      • Lập trình bất đồng bộ với JS
      • Gọi Rest API
      • Xử lý PWA
      • Tích hợp gọi API để lấy dữ liệu và đưa vào trang web.

      Lab: Hoàn thiện đồ án cuối khóa: Trang Home, Category Detail

      • Giới thiệu Jest
      • Các bộ so khớp (assert functions)
      • Cài đặt và thực thi các test case
      • React Component snapshot testing với Jest
      • Lab: Tạo unit tests để test các đối tượng: hàm, redux actions, reducers, và component snapshots
      • Phương pháp Agile/Scrum
      • Lab: Hoàn thiện đồ án cuối khóa: Trang Home, Category Detail, Login, Register, Cart, Checkout, Manage orders,…
      • Soft skills: Problem solving, Team work, Communication
      • Lab: Hoàn thiện đồ án cuối khóa: Trang Home, Category Detail, Login, Register, Cart, Checkout, Manage orders,…
      • Customizing create-react-app
      • create-react-app eject
      • Hướng dẫn Gitlab CI/CD:
        • Building React.js app in Gitlab CI/CD
      • Triển khai ứng dụng trên Netlify.com
      • Báo cáo đồ án
      • Hướng dẫn hoàn thiện CV và Phỏng vấn thử
  • Giảng viên
  • Đánh giá
    Leave Your Review

    Bạn đang nhận xét và đánh giá cho khóa học "Khóa học Web Front-end development (160h)"

  • Hỏi đáp
      • Hiểu rõ cách hoạt động của hệ thống web
      • Tự viết và hiểu rõ từng dòng code để tạo cấu trúc và định dạng trang web bằng HTML và CSS cơ bản.
      • Tự code HTML, CSS để tạo được multi-level menu và các trang web responsive.
      • Sử dụng CSS framework Bootstrap để tạo nhanh các trang web responsive
      • Nắm rõ ngôn ngữ lập trình JS, dùng JS tương tác với DOM.
      • Sử dụng thư viện ReactJS lấy dữ liệu phía Back-end và xử lý hiện thị phía Front-end.
      • Biết được kiến thức nền tảng để trở thành lập trình viên web Front-end.
      • Học front end qua những dự án thực tế và các kĩ năng IT thực tiễn với các chuyên gia hàng đầu trong ngành
      • Đánh giá năng lực và mức độ phù hợp của học viên để đảm bảo sự thành công của khóa học
      • Cơ hội được tham gia vào mạng lưới cựu học viên với các lợi ích như: học bổng cho các khóa học tiếp theo, vé tham gia các sự kiện workshop và networking.
    • Khóa học front end developer không yêu cầu bất cứ một điều kiện tiên quyết nào.