Khóa học lập trình Front-end cơ bản

Lập trình Front- end là gì?

Frontend của một website là phần tương tác với người dùng, khi người dùng bắt đầu truy cập vào website phần hiển thị đầu tiên chính là bố cục của trang web, tiếp đến là font chữ, màu sắc của các thanh trượt, menu xổ xuống và các hiệu ứng chuyển động khác trên website. Tất cả những điều đó là sự kết hợp hoàn hảo của bộ ba tam tấu HTML - CSS - JavaScript.

Đơn giản hơn bạn có thể hiểu như sau: "Một lập trình viên front-end là người chịu trách nhiệm thiết kế nội thất của ngôi nhà đã được xây dựng bởi một lập trình viên back-end."

Mục Tiêu Khoá Học:

- Đủ khả năng tự thiết kế giao diện của một trang web hoàn chỉnh.

- Sử dụng thành thạo các công nghệ thiết kế giao diện web: HTML 5, CSS3, các CSS Framework & các thư viện JavaScript mới nhất hiện nay.

- Tự tay cắt hoàn chỉnh giao diện web từ file PSD sang HTML + đầy đủ hiệu ứng phức tạp

- Đủ khả năng ứng tuyển vị trí: Lập trình Front-End tại các công ty.

- Tự tin nhận các dự án freelancer cho riêng mình.

- Có khả năng xây dựng các sản phẩm để bán trên các kênh như ThemeForest.

- Tạo ưu thế cho chính bản thân khi bạn xin việc làm lập trình web bất kì ngôn ngữ nào (PHP, .NET, Java, Nodejs)

Đối tượng nên tham gia khóa học
Tất cả mọi người yêu thích lập trình front -end

Đặc biệt là những bạn đang làm nghề thiết kế giao diện front-end bằng các phần mềm thiết kế đồ họa

Điều kiện học: Máy tính/ laptop có cấu hình từ  core i3 ram 4Gb trở lên

NỘI DUNG CHI TIẾT

Bài 1: HTML cơ bản

Phần mềm phục vụ môn học

Các Addon phục vụ môn học

Ngôn ngữ HTML

HTML - Định nghĩa

HTML - Elements và Attributes

HTML - Định dạng văn bản

HTML - Heading và List

HTML – Table

HTML - Tạo link

HTML - Tạo ảnh

HTML - Tích hợp CSS

HTML – Form

 

Bài 2:CSS cơ bản

Cú pháp CSS - các cách viết CSS

selector là gì? Tìm hiểu CSS Selector căn bản

thiết lập màu nền với CSS background

Các thuộc tính CSS định dạng text

Các thuộc tính CSS định dạng thẻ a (links)

Thuộc tính display trong CSS (inline - block -none)

Thuộc tính float ( left - right - none) trong CSS

Thuộc tính margin - padding và Box Model trong CSS

Position relative - absolute trong CSS

Position Fixed trong CSS

Thuộc tính z-index trong CSS

After và Before trong CSS

Kỹ thuật ClearFix trong CSS

Bài 3:CSS2 và CSS3

Học CSS3 - border-radius - bo góc

Học CSS3 - border-image - tạo đường viền bằng hình

Học CSS3 - Các thuộc tính Backgrounds

Học CSS3 - Định dạng màu sắc

Học CSS3 - Gradient Background

Học CSS3 - Text Shadow - Box Shadow

Học CSS3 - Xử lý Text

Học CSS3 - Sử dụng @fonf-face

Học CSS3 - 2D Transforms

Bài 4: Photoshop cơ bản, cắt ghép layout

Giới thiệu photoshop

Các công cụ cơ bản trong photoshop

Sử dụng công cụ crop để cắt các thành phần của file psd thành file ảnh

Sử dụng file ảnh đã cắt được để load đường dẫn vào file html, css

 

 

 

 

 

Bài 5: Photoshop cơ bản, cắt ghép layout (tiếp)

Xây dụng cấu trúc Layout chung

Xây dựng cấu trúc Header

Xây dựng cấu trúc Menu

Xây dựng bố cục menu ngang

Xây dựng cấu trúc Left

Category

Sản phẩm nổi bật

Search box

Thống kê truy cập

 

Bài 6: Javascript cơ bản

Xây dụng cấu trúc Main

Box Slide

Sản phẩm mới

Tin tức mới

Xây dựng cấu trúc Right

Tin nổi bật

Hỗ trợ trực tuyến

Quảng cáo

Check mail

Xây dựng cấu trúc Footer

Bài 7: Javascript

Giới thiệu về Javascript

Nhập môn Javascript

Hằng, biến và các kiểu dữ liệu trong Javascript

Toán tử và biểu thức

Biểu thức điều kiện

Vòng lặp

Hàm trong Javascript

Thực hành

Bài 8: Javascript (tiếp)

Làm việc với dữ liệu kiểu mảng trong Javascript

Sự kiện trong Javascript

Làm việc với đối tượng Form

Đối tượng trong Javascript

Javascript DOM

Thực hành

 

 

Bài 9: JQUERY

Giới thiệu về JQuery

JQuery Basic

JQuery Effects

JQuery HTML

JQuery Traversing

JQuery AJax

JQuery Plugin

Thực hành

 

 

Bài 10: Responsive

Responsive Web Design là gì?

Các vị trí xây dựng Responsive thông dụng

Responsive menu

Responsive Column

Responsive font size

Responsive image

Sử dụng gì để tạo Responsive cho Website?

Sử dụng @media của CSS3

Sử dụng Javascript

Thực hành

Bài 11: Bootstrap

Tổng quan về twitter bootstrap

Download Bootstrap và nhúng Bootstrap vào website

Grid System trong bootstrap

Tìm hiểu cách sử dụng các thành phần trong bootstrap:

Table, Breadcrumbs & Images, Pagination, card & Labels,

Typography, form, button, List group, Button group, Glyphicons,

Navs menu, Navigation, Dropdown menu, Tabs, Helper classes,

Jumbotron, well, progress …

Bài 12: Test kiểm tra phần 1

Kiểm tra kiến thức đã học

Hướng dẫn viết CV ứng tuyển việc làm

 

 

 

 

 

 

HỌC PHÍ: 2.000.000 VNĐ

Ưu đãi khi nhập học theo nhóm/ đăng ký kèm khóa khác:

- Nhóm 2 người trở lên: giảm 300.000vnđ/học viên/khóa

- Đăng ký kèm khóa khác giảm 500.000vnđ/ học viên/khóa

Khóa học liên quan

0985 95 0895