Lập trình Web

Tổng quan lộ trình

💡 Lộ trình Lập trình Web ở MindX tập trung cung cấp các kiến thức nền tảng căn bản cho học viên, và chú trọng và việc thực hành làm sản phẩm và ứng dụng vào giải quyết vấn đề thay vì lý thuyết. Chương trình đào tạo sát với nhu cầu thực tế của doanh nghiệp, được cập nhật liên tục theo xu hướng mới nhất của thế giới và cá nhân hóa lộ trình cho từng học viên thông qua phần mềm quản lý hiện đại. Học sinh sẽ được học và thành thạo ở mức cơ bản một trong các ngôn ngữ thông dụng nhất: JavaScript. Các kiến thức được dạy sẽ là các kiến thức thực tế nhất để có thể áp dụng được NGAY, bằng phương pháp truyền đạt dễ nhớ chứ không dàn trải, lý thuyết. Sản phẩm của các bạn có tính cá nhân hóa người dùng như ứng dụng Web information, ecommerce mua sắm sản phẩm và đặt hàng, LMS hệ thống quản lý học tập,...

Level

3 LEVEL: BASIC - ADVANCED - INTENSIVE

TỔNG SỐ BUỔI HỌC CỦA LỘ TRÌNH

📖 42 BUỔI HỌC

Tương ứng: 14 BUỔI HỌC / 1 KHÓA

TỔNG SỐ GIỜ HỌC

84 GIỜ HỌC

Tương ứng: 2 GIỜ/BUỔI

TỔNG SỐ HỌC VIÊN

Số học viên: 7 - 15 bạn

Mục tiêu lộ trình

Khơi dậy đam mê

Cơ hội trải nghiệm giúp học sinh nhận thức và khám phá bản thân, từ đó có thể tự định hướng về khả năng của mình và tự định hướng trong lĩnh vực lập trình

Tương tác người và máy

Khóa học cung cấp các kiến thức cơ bản về HTML, CSS và JavaScript, giúp hệ thống hóa giao diện, tính năng và kiểm thử trang web về mặt vận hành thực tế.

Kỹ năng mềm

Học sinh tự tin giao tiếp, thuyết trình trước đám đông. Tích cực, hoà đồng và có trách nhiệm.

Tạo ra sản phẩm

Học sinh hiểu được cách lập trình một trang web và tự lập trình được một trang web theo ý tưởng của mình, giúp giải quyết một vấn đề thực tế.

Ai phù hợp với khóa học này?

• Điều kiện tiên quyết để bạn có thể thành công đó chính và sự quyết tâm và niềm đam mê. Học lập trình không phải là một việc dễ dàng, nó đòi hỏi rất nhiều công sức và sự thực hành để có thể thành thạo.

• Độ tuổi: 14 - 17 tuổi

• Lộ trình Web dành cho tất cả các bạn đang là học sinh Trung học, có định hướng về ngành Công nghệ thông tin (CNTT) hoặc Khoa học máy tính (KHMT) sau khi vào Đại học hay là muốn tìm hiểu và bổ sung thêm kiến thức. Lộ trình nằm trong "Chuỗi lộ trình 3 năm dành cho học sinh Trung học".

Hình thức học tập

Mô hình học tập và phương pháp giảng dạy của MindX vô cùng đổi mới và sáng tạo nhưng vẫn giữ lại những ưu điểm to lớn của mô hình học tập truyền thống dựa theo hai yếu tố chính: project-driven, mentor sessions (Mentorship).

Projects

Tại MindX, học sinh sẽ được học tập và tiếp thu kiến thức bằng việc thực hành dựa trên các dự án, bài tập mẫu vô cùng dễ hiểu và trực quan, giúp học sinh dễ dàng tiếp cận và thực sự hiểu vấn đề, tránh nhắc tới những khái niệm lập trình khô khan và khó hiểu bằng cách trực quan hoá thông qua dự án mẫu.

Mentorship

Những buổi học tại trung tâm, học sinh nhận được sự hỗ trợ nhiệt tình, cẩn thận và tỉ mì từ chính giảng viên lớp học. Ngoài ra, tính kết nối còn nhân lên thông qua các kênh giao tiếp (group trao đổi, group chat) giúp học sinh và giảng viên dễ dàng trao đổi và nắm bắt tình hình học tập, cải thiện kiến thức.

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

Nội dung lộ trình

JS Basic

Học sinh có khả năng xây dựng các website theo sở thích, từ một trang bán sản phẩm tới một trang mạng xã hội

Mục tiêu khóa học

✓ Giúp học sinh hiểu và sử dụng được các ngôn ngữ (HTML/CSS) ở mức độ cơ bản, từ đó có khả năng làm nền tảng để học các ngôn ngữ khác sau này.

✓ Học về ngôn ngữ lập trình Javascript - ngôn ngữ lập trình web phổ biến nhất trên thế giới được các công ty lớn như Facebook, Google sử dụng

✓ Giúp học sinh nhận thức/ khám phá bản thân từ đó giúp học sinh định hướng phát triển.

✓ Tạo môi trường học về cách cư xử, giao tiếp, ứng xử,... và các kỹ năng mềm khác.

✓ Rèn luyện kỹ năng tự đọc và tìm kiếm trong lĩnh vực lập trình.

Chất lượng khoá học

• Khá

  • Học sinh biết áp dụng kiến thức của mình để hoàn thiện một trang web từ hình ảnh đến âm thanh, video và các nội dung đính kèm với mức độ hoàn thiện 50% - 70% so với ý tưởng ban đầu của mình.

  • Học sinh nhận biết được các vấn đề đang gặp phải trong quá trình làm trang web của mình và giải quyết các vấn đề đó dưới sự hướng dẫn của giảng viên.

  • Học sinh trình bày và lên ý tưởng cho trang web của mình.

• Tốt

  • Học sinh biết áp dụng kiến thức của mình để hoàn thiện một trang web từ hình ảnh đến âm thanh, video và các nội dung đính kèm với mức độ hoàn thiện 70% - 90% so với ý tưởng ban đầu của mình.

  • Học sinh có thể tự sáng tạo thêm các tính năng, giao diện thú vị hơn cho trang web của mình, và áp dụng kiến thức đã học để làm các tính năng đó dưới sự hướng dẫn của giảng viên.

  • Học sinh có khả năng trình bày ý tưởng và giới thiệu về trang web của mình cho mọi người một cách rõ ràng, đầy đủ.

• Xuất sắc

  • Học sinh biết áp dụng kiến thức của mình để hoàn thiện một trang web từ hình ảnh đến âm thanh, video và các nội dung đính kèm với mức độ hoàn thiện trên 90% so với ý tưởng ban đầu của mình. (Trang web không có lỗi nghiêm trọng và có đầy đủ các ý tưởng như đã trình bày với giảng viên).

  • Học sinh có khả năng tự tìm kiếm câu trả lời cho các vấn đề, các tính năng mới, các trang con chi tiết mới và các lỗi trong quá trình tự làm trang web của mình. Ngoài ra học sinh biết tự tìm tòi các kiến thức mới, các thư viện mới để áp dụng vào trang web của mình.

  • Học sinh có kỹ năng thuyết trình tốt (tự tin, cách nói, cách diễn đạt, dáng đứng, cách di chuyển và đặc biệt là có khả năng tự làm slide khi thuyết trình).

JS Advanced

Học cách quản lý và phát triển dự án như một lập trình viên thực thụ

Mục tiêu khóa học

✓ Học về ngôn ngữ lập trình Javascript - ngôn ngữ lập trình web phổ biến nhất trên thế giới được các công ty lớn như Facebook, Google, … sử dụng

✓ Tái sử dụng và cải thiện hiệu năng với các kiến thức Javascript nâng cao

✓ Học về kiến thức thuật toán cơ bản

✓ Kiến thức về đồng bộ và bất đồng bộ, hiển thị dữ liệu thật lên trang web

✓ Tiết kiệm thời gian và tận dụng những nền tảng thư viện nổi tiếng cho thiết kế ứng dụng web như Bootstrap, Ant design, Sweetalert2,...

✓ Thiết kế ứng dụng web theo xu hướng Mobile-first, responsive design.

Chất lượng khoá học

• Sau khóa học, học viên có thể xây dựng được những trang web cho phép người dùng làm được nhiều thứ hơn thay vì vào xem được, ở mức độ tương tác như cho phép đăng ký, đăng nhập, nhấn like hay ****thêm sản phẩm vào giỏ hàng với trang thương mại điện tử, bình luận về sản phẩm, trang web kiểm tra kiến thức bằng bộ câu hỏi trắc nghiệm, cho phép điền thông tin và hiển thị kết quả sau bài test

• Học viên được kết hợp làm việc độc lập và cả làm việc theo nhóm để đảm bảo được trau dồi cả về lập trình lẫn kỹ năng mềm. Sau khóa học, học viên sẽ tham gia buổi thuyết trình sản phẩm và thể hiện được điểm mạnh của bản thân, qua đó tìm được thế mạnh của mình để phát huy và điểm chưa tốt cần cải thiện.

JS Intensive

Tự xây dựng ứng dụng web chia sẻ thông tin, tăng tính tương tác giữa các người dùng

Mục tiêu khóa học

✓ Học sinh được học và làm quen với tư duy sử dụng cloud - xu hướng công nghệ thế kỷ 21, hiểu được hệ sinh thái cloud của Google. Biết cách sử dụng các dịch vụ điện toán đám mây (Cloud Services) trong việc xử lý các vấn đề về công nghệ

✓ Học viên biết cách chuyển giao sang code base mới với các kiến thức được học để tăng tính hiệu quả.

✓ Học sinh hiểu và biết cách làm việc với Cơ sở dữ liệu (Data Base)

✓ Học sinh có đủ kiến thức để làm ra sản phẩm web production, có khả năng tạo ra một mạng xã hội thu nhỏ của riêng mình giống Facbook, Lotus

Chất lượng khoá học

• Sau khóa học, học viên có thể xây dựng được ứng dụng web mang tính hệ thống, từ quản trị và quản lý người dùng, thông tin khách hàng, sản phẩm, hướng đến phục vụ nhu cầu mục đích rõ ràng hơn của người dùng. Sản phẩm sau khóa học có thể được người dùng sử dụng mọi lúc, mọi nơi, ở bất kỳ đâu có thể kết nối internet. Một số sản phẩm tiêu biểu như Ứng dụng web Chat, mạng xã hội Chia sẻ ảnh, Xếp hạng đánh giá Nhà hàng Khách sạn, Đặt vé xem phim, Review Phim ảnh,...

• Học viên được kết hợp làm việc độc lập và cả làm việc theo nhóm để đảm bảo được trau dồi cả về lập trình lẫn kỹ năng mềm. Sau khóa học, học viên sẽ tham gia buổi thuyết trình sản phẩm và thể hiện được điểm mạnh của bản thân, qua đó tìm được thế mạnh của mình để phát huy và điểm chưa tốt cần cải thiện.

Nội dung khóa học

Basic

Buổi học	Nội dung	Hình thức học tập
Buổi 1	Tổng quan về HTML/ CSS và cú pháp đi kèm • Tìm hiểu về khái niệm lập trình và lập trình dạng thẻ (Tag). • Comment trong HTML/ CSS • Thẻ HTML thông dụng. • Các thuộc tính CSS cơ bản. • Xây dựng trang profile online.	Học tại lớp
Buổi 2	Box model trong CSS, CSS Layout • Giới thiệu về CSS - Layout: display: Tính chất thẻ inline, block, inline-block. • Giới thiệu độ ưu tiên CSS. • Giới thiệu CSS Selector. • Giới thiệu CSS Box model. • Giới thiệu về các thẻ danh sách ul, ol, li. • Giới thiệu dự án website Xnews (web tin tức). • Xây dựng thanh navbar và phần header dự án.	Học tại lớp
Buổi 3	Flexbox & Devtools • Nested Tag và Devtools. • Khái niệm và các thuộc tính cơ bản flexbox. • Giới thiệu về CSS position. • Thực hành xây dựng website layout với Flexbox. • Xây dựng body (P1).	Học tại lớp
Buổi 4	Ôn tập FlexboX & CSS Position • Giới thiệu về CSS Position. • Thực hành các thuộc tính nâng cao với flexbox. • Xây dựng body (P2).	Học tại lớp
Buổi 5	Workshop kỹ năng • Giới thiệu về git/github. • Thực hành tạo repository. • Thực hành thao tác với các câu lệnh cơ bản của github. • Đồng bộ hóa code. • Sơ lược về deploy website. • Kiểm tra checkpoint 1.	Học tại lớp
Buổi 6	Form UI & News article page • Giới thiệu về form và các thẻ cơ bản. • Giới thiệu về form và các thẻ cơ bản. • Xây dựng form feedback cho trang web. • Xây dựng news article(trang con chi tiết) một bài báo.	Học tại lớp
Buổi 7	Responsive • Giới thiệu về Responsive web. • Thực hành responsive navbar. • Hoàn thiện trang con. • Xây dựng footer.	Học tại lớp
Buổi 8	Pakage Xnews Website • Thực hành responsive homepage. • Đóng gói dự án web tin tức. • Thực hành Deploy dự án lên github page. • Thực hành lên ý tưởng sản phẩm cuối khóa.	Học tại lớp
Buổi 9	Hoàn thiện ý tưởng và định hướng sản phẩm • Overview về buổi demo cuối khóa. • Hướng dẫn học sinh hoàn thiện ý tưởng cuối khóa. • Phân tích, đánh giá từng sản phẩm ◦ Ưu, nhược điểm . ◦ Độ khả thi . ◦ Những điểm cần sửa đổi. • Gợi ý, đề xuất một số công nghệ, phần mềm để hỗ trợ trong quá trình làm sản phẩm. • Hướng dẫn học sinh cách research, tham khảo thêm về các bố cục giao diện trang web phù hợp. • Xây dựng timeline dự án cuối khóa từng bạn. • Kiểm tra checkpoint 2.	Học tại lớp
	Thực hành hoàn thiện sản phẩm cuối khoá • Tìm kiếm hình ảnh, thiết kế hình ảnh • Tìm kiếm âm thanh, video tương ứng cho dự án • Xây dựng khung giao diện trang chủ dự án	Tự thực hành tại nhà
Buổi 10 Buổi 11 Buổi 12	Thực hành làm dự án cuối khóa • Xây dựng và hoàn thiện dự án cuối khóa dựa trên timeline với sự hỗ trợ từ giảng viên . • Xây dựng trước khung slide thuyết trình dự án.	Học tại lớp
Buổi 13	Nghiệm thu sản phẩm • Thiết kế slide thuyết trình sản phẩm. • Thuyết trình thử sản phẩm. • Góp ý sửa đổi.
Buổi 14	Thuyết trình sản phẩm cuối khoá	Tại lớp

Advanced

Buổi học	Nội dung	Mô tả
Buổi 1	Github và code version control • Ôn tập về công nghệ Git và Github. • Giới thiệu cú pháp nâng cao: Branch, Merge code,.. • Ôn tập lại nội dung về HTML/CSS của khóa học trước. • Giới thiệu về ngôn ngữ lập trình Javascript . • Giới thiệu về biến và câu điều kiện.
Buổi 2	Loop, Array, object and method • Khái niệm Loop, biểu đồ minh họa kiến thức. • Kiểu dữ liệu: Array, Object. • Thực hành C,R,U,D với raw data.	• Học sinh hiểu được khái niệm và tầm quan trọng của vòng lặp trong lập trình web. • Học sinh nắm được khái niệm và cú pháp về hai kiểu dữ liệu là Array và Object. • Học sinh biết cách thao tác C,R,U,D vào bài toán thực tế.
Buổi 3	DOM & thực hành xây dựng thanh search • Giới thiệu về khái niệm DOM • Phân tích dự án e-commerce • Xây dựng giao diện trang chủ (navbar/ banner, ..) • Thực hành lập trình giao diện thanh search	• Học sinh nắm được cú pháp và cách dùng vòng lặp for-in, for-of • Học sinh hiểu được cách hoạt động của thanh search và xây dựng thành công thanh search cho trang web
Buổi 4	Local Storage, giới thiệu dự án ecommerce • Khái niệm lưu trữ dữ liệu cục bộ • Cú pháp lưu trữ và lấy dữ liệu • Xây dựng tính năng search • Giới thiệu dự án ecommerce • Xây dựng giao diện thanh navbar • Xây dựng body e-commerce (p1)	• Học sinh nắm được khái niệm về Open Source và cách áp dụng vào dự án web • Học sinh hiểu về cách lưu trữ cục bộ trên trình duyệt và cách lưu trữ và truy vấn qua file.json • Học sinh áp dụng được cho các bài toán cần truy xuất cơ sở dữ liệu (todolist) • Học sinh làm bài kiểm tra đánh giá học lực, kiến thức đã học (hình thức: trắc nghiệm)
Buổi 5	Lab day: Form validate • Xây dựng giao diện Signin/ signup • Tính năng collect data người dùng đăng ký/ đăng nhập • Xây dựng body e-commerce (p2) • Kiểm tra checkpoint 1	• Học sinh xây dựng trang giỏ hàng đi kèm với giao diện trang đăng ký/ đăng nhập • Học sinh nắm được 1 số CSS trick để làm đẹp hơn cho giao diện của mình
Buổi 6	Ecommerce homepage & Responsive • Giới thiệu về bất đồng bộ trong Javascript • Xây dựng footer e-commerce • Hoàn thành giao diện trang chủ e-commerce • Thực hành responsive website	• Học sinh biết cách xây dựng 1 trang giỏ hàng cơ bản • Học sinh hiểu được khái niệm và cách dùng của Async/Await
Buổi 7	APIs & cart page (p1) • Giới thiệu và thực hành APIs () • Xây dựng tính năng: lọc/ tìm kiếm sản phẩm • Xây dựng giao diện trang giỏ hàng • Xây dựng tính năng trang giỏ hàng	• Học sinh nắm được khái niệm Networking là gì? Nó có tác động gì tới với CNTT hiện tại • Học sinh hiểu được API là gì? API có cần thiết cho web không? • Học sinh biết cách phân tích giao diện từ template mẫu
Buổi 8	Lab day: cart page (p2) • Hoàn thiện trang giỏ hàng • Hoàn thiện tính năng trang web • Kiểm tra • Giao đề bài ý tưởng dự án cuối khóa	• Học sinh biết sử dụng API để xây dựng nên các giao diện phù hợp, tương ứng với API đó • Học sinh hoàn thiện trang web weather app • Học sinh làm bài kiểm tra đánh giá học lực, kiến thức đã học • Học sinh nhận đề bài cho ý tưởng dự án cuối khóa
Buổi 9	Hoàn thiện ý tưởng, xây dựng timeline cho dự án • Chốt ý tưởng dự án cuối khóa với project list • Xây dựng timeline làm dự án theo từng tuần trong bảng project list • Kiểm tra checkpoint 2	• Học sinh chốt ý tưởng dự án cuối khóa và bắt đầu tìm kiếm các material cần thiết cho dự án. • Thực hành làm sản phẩm cuối khóa
Buổi 10 Buổi 11 Buổi 12	Thực hành làm dự án cuối khóa • Tạo ra sản phẩm cuối khóa sau khóa học • Hoàn thiện đóng gói dự án và deploy với github page	• Học sinh thành công đóng gói dự án cuối khóa • Học sinh deploy dự án cuối khóa lên nền tảng github page
Buổi 13	Xây dựng slide và thuyết trình thử • Chuẩn bị cho bài thuyết trình bao gồm ◦ Slide ◦ Dự án cuối khóa	• Học sinh biết cách làm slide dựa trên nhiều nền tảng: slidego, Canva,... • Học sinh rà soát lại các sản phẩm cho buổi thuyết trình gồm: ◦ Slide ◦ Dự án cuối khóa • Hướng dẫn thuyết trình demo sản phẩm • Hướng dẫn trình bày quá trình làm dự án • Thực hành thuyết trình thử sản phẩm (Tổng duyệt)
Buổi 14	Demo và thuyết trình dự án cuối khóa	• Học sinh trình bày sản phẩm của mình trước hội đồng giám khảo, phụ huynh và các bạn học sinh trong lớp

Intensive

Buổi học	Nội dung
Buổi 1	Ôn tập kiến thức về ES6, DOM • Khái niệm sử dụng map(), filter(), find(),.. • Tìm kiếm text trong String như startsWith(), endsWith
Buổi 2	Nguyên tắc cơ bản Interface Design • Giới thiệu về For in, for of • Giới thiệu: map, filter • Thiết kế giao diện dự án MindXLMS
Buổi 3	Giới thiệu nền tảng firebase • Setup firebase • Xây dựng giao diện dự án LMS: trang đăng ký/ đăng nhập • Xác thực người dùng với firebase authentication
Buổi 4	Giới thiệu firebase firestore • Giới thiệu và setup firebase firestore • Thực hành lưu trữ/ truy vấn dữ liệu • Hoàn thành giao diện trang chủ dự án LMS
Buổi 5 ( checkpoint 1)	Hoàn thiện tính năng xác thực người dùng & phân quyền • Xây dựng giao diện trang admin • Trang web có dạng user (guest, admin) • Lập trình tính năng phân quyền user (P1)
Buổi 6	Tính năng CRUD với user Admin • Hoàn thiện tính năng phân quyền • Thực hành truy vấn database update dữ liệu với user admin
Buổi 7	Xây dựng tính năng search • Theo mã lớp • Theo mã học viên, giáo viên. • Update UI theo data thay đổi trong firebase Firestore
Buổi 8	Xây dựng tính năng comment/ chấm điểm • Guest: view only • Admin có quyền chấm điểm/comment
Buổi 9 ( checkpoint 2)	Deploy và hoàn thiện MindXLMS • Đóng gói trang web • Deploy trang web lên nền tảng online • Xây dựng các trang con cần thiết cho dự án cuối khóa
Buổi 10 Buổi 11 Buổi 12	Thực hành hoàn thiện dự án cuối khóa • Thực hành hoàn thiện giao diện và tính năng dự án cuối khóa dựa trên timeline đã đề ra • Xây dựng slide thuyết trình dự án cuối khóa
Buổi 13	Hoàn thiện slide, thuyết trình thử • Chuẩn bị cho bài thuyết trình bao gồm ◦ Slide ◦ Dự án cuối khóa
Buổi 14	Demo và thuyết trình dự án cuối khóa