Lập trình Frontend cơ bản
Tự tay dựng giao diện website hoàn chỉnh, chuẩn responsive với HTML, CSS và JavaScript — điểm khởi đầu cho mọi lập trình viên web.
Lộ trình này dành cho
- Người chưa từng lập trình, muốn bắt đầu với làm web
- Sinh viên muốn có nền tảng trước khi học framework
- Designer, marketer muốn tự chỉnh sửa giao diện website
Cần chuẩn bị
- Máy tính cài trình duyệt Chrome và Visual Studio Code
- Biết dùng máy tính cơ bản: tạo thư mục, cài phần mềm
- Không cần biết lập trình trước
Học xong bạn sẽ
- Dựng được trang web tĩnh từ bản thiết kế
- Làm giao diện responsive cho mọi màn hình
- Viết JavaScript xử lý tương tác cơ bản
- Quản lý mã nguồn bằng Git & GitHub
Các bước học
Bước 1: HTML & CSS nền tảng
⏱ 4 - 5 tuầnCấu trúc trang với HTML, định dạng bằng CSS, bố cục với Flexbox/Grid và làm giao diện responsive.
Sau bước này bạn có thể
- Dùng đúng các thẻ HTML ngữ nghĩa: header, nav, main, section, footer
- Định dạng chữ, màu, khoảng cách và hiểu box model
- Dựng bố cục nhiều cột bằng Flexbox và Grid
- Dùng media query để giao diện co giãn theo màn hình
Video hướng dẫn (chọn một để theo)
✍️ Bài tập thực hành
Dựng lại trang chủ của một website bạn thích (phần đầu trang, banner, danh sách sản phẩm, chân trang) và làm cho nó hiển thị tốt trên điện thoại.
Bước 2: JavaScript cơ bản
⏱ 4 - 5 tuầnBiến, hàm, mảng, object, DOM và sự kiện — đủ để làm menu, slider, form kiểm tra dữ liệu.
Sau bước này bạn có thể
- Nắm biến, kiểu dữ liệu, câu điều kiện, vòng lặp và hàm
- Làm việc với mảng và object
- Chọn và thay đổi phần tử trên trang qua DOM
- Bắt sự kiện click, nhập liệu và kiểm tra dữ liệu form
Video hướng dẫn (chọn một để theo)
✍️ Bài tập thực hành
Thêm tương tác cho trang đã dựng ở bước 1: menu thu gọn trên điện thoại, slider ảnh và form liên hệ có kiểm tra dữ liệu trước khi gửi.
Bước 3: Git & GitHub
⏱ 1 tuầnLưu lịch sử thay đổi, làm việc nhóm và đưa dự án lên GitHub.
Sau bước này bạn có thể
- Khởi tạo kho mã nguồn và tạo commit có ý nghĩa
- Tạo nhánh để thử tính năng mà không ảnh hưởng bản chính
- Đẩy mã nguồn lên GitHub và kéo về máy khác
- Đưa trang web lên mạng miễn phí bằng GitHub Pages
Video hướng dẫn (chọn một để theo)
✍️ Bài tập thực hành
Đưa toàn bộ bài thực hành ở hai bước trước lên GitHub và bật GitHub Pages để có đường link gửi cho người khác xem.
Dự án cuối lộ trình
Website giới thiệu cá nhân
Tự thiết kế và dựng một website giới thiệu bản thân gồm nhiều trang, đưa lên mạng và dùng làm sản phẩm đầu tiên trong hồ sơ xin việc.
Yêu cầu tối thiểu
- Tối thiểu 3 trang: giới thiệu, dự án, liên hệ
- Hiển thị tốt trên điện thoại, máy tính bảng và máy tính
- Có ít nhất 2 tương tác bằng JavaScript (menu, form, bộ lọc...)
- Mã nguồn trên GitHub, website chạy trên GitHub Pages
Cách học hiệu quả
- Mỗi bước chỉ cần chọn một video hoặc playlist hợp với bạn và theo đến hết, không cần xem tất cả.
- Vừa xem vừa làm theo từng thao tác trên máy của mình, đừng chỉ xem.
- Hoàn thành bài tập thực hành trước khi sang bước tiếp theo.
- Học đều mỗi ngày một ít hiệu quả hơn dồn nhiều giờ vào cuối tuần.
- Đánh dấu bước đã học xong để theo dõi tiến độ; tiến độ được lưu trên trình duyệt này.
Câu hỏi thường gặp
Tôi chưa biết gì về lập trình thì có theo được không?
Có. Lộ trình bắt đầu từ con số 0. HTML và CSS không đòi hỏi tư duy thuật toán nên rất phù hợp để làm quen trước khi học JavaScript.
Mỗi bước có nhiều video, tôi có phải xem hết không?
Không. Các video trong cùng một bước dạy cùng nội dung theo phong cách khác nhau. Hãy xem thử vài phút mỗi video rồi chọn một cái hợp với bạn để theo đến cuối.
Học xong lộ trình này có đi làm được chưa?
Bạn sẽ đủ khả năng dựng giao diện tĩnh. Để ứng tuyển vị trí frontend, bạn nên học tiếp một framework như React hoặc Vue và làm thêm vài dự án thực tế.
Nên học tiếp gì sau lộ trình này?
Nếu thích giao diện, hãy học sâu JavaScript rồi đến React hoặc Vue. Nếu muốn làm website động hoàn chỉnh, lộ trình Backend với PHP & Laravel là bước tiếp theo tự nhiên.
Video thuộc bản quyền của các kênh YouTube tương ứng, mở trên YouTube khi bấm vào.
