[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-settings":3,"nav-course-tabs":225,"blog-article-lo-trinh-hoc-lap-trinh-web-cho-nguoi-moi":282},{"site":4,"home":19,"footer":172,"payment":214,"promo":221},{"name":5,"tagline":6,"url":7,"logoUrl":8,"primaryColor":9,"contactEmail":10,"hotline":11,"facebookUrl":12,"youtubeUrl":13,"kungfutechUrl":14,"announcement":15},"MelyDemy","Học lập trình thực chiến từ con số 0","https:\u002F\u002Fmelydemy.io.vn","\u002Fimages\u002Fbrand\u002Flogo.svg?v=3","#dc2626","techmely.creation@gmail.com","","https:\u002F\u002Fwww.facebook.com\u002Fmelydemy.techmely\u002F","https:\u002F\u002Fwww.youtube.com\u002Fc\u002FTechMely?sub_confirmation=1","https:\u002F\u002Fkungfutech.io.vn",{"enabled":16,"text":17,"link":18},true,"Ưu đãi Mely 29k — học lập trình trọn đời chỉ từ 29.000đ","\u002Fkhoa-hoc\u002F29k",{"seo":20,"hero":26,"banners":49,"sectionCopy":60,"categories":78,"features":100,"onlyMelyDemy":117,"aboutUs":130,"testimonials":142,"newsletter":167},{"title":21,"description":22,"keywords":23},"MelyDemy - Khoá học lập trình thực chiến dành cho bạn","MelyDemy cung cấp khoá học lập trình Frontend, Backend, DevOps và AI thực chiến bằng tiếng Việt, học trọn đời chỉ từ 29.000đ.",[24,5,25],"Khoá học lập trình","Thực chiến lập trình",{"badge":27,"title":28,"highlight":29,"description":30,"primaryCta":31,"secondaryCta":34,"stats":36},"Nền tảng học lập trình #1 cho người Việt","Học kỹ năng công nghệ","thực chiến, trọn đời","Hơn 40 khoá học Frontend, Backend, DevOps và AI — video bài bản, source code đi kèm, học mọi lúc mọi nơi.",{"label":32,"to":33},"Khám phá khoá học","\u002Fkhoa-hoc",{"label":35,"to":18},"Ưu đãi 29k",[37,40,43,46],{"value":38,"label":39},"40+","Khoá học",{"value":41,"label":42},"15.000+","Học viên",{"value":44,"label":45},"4.8\u002F5","Đánh giá",{"value":47,"label":48},"Trọn đời","Truy cập",[50,56],{"badge":51,"title":52,"description":53,"link":54,"color":55},"Xu hướng 2026","Lộ trình AI thực chiến","Prompt, workflow và tích hợp công cụ — học theo bài lab, áp dụng ngay vào dự án.","\u002Fkhoa-hoc\u002Fai","#7c3aed",{"badge":57,"title":58,"description":59,"link":18,"color":9},"Mely 29k","Học lập trình từ 29.000đ","Video trọn đời, source code đi kèm — bắt đầu Frontend, Backend hoặc DevOps hôm nay.",{"courses":61,"onlyMelyDemy":64,"about":67,"community":70,"blog":74},{"title":62,"subtitle":63},"Khoá học nổi bật","Các khoá học xây dựng bài bản, đáp ứng nhu cầu thực tế của thị trường",{"title":65,"subtitle":66},"Chỉ có tại MelyDemy","Khoá học chất lượng với mức giá dễ tiếp cận nhất",{"title":68,"subtitle":69},"Lộ trình học trên MelyDemy","Ba lộ trình cốt lõi — Full-stack, DevOps và AI — giúp bạn áp dụng ngay vào dự án thực tế.",{"headline":71,"title":72,"subtitle":73},"Được học viên tin tưởng","Học viên nói gì về MelyDemy","Hàng nghìn học viên đã học lập trình thực chiến — từ sinh viên, fresher đến người chuyển ngành.",{"title":75,"subtitle":76,"listPageSubtitle":77},"Blog","Tin tức, kiến thức công nghệ mới nhất từ MelyDemy","Tổng hợp tin tức AI và công nghệ mới nhất — kiến thức thực chiến cho lập trình viên.",[79,84,88,93,97],{"label":80,"to":81,"icon":82,"color":83},"Frontend","\u002Fkhoa-hoc\u002Fkhoa-hoc-frontend","i-lucide-layout-template","#f97316",{"label":85,"to":86,"icon":87,"color":9},"Backend","\u002Fkhoa-hoc\u002Fkhoa-hoc-backend","i-lucide-server",{"label":89,"to":90,"icon":91,"color":92},"DevOps","\u002Fkhoa-hoc\u002Fkhoa-hoc-devops","i-lucide-container","#0ea5e9",{"label":94,"to":54,"icon":95,"color":96},"AI","i-lucide-sparkles","#8b5cf6",{"label":57,"to":18,"icon":98,"color":99},"i-lucide-ticket-percent","#16a34a",[101,105,109,113],{"title":102,"description":103,"icon":104},"Video trọn đời","Mua một lần, học mãi mãi — cập nhật nội dung miễn phí.","i-lucide-infinity",{"title":106,"description":107,"icon":108},"Source code đi kèm","Mỗi bài học đều có code mẫu để bạn thực hành ngay.","i-lucide-code-xml",{"title":110,"description":111,"icon":112},"Tiếng Việt dễ hiểu","Giảng viên giải thích rõ ràng, ví dụ sát dự án thật.","i-lucide-languages",{"title":114,"description":115,"icon":116},"Cộng đồng hỗ trợ","Hỏi đáp nhanh cùng cộng đồng KungFuTech và mentor.","i-lucide-users-round",[118,122,126],{"title":119,"description":120,"image":121},"Giới thiệu chương trình","\u003Cp>Học lập trình với khoá học chất lượng: video bài giảng, source code và quyền truy cập trọn đời.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-1.jpg",{"title":123,"description":124,"image":125},"Học dễ dàng, chi phí thấp","\u003Cp>Khoá học ngắn gọn, thực tế với mức giá chỉ từ 29K. Theo dõi thường xuyên để cập nhật ưu đãi.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-2.jpg",{"title":127,"description":128,"image":129},"Chọn khoá học và bắt đầu","\u003Cp>Khám phá khoá học Frontend, Backend, DevOps, Mobile và AI — bắt đầu hành trình của bạn hôm nay.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-3.jpg",[131,136,139],{"title":132,"description":133,"icon":134,"image":135},"Backend & Frontend","Xây dựng ứng dụng web từ giao diện đến hệ thống phía sau với công nghệ hiện đại.","i-lucide-layers","\u002Fimages\u002Fhome\u002Fabout-track-1.jpg",{"title":89,"description":137,"icon":91,"image":138},"Triển khai, vận hành và tối ưu hệ thống để ứng dụng chạy ổn định, mở rộng dễ dàng.","\u002Fimages\u002Fhome\u002Fabout-track-2.jpg",{"title":94,"description":140,"icon":95,"image":141},"Xây dựng ứng dụng tích hợp AI, tự động hoá workflow và phát triển sản phẩm thông minh.","\u002Fimages\u002Fhome\u002Fabout-track-3.jpg",[143,147,151,155,159,163],{"fullname":144,"role":145,"description":146},"Nguyễn Minh Anh","Sinh viên CNTT — Đại học Bách Khoa TP.HCM","Rất nhiều khoá học bổ ích từ Frontend, Backend đến DevOps — mình chọn lộ trình phù hợp mà không bị lạc. Video và source trọn đời, ôn lại rất tiện.",{"fullname":148,"role":149,"description":150},"Trần Hoàng Nam","Kế toán chuyển ngành IT — Hà Nội","Khoá AI giúp mình hiểu prompt, workflow và cách tích hợp công cụ vào việc học code hằng ngày. Bài ngắn, học buổi tối không bị quá tải.",{"fullname":152,"role":153,"description":154},"Lê Thị Hương","Fresher Frontend — FPT Software Đà Nẵng","Khoá TypeScript làm rõ type, interface và cách refactor code cũ — mình tự tin review PR và làm task trong dự án thật.",{"fullname":156,"role":157,"description":158},"Phạm Quốc Bảo","Kỹ sư cơ khí — tự học lập trình buổi tối","Lộ trình DevOps (CI\u002FCD, Docker) giúp mình hiểu pipeline deploy thay vì chỉ code local. Checklist từng tuần giữ nhịp học ổn định.",{"fullname":160,"role":161,"description":162},"Võ Thanh Tú","Intern Backend — startup tại TP.HCM","Khoá Node.js và thiết kế API giúp mình nắm REST, validation và database qua bài lab thực tế. Slide đính kèm tiện ôn phỏng vấn.",{"fullname":164,"role":165,"description":166},"Đặng Kim Ngân","Designer chuyển sang UI Developer","Khoá HTML\u002FCSS Grid & Flexbox giúp mình chuyển layout Figma sang markup chuẩn, responsive đúng spec.",{"title":168,"description":169,"placeholder":170,"buttonLabel":171},"Nhận tin khoá học & ưu đãi","Đăng ký email để cập nhật lộ trình mới, workshop và chương trình Mely 29k.","Email của bạn","Đăng ký",{"brandLine":173,"description":174,"columns":175},"MELYDEMY — Học lập trình từ con số 0","Nền tảng khoá học lập trình thực chiến thuộc hệ sinh thái KungFuTech.",[176,184,204],{"title":39,"links":177},[178,180,182],{"label":179,"to":33},"Tất cả khoá học",{"label":181,"to":18},"Ưu đãi Mely 29k",{"label":183,"to":54},"Khoá học AI",{"title":185,"links":186},"Tài nguyên",[187,189,192,195,198,201],{"label":75,"to":188},"\u002Fblog",{"label":190,"to":191},"Giới thiệu","\u002Fgioi-thieu",{"label":193,"to":194},"Liên hệ","\u002Flien-he",{"label":196,"to":197},"Câu hỏi thường gặp","\u002Fcau-hoi-thuong-gap",{"label":199,"to":200},"Điều khoản","\u002Fterms-and-conditions",{"label":202,"to":203},"Chính sách bảo mật","\u002Fprivacy-policy",{"title":205,"links":206},"Hệ sinh thái",[207,209,212],{"label":208,"href":14},"KungFuTech",{"label":210,"href":211},"TechMely YouTube","https:\u002F\u002Fwww.youtube.com\u002Fc\u002FTechMely",{"label":213,"href":12},"Facebook MelyDemy",{"bankName":215,"bankCode":216,"accountNumber":217,"accountName":218,"qrTemplate":219,"note":220},"MB Bank","MBBank","0680126400005","PHAM NGOC HOA","https:\u002F\u002Fqr.sepay.vn\u002Fimg?acc={accountNumber}&bank={bankCode}&amount={amount}&des={paymentCode}","Khoá học sẽ được gửi vào email của bạn sau khi thanh toán thành công.",{"promo49k":222},{"enabled":16,"displayPrice":223,"title":57,"description":224},29000,"Học lập trình trọn đời chỉ từ 29.000đ",[226,238,249,260,272],{"id":227,"name":228,"slug":229,"title":24,"canonicalSlug":230,"heroDescription":231,"seoTitle":232,"seoDescription":233,"intro":234},1,"Tất cả các khóa học","tat-ca",null,"Khám phá lộ trình Frontend, Backend, DevOps và AI — học thực chiến với video trọn đời.","Khoá học lập trình online tiếng Việt | MelyDemy","Học lập trình online cùng MelyDemy: khoá Frontend, Backend, DevOps và AI thực chiến bằng tiếng Việt, video xem trọn đời, kèm source code dự án.",[235,236,237],"MelyDemy là nền tảng khoá học lập trình bằng video tiếng Việt, tập trung vào kỹ năng làm được việc: mỗi khoá đi từ kiến thức nền tảng đến dự án thực tế, có source code đi kèm để bạn thực hành theo từng bài.","Danh mục gồm bốn nhóm chính. Frontend dành cho người muốn xây giao diện web với HTML, CSS, JavaScript, ReactJS hay Next.js. Backend dạy lập trình API, cơ sở dữ liệu và kiến trúc hệ thống với nhiều ngôn ngữ và framework. DevOps hướng dẫn Docker, CI\u002FCD, cloud và vận hành hệ thống. Nhóm AI giúp bạn dùng các công cụ và agent AI để tăng năng suất làm việc.","Bạn có thể lọc theo nhóm hoặc tìm theo tên công nghệ. Khoá học được mua một lần và xem lại không giới hạn thời gian, phù hợp cho cả người mới bắt đầu lẫn lập trình viên muốn mở rộng kỹ năng. Nếu chưa biết nên bắt đầu từ đâu, hãy chọn nhóm Frontend hoặc Backend và xem phần nội dung chi tiết của từng khoá để đánh giá độ phù hợp.",{"id":239,"name":85,"slug":240,"title":85,"canonicalSlug":241,"heroDescription":242,"seoTitle":243,"seoDescription":244,"intro":245},2,"khoa-hoc-backend","backend","API, database và kiến trúc hệ thống — từ nền tảng đến dự án thực tế.","Khoá học lập trình Backend online | MelyDemy","Học lập trình Backend bằng tiếng Việt: xây dựng API, làm việc với cơ sở dữ liệu và thiết kế hệ thống qua các khoá video thực chiến tại MelyDemy.",[246,247,248],"Lập trình Backend là phần xử lý đằng sau mọi ứng dụng: nhận yêu cầu từ giao diện, xử lý nghiệp vụ, lưu và truy vấn dữ liệu rồi trả kết quả về cho người dùng. Các khoá Backend tại MelyDemy hướng dẫn bạn xây dựng API, làm việc với cơ sở dữ liệu quan hệ và NoSQL, xác thực người dùng và triển khai ứng dụng.","Mỗi khoá bắt đầu từ nền tảng ngôn ngữ và framework, sau đó đi tới các chủ đề thực tế như thiết kế REST API, tối ưu truy vấn, bảo mật và kiểm thử. Bạn học qua video, làm theo source code và hoàn thành dự án cuối khoá để có sản phẩm đưa vào hồ sơ.","Hãy chọn ngôn ngữ phù hợp với mục tiêu công việc của bạn, xem nội dung từng chương trong trang khoá học rồi bắt đầu học theo tốc độ riêng. Học viên có thể xem lại bài giảng không giới hạn thời gian.",{"id":250,"name":80,"slug":251,"title":80,"canonicalSlug":252,"heroDescription":253,"seoTitle":254,"seoDescription":255,"intro":256},3,"khoa-hoc-frontend","frontend","HTML, CSS, JavaScript và framework hiện đại — xây giao diện responsive chuẩn doanh nghiệp.","Khoá học lập trình Frontend online | MelyDemy","Học Frontend bằng tiếng Việt: HTML, CSS, JavaScript, ReactJS, Next.js và nhiều hơn nữa, xây giao diện responsive qua khoá video thực chiến tại MelyDemy.",[257,258,259],"Lập trình Frontend là kỹ năng xây dựng phần giao diện người dùng nhìn thấy và tương tác trên web. Các khoá Frontend tại MelyDemy đi từ HTML, CSS và JavaScript nền tảng đến các framework hiện đại như ReactJS và Next.js, giúp bạn dựng giao diện responsive đạt chuẩn doanh nghiệp.","Nội dung nhấn mạnh thực hành: bạn xây dựng từng thành phần giao diện, quản lý trạng thái, gọi API, tối ưu hiệu năng và SEO, rồi hoàn thiện một dự án hoàn chỉnh. Source code được cung cấp để bạn đối chiếu và tự chỉnh sửa.","Nếu mới bắt đầu, hãy học chắc JavaScript trước khi chuyển sang framework. Nếu đã có nền tảng, bạn có thể chọn thẳng khoá ReactJS hoặc Next.js. Xem mục nội dung trong từng khoá để biết chính xác bạn sẽ học những gì.",{"id":261,"name":262,"slug":263,"title":262,"canonicalSlug":264,"heroDescription":265,"seoTitle":266,"seoDescription":267,"intro":268},4,"Devops","khoa-hoc-devops","devops","CI\u002FCD, container và vận hành hệ thống — triển khai ổn định, mở rộng dễ dàng.","Khoá học DevOps online tiếng Việt | MelyDemy","Học DevOps bằng tiếng Việt: Docker, CI\u002FCD, cloud và vận hành hệ thống qua các khoá video thực chiến, giúp triển khai ứng dụng ổn định tại MelyDemy.",[269,270,271],"DevOps kết nối phát triển và vận hành: tự động hoá việc build, kiểm thử, triển khai và giám sát để phần mềm được đưa đến người dùng nhanh và ổn định hơn. Các khoá DevOps tại MelyDemy hướng dẫn bạn làm quen với Linux, container, pipeline CI\u002FCD và hạ tầng đám mây.","Bạn sẽ thực hành trực tiếp: đóng gói ứng dụng bằng Docker, thiết lập quy trình tự động triển khai, quản lý cấu hình và theo dõi hệ thống khi chạy thật. Mỗi bài đều đi kèm ví dụ có thể làm lại trên máy hoặc máy chủ của bạn.","Nhóm khoá này phù hợp với lập trình viên muốn tự triển khai sản phẩm của mình, hoặc người muốn chuyển hướng sang vai trò DevOps và cloud. Hãy xem nội dung chi tiết từng khoá để chọn lộ trình phù hợp.",{"id":273,"name":94,"slug":274,"title":94,"canonicalSlug":274,"heroDescription":275,"seoTitle":276,"seoDescription":277,"intro":278},5,"ai","Prompt, workflow và tích hợp công cụ AI — học theo bài lab, áp dụng ngay vào dự án.","Khoá học AI ứng dụng cho lập trình | MelyDemy","Học AI ứng dụng bằng tiếng Việt: prompt, workflow tự động và agent AI qua các bài lab thực hành, áp dụng ngay vào công việc và dự án tại MelyDemy.",[279,280,281],"Các khoá AI tại MelyDemy tập trung vào việc ứng dụng: dùng công cụ AI để viết code nhanh hơn, tự động hoá công việc lặp lại và xây dựng agent hỗ trợ công việc hằng ngày, thay vì chỉ giải thích lý thuyết.","Bạn sẽ học cách viết prompt hiệu quả, thiết kế workflow kết nối nhiều công cụ, tự host agent trên máy chủ riêng và tích hợp AI vào quy trình phát triển phần mềm. Mỗi chủ đề có bài lab để bạn làm theo và áp dụng được ngay.","Nhóm khoá này phù hợp với lập trình viên, người làm nội dung và bất kỳ ai muốn tăng năng suất bằng AI. Hãy xem phần nội dung từng khoá để biết công cụ và kết quả bạn sẽ đạt được.",{"id":283,"slug":284,"title":285,"excerpt":286,"createdAt":287,"updatedAt":287,"category":288,"thumbnail":290,"content":291,"head":292,"author":298,"image":301,"same_category":302,"sameCategory":351},"767ee37c-25c9-4ec0-8ad7-5c308c84258f","lo-trinh-hoc-lap-trinh-web-cho-nguoi-moi","Lộ trình học lập trình web cho người mới từ A-Z","Lộ trình học lập trình web cho người mới: HTML, CSS, JavaScript, React, backend, Git và deploy, kèm thời gian và dự án gợi ý cho từng giai đoạn.","2026-11-03T14:59:50",{"name":75,"slug":289,"description":11},"blog",{"url":11,"alt":285},"\u003Cp>\u003Cstrong>Lộ trình học lập trình web cho người mới\u003C\u002Fstrong> thường đi theo thứ tự: HTML và CSS để dựng giao diện, JavaScript để thêm tương tác, Git để quản lý mã nguồn, một framework như React, rồi đến backend, cơ sở dữ liệu và cuối cùng là deploy. Bài viết này chia lộ trình thành 6 giai đoạn rõ ràng, kèm mục tiêu, dự án gợi ý và những sai lầm nên tránh để bạn không bị “ngợp” khi mới bắt đầu.\u003C\u002Fp>\n\n\u003Ch2>Lập trình web gồm những phần nào?\u003C\u002Fh2>\n\u003Cp>Trước khi chọn học gì, bạn nên hiểu một trang web hiện đại được ghép từ ba lớp chính:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Frontend\u003C\u002Fstrong>: phần người dùng nhìn thấy và tương tác trên trình duyệt (nút bấm, form, bố cục, hiệu ứng).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Backend\u003C\u002Fstrong>: phần chạy trên máy chủ, xử lý logic, xác thực người dùng, gọi API và đọc ghi dữ liệu.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Database và hạ tầng\u003C\u002Fstrong>: nơi lưu dữ liệu (MySQL, PostgreSQL, MongoDB…) và môi trường chạy ứng dụng (server, container, cloud).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Người làm được cả hai phía thường được gọi là Fullstack Developer. Tuy vậy, với người mới, cách hiệu quả nhất là đi sâu một phía trước (thường là frontend vì dễ thấy kết quả), sau đó mới mở rộng.\u003C\u002Fp>\n\n\u003Ch2>Tổng quan lộ trình 6 giai đoạn\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Giai đoạn\u003C\u002Fth>\u003Cth>Nội dung chính\u003C\u002Fth>\u003Cth>Thời gian tham khảo*\u003C\u002Fth>\u003Cth>Dự án gợi ý\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>1. HTML, CSS\u003C\u002Ftd>\u003Ctd>Thẻ HTML, Flexbox, Grid, responsive\u003C\u002Ftd>\u003Ctd>4–6 tuần\u003C\u002Ftd>\u003Ctd>Trang giới thiệu cá nhân, landing page\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>2. JavaScript\u003C\u002Ftd>\u003Ctd>Biến, hàm, mảng, object, DOM, sự kiện, async\u002Ffetch\u003C\u002Ftd>\u003Ctd>6–10 tuần\u003C\u002Ftd>\u003Ctd>Todo app, ứng dụng thời tiết gọi API\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>3. Git, GitHub\u003C\u002Ftd>\u003Ctd>commit, branch, merge, pull request\u003C\u002Ftd>\u003Ctd>1–2 tuần (học song song)\u003C\u002Ftd>\u003Ctd>Đưa mọi dự án lên GitHub\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>4. React \u002F Next.js\u003C\u002Ftd>\u003Ctd>Component, props, state, hooks, routing\u003C\u002Ftd>\u003Ctd>6–8 tuần\u003C\u002Ftd>\u003Ctd>Trang bán hàng mini, dashboard\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>5. Backend, database\u003C\u002Ftd>\u003Ctd>Node.js\u002FExpress, REST API, SQL, xác thực\u003C\u002Ftd>\u003Ctd>8–12 tuần\u003C\u002Ftd>\u003Ctd>API blog có đăng nhập\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>6. Deploy\u003C\u002Ftd>\u003Ctd>Hosting, domain, biến môi trường, Docker cơ bản\u003C\u002Ftd>\u003Ctd>2–3 tuần\u003C\u002Ftd>\u003Ctd>Đưa sản phẩm fullstack lên internet\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>\u003Cem>*Thời gian chỉ mang tính tham khảo cho người học khoảng 1–2 giờ mỗi ngày; tốc độ thực tế phụ thuộc vào nền tảng và mức độ luyện tập của mỗi người.\u003C\u002Fem>\u003C\u002Fp>\n\n\u003Ch2>Giai đoạn 1: HTML và CSS – dựng khung và giao diện\u003C\u002Fh2>\n\u003Cp>HTML mô tả cấu trúc trang (tiêu đề, đoạn văn, hình ảnh, form), còn CSS quyết định trang trông như thế nào. Phần này khá trực quan nên là điểm khởi đầu lý tưởng.\u003C\u002Fp>\n\u003Ch3>Bạn cần nắm được\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Các thẻ ngữ nghĩa: \u003Ccode>header\u003C\u002Fcode>, \u003Ccode>nav\u003C\u002Fcode>, \u003Ccode>main\u003C\u002Fcode>, \u003Ccode>section\u003C\u002Fcode>, \u003Ccode>article\u003C\u002Fcode>, \u003Ccode>footer\u003C\u002Fcode>. Viết HTML đúng ngữ nghĩa giúp trang dễ đọc với cả người dùng lẫn công cụ tìm kiếm.\u003C\u002Fli>\n\u003Cli>Box model, đơn vị (px, rem, %), màu sắc, font chữ.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Flexbox\u003C\u002Fstrong> và \u003Cstrong>Grid\u003C\u002Fstrong> để chia bố cục.\u003C\u002Fli>\n\u003Cli>Responsive với media query để trang hiển thị tốt trên điện thoại.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Cách luyện tập\u003C\u002Fh3>\n\u003Cp>Chọn một trang web bạn thích và tự dựng lại giao diện tĩnh của nó. Khi gặp phần chưa biết làm, hãy tra cứu đúng phần đó. Cách “học theo nhu cầu” này giúp nhớ lâu hơn nhiều so với học thuộc danh sách thuộc tính CSS.\u003C\u002Fp>\n\u003Cp>Nếu muốn đi theo một chương trình có bài tập và dự án, bạn có thể tham khảo \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-html-css\">khoá học HTML CSS từ cơ bản đến nâng cao\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Giai đoạn 2: JavaScript – “thổi hồn” cho trang web\u003C\u002Fh2>\n\u003Cp>JavaScript là ngôn ngữ chạy trực tiếp trên trình duyệt. Đây là giai đoạn nhiều người thấy khó nhất vì bắt đầu phải tư duy logic thật sự. Đừng nản: hầu như ai cũng trải qua cảm giác này.\u003C\u002Fp>\n\u003Ch3>Kiến thức trọng tâm\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Biến, kiểu dữ liệu, toán tử, câu điều kiện, vòng lặp.\u003C\u002Fli>\n\u003Cli>Hàm, phạm vi biến (scope), arrow function.\u003C\u002Fli>\n\u003Cli>Mảng và object cùng các phương thức \u003Ccode>map\u003C\u002Fcode>, \u003Ccode>filter\u003C\u002Fcode>, \u003Ccode>reduce\u003C\u002Fcode>, vì gần như mọi dữ liệu trên web đều ở dạng này.\u003C\u002Fli>\n\u003Cli>DOM và sự kiện: chọn phần tử, thay đổi nội dung, lắng nghe click, submit.\u003C\u002Fli>\n\u003Cli>Bất đồng bộ: Promise, \u003Ccode>async\u002Fawait\u003C\u002Fcode>, gọi API bằng \u003Ccode>fetch\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Cú pháp ES6+: destructuring, spread, module.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Hãy làm ít nhất hai dự án nhỏ: một todo app lưu dữ liệu bằng \u003Ccode>localStorage\u003C\u002Fcode> và một ứng dụng lấy dữ liệu từ một API công khai. Bạn có thể học có hệ thống hơn với \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-javascript\">khoá học JavaScript từ cơ bản đến thực chiến\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Khi đã quen JavaScript, hãy cân nhắc học thêm \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-typescript\">TypeScript\u003C\u002Fa>. Ngôn ngữ này bổ sung kiểu dữ liệu cho JavaScript và được dùng rất phổ biến trong các dự án React, Next.js và Node.js hiện nay.\u003C\u002Fp>\n\n\u003Ch2>Giai đoạn 3: Git và GitHub – thói quen của lập trình viên thực thụ\u003C\u002Fh2>\n\u003Cp>Git giúp bạn lưu lại lịch sử thay đổi của mã nguồn, quay về phiên bản cũ khi có lỗi và làm việc nhóm mà không ghi đè code của nhau. GitHub (hoặc GitLab) là nơi lưu trữ kho mã trực tuyến và cũng là “portfolio” để nhà tuyển dụng xem bạn đã làm gì.\u003C\u002Fp>\n\u003Cp>Không cần học Git riêng một khoảng dài. Hãy bắt đầu dùng ngay từ dự án đầu tiên với các lệnh cơ bản:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>git init\u003C\u002Fcode>, \u003Ccode>git add\u003C\u002Fcode>, \u003Ccode>git commit\u003C\u002Fcode>: tạo kho và lưu thay đổi.\u003C\u002Fli>\n\u003Cli>\u003Ccode>git branch\u003C\u002Fcode>, \u003Ccode>git checkout\u003C\u002Fcode>\u002F\u003Ccode>git switch\u003C\u002Fcode>, \u003Ccode>git merge\u003C\u002Fcode>: làm việc với nhánh.\u003C\u002Fli>\n\u003Cli>\u003Ccode>git push\u003C\u002Fcode>, \u003Ccode>git pull\u003C\u002Fcode>: đồng bộ với GitHub.\u003C\u002Fli>\n\u003Cli>Tạo pull request và đọc review: kỹ năng bắt buộc khi đi làm.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Xem thêm \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-git-github-gitlab\">khoá học Git, GitHub, GitLab\u003C\u002Fa> nếu bạn muốn hiểu sâu về rebase, xử lý conflict và quy trình làm việc nhóm.\u003C\u002Fp>\n\n\u003Ch2>Giai đoạn 4: React và Next.js – xây dựng ứng dụng hiện đại\u003C\u002Fh2>\n\u003Cp>Khi giao diện phức tạp lên, việc thao tác DOM thủ công trở nên khó quản lý. Thư viện như React giải quyết vấn đề này bằng cách chia giao diện thành các \u003Cstrong>component\u003C\u002Fstrong> có thể tái sử dụng, và tự cập nhật giao diện khi dữ liệu (state) thay đổi.\u003C\u002Fp>\n\u003Ch3>Thứ tự học React gợi ý\u003C\u002Fh3>\n\u003Col>\n\u003Cli>JSX, component, props.\u003C\u002Fli>\n\u003Cli>State và các hook cơ bản: \u003Ccode>useState\u003C\u002Fcode>, \u003Ccode>useEffect\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Xử lý form, render danh sách, điều kiện.\u003C\u002Fli>\n\u003Cli>Routing nhiều trang.\u003C\u002Fli>\n\u003Cli>Gọi API và quản lý dữ liệu từ server, ví dụ với \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-react-query\">React Query (TanStack Query)\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Sau React, \u003Cstrong>Next.js\u003C\u002Fstrong> là bước tiếp theo hợp lý: framework này hỗ trợ render phía server (tốt cho SEO), định tuyến theo thư mục và viết API ngay trong cùng dự án. Bạn có thể tham khảo \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-reactjs\">khoá học ReactJS lập trình web hiện đại\u003C\u002Fa> và \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-nextjs\">khoá học Next.js\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>React không phải lựa chọn duy nhất. Vue.js và Angular cũng là những framework tốt; điều quan trọng là học sâu một cái thay vì nhảy qua lại.\u003C\u002Fp>\n\n\u003Ch2>Giai đoạn 5: Backend và cơ sở dữ liệu\u003C\u002Fh2>\n\u003Cp>Đến đây bạn đã làm được giao diện đẹp, nhưng dữ liệu vẫn chưa có chỗ lưu lâu dài và chưa có đăng nhập thật. Đó là việc của backend.\u003C\u002Fp>\n\u003Ch3>Chọn ngôn ngữ backend\u003C\u002Fh3>\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Lựa chọn\u003C\u002Fth>\u003Cth>Ưu điểm\u003C\u002Fth>\u003Cth>Phù hợp khi\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>Node.js (Express, NestJS)\u003C\u002Ftd>\u003Ctd>Dùng lại JavaScript\u002FTypeScript đã học\u003C\u002Ftd>\u003Ctd>Muốn trở thành fullstack JavaScript nhanh\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Python (Django, FastAPI)\u003C\u002Ftd>\u003Ctd>Cú pháp dễ đọc, mạnh về dữ liệu và AI\u003C\u002Ftd>\u003Ctd>Quan tâm thêm data, machine learning\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>Java (Spring Boot)\u003C\u002Ftd>\u003Ctd>Ổn định, phổ biến ở doanh nghiệp lớn\u003C\u002Ftd>\u003Ctd>Nhắm đến dự án enterprise, ngân hàng\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>PHP (Laravel)\u003C\u002Ftd>\u003Ctd>Hosting rẻ, nhiều website sẵn có\u003C\u002Ftd>\u003Ctd>Làm website, CMS cho khách hàng nhỏ\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Với người đã đi theo lộ trình frontend ở trên, \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-nodejs-express\">Node.js với Express\u003C\u002Fa> là lựa chọn tự nhiên nhất. Khi dự án lớn hơn, bạn có thể chuyển sang \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-nestjs\">NestJS\u003C\u002Fa> để có cấu trúc rõ ràng hơn.\u003C\u002Fp>\n\u003Ch3>Kiến thức backend cốt lõi\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>HTTP, REST API: method, status code, request\u002Fresponse.\u003C\u002Fli>\n\u003Cli>Cơ sở dữ liệu quan hệ và SQL: bảng, khoá chính, khoá ngoại, \u003Ccode>JOIN\u003C\u002Fcode>, index. Bạn có thể bắt đầu với \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-mysql\">khoá học MySQL từ cơ bản đến nâng cao\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Xác thực và phân quyền: session, JWT, mã hoá mật khẩu.\u003C\u002Fli>\n\u003Cli>Kiểm tra dữ liệu đầu vào, xử lý lỗi, ghi log.\u003C\u002Fli>\n\u003Cli>Bảo mật cơ bản: chống SQL injection, XSS, cấu hình CORS.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Giai đoạn 6: Deploy – đưa sản phẩm lên internet\u003C\u002Fh2>\n\u003Cp>Một dự án chỉ chạy trên máy cá nhân thì khó gây ấn tượng. Hãy học cách đưa sản phẩm lên mạng:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Frontend tĩnh hoặc Next.js có thể deploy lên các nền tảng hosting hỗ trợ sẵn Git.\u003C\u002Fli>\n\u003Cli>Backend và database có thể chạy trên VPS hoặc dịch vụ cloud.\u003C\u002Fli>\n\u003Cli>Hiểu về domain, DNS, HTTPS và biến môi trường (không bao giờ đưa mật khẩu, API key lên GitHub).\u003C\u002Fli>\n\u003Cli>Làm quen với \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-docker\">Docker\u003C\u002Fa> để đóng gói ứng dụng, giúp chạy giống nhau trên mọi môi trường.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Những sai lầm thường gặp khi tự học lập trình web\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cstrong>Học quá nhiều thứ cùng lúc.\u003C\u002Fstrong> Học song song React, Vue và Angular chỉ khiến bạn hiểu nông cả ba.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Chỉ xem video mà không code.\u003C\u002Fstrong> Hãy gõ lại, sửa đổi và tự làm phiên bản của riêng mình.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Bỏ qua JavaScript nền tảng để nhảy vào framework.\u003C\u002Fstrong> Phần lớn lỗi khi học React thực ra là lỗi JavaScript.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Sợ lỗi.\u003C\u002Fstrong> Đọc kỹ thông báo lỗi, tra cứu tài liệu chính thức, và tập debug bằng DevTools của trình duyệt.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Không có sản phẩm để trình bày.\u003C\u002Fstrong> 2–3 dự án hoàn chỉnh trên GitHub có giá trị hơn nhiều chứng chỉ.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Ch2>AI có thay thế việc học lập trình web không?\u003C\u002Fh2>\n\u003Cp>Các công cụ AI hỗ trợ viết code ngày càng mạnh, nhưng chúng không thay thế được nền tảng. Bạn vẫn cần hiểu code để biết AI đang làm đúng hay sai, để ghép các phần lại với nhau và sửa lỗi khi có sự cố. Cách tiếp cận hợp lý là học nền tảng vững, sau đó dùng AI để tăng tốc. Nếu muốn tìm hiểu thêm, hãy đọc bài \u003Ca href=\"\u002Fblog\u002Fai-la-gi-giai-thich-tu-a-den-z-cho-nguoi-moi\">AI là gì\u003C\u002Fa>, bài \u003Ca href=\"\u002Fblog\u002Fprompt-engineering-la-gi-cach-viet-prompt-hieu-qua\">cách viết prompt hiệu quả\u003C\u002Fa>, hoặc tham khảo \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-cursor-ai-phat-trien-app-cho-developer\">khoá học Cursor AI phát triển app cho developer\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Gợi ý lộ trình theo mục tiêu\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Muốn làm Frontend:\u003C\u002Fstrong> Giai đoạn 1 → 2 → 3 → 4, thêm TypeScript. Xem nhóm \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-frontend\">khoá học lập trình Frontend\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Muốn làm Backend:\u003C\u002Fstrong> Giai đoạn 2 (JavaScript hoặc Python) → 3 → 5 → 6. Xem nhóm \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-backend\">khoá học lập trình Backend\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Muốn làm Fullstack:\u003C\u002Fstrong> đi đủ 6 giai đoạn, ưu tiên một stack JavaScript thống nhất (React\u002FNext.js + Node.js + SQL).\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Câu hỏi thường gặp\u003C\u002Fh2>\n\u003Ch3>Học lập trình web mất bao lâu thì đi làm được?\u003C\u002Fh3>\n\u003Cp>Không có con số cố định. Thời gian phụ thuộc vào số giờ học mỗi ngày, nền tảng trước đó và chất lượng dự án bạn làm. Thay vì đặt mốc thời gian, hãy đặt mục tiêu: hoàn thành 2–3 dự án có thể trình bày và giải thích được code của mình.\u003C\u002Fp>\n\u003Ch3>Người trái ngành có học lập trình web được không?\u003C\u002Fh3>\n\u003Cp>Có. Lập trình web là một trong những hướng dễ tiếp cận nhất cho người trái ngành vì kết quả hiển thị trực quan và tài liệu tiếng Việt khá phong phú. Điều quan trọng là học đều đặn và thực hành nhiều.\u003C\u002Fp>\n\u003Ch3>Có cần giỏi toán để học lập trình web không?\u003C\u002Fh3>\n\u003Cp>Phần lớn công việc web chỉ cần tư duy logic và toán cơ bản. Toán chuyên sâu cần nhiều hơn khi bạn đi vào đồ hoạ, thuật toán phức tạp hoặc machine learning.\u003C\u002Fp>\n\u003Ch3>Nên học frontend hay backend trước?\u003C\u002Fh3>\n\u003Cp>Với đa số người mới, frontend dễ bắt đầu hơn vì thấy kết quả ngay trên trình duyệt. Nếu bạn thích xử lý dữ liệu và logic hơn giao diện, có thể bắt đầu backend với Python hoặc Node.js.\u003C\u002Fp>\n\u003Ch3>Máy tính cấu hình thấp có học được không?\u003C\u002Fh3>\n\u003Cp>Được. HTML, CSS, JavaScript và Node.js chạy tốt trên hầu hết laptop phổ thông. Chỉ khi dùng Docker hoặc nhiều dịch vụ cùng lúc thì bạn mới cần RAM nhiều hơn.\u003C\u002Fp>\n\n\u003Ch2>Kết luận\u003C\u002Fh2>\n\u003Cp>Lộ trình học lập trình web không cần phức tạp: nắm chắc HTML, CSS, JavaScript, dùng Git từ ngày đầu, chọn một framework để đi sâu, sau đó mở rộng sang backend và deploy. Mỗi giai đoạn hãy gắn với một dự án cụ thể. Khi đã sẵn sàng đi theo chương trình có hướng dẫn, bạn có thể xem \u003Ca href=\"\u002Fkhoa-hoc\">danh sách khoá học lập trình online tiếng Việt\u003C\u002Fa> của MelyDemy để chọn khoá phù hợp với giai đoạn của mình.\u003C\u002Fp>\n",{"description":286,"keywords":293},[294,295,296,294,297],"trình","học","lập","web",{"fullname":299,"avatar":11,"position":300,"quote":11},"Mely Demy","Editor",{"url":11,"alt":285},[303,311,319,327,335,343],{"id":304,"slug":305,"title":306,"excerpt":307,"createdAt":308,"updatedAt":308,"category":309,"thumbnail":310},"9aa1bf78-82ec-4bf0-b0ff-7b0a7bf4b22a","hoc-ai-bat-dau-tu-dau","Học AI bắt đầu từ đâu? Lộ trình cho dev và người mới","Lộ trình học AI: dùng công cụ AI, Python, toán nền, machine learning, deep learning, LLM và AI agent.","2026-11-03T15:09:31",{"name":75,"slug":289,"description":11},{"url":11,"alt":306},{"id":312,"slug":313,"title":314,"excerpt":315,"createdAt":316,"updatedAt":316,"category":317,"thumbnail":318},"f3ad15b5-1753-46e0-ab87-ab9f767c8030","chung-chi-aws-nen-thi-cai-nao","Chứng chỉ AWS nên thi cái nào? Lộ trình từ cơ bản","So sánh Cloud Practitioner, Solutions Architect Associate\u002FProfessional, Developer Associate; lộ trình và cách ôn.","2026-11-03T15:09:08",{"name":75,"slug":289,"description":11},{"url":11,"alt":314},{"id":320,"slug":321,"title":322,"excerpt":323,"createdAt":324,"updatedAt":324,"category":325,"thumbnail":326},"d7e50156-ec43-4afc-b097-1979e02e8d8a","typescript-la-gi","TypeScript là gì? Vì sao dev JavaScript nên học","TypeScript là gì, khác JavaScript thế nào, kiểu dữ liệu, interface, generic và cách dùng với React.","2026-11-03T15:08:43",{"name":75,"slug":289,"description":11},{"url":11,"alt":322},{"id":328,"slug":329,"title":330,"excerpt":331,"createdAt":332,"updatedAt":332,"category":333,"thumbnail":334},"f6d8e6c9-7289-4c91-a5f5-f5f66c9bc5dc","kubernetes-la-gi","Kubernetes là gì? Pod, Node, Service giải thích dễ hiểu","Kubernetes (K8s) là gì, khi nào cần, các khái niệm pod, node, deployment, service và so với Docker.","2026-11-03T15:08:20",{"name":75,"slug":289,"description":11},{"url":11,"alt":330},{"id":336,"slug":337,"title":338,"excerpt":339,"createdAt":340,"updatedAt":340,"category":341,"thumbnail":342},"59f770d8-1fad-4707-99e0-780fc7b997e1","lo-trinh-hoc-devops","Lộ trình học DevOps bắt đầu từ đâu cho người mới","DevOps bắt đầu từ đâu: Linux, Git, Docker, CI\u002FCD, Kubernetes, cloud AWS và giám sát với Grafana.","2026-11-03T15:07:57",{"name":75,"slug":289,"description":11},{"url":11,"alt":338},{"id":344,"slug":345,"title":346,"excerpt":347,"createdAt":348,"updatedAt":348,"category":349,"thumbnail":350},"94151f16-08e8-47d6-95f1-599aeceaec4c","hoc-sql-co-ban","Học SQL cơ bản: SELECT, JOIN, GROUP BY kèm ví dụ","SQL cơ bản cho người mới: truy vấn, lọc, JOIN, GROUP BY, index và bài tập với MySQL.","2026-11-03T15:07:33",{"name":75,"slug":289,"description":11},{"url":11,"alt":346},[352,355,358,361,364,367],{"id":304,"slug":305,"title":306,"excerpt":307,"createdAt":308,"updatedAt":308,"category":353,"thumbnail":354},{"name":75,"slug":289,"description":11},{"url":11,"alt":306},{"id":312,"slug":313,"title":314,"excerpt":315,"createdAt":316,"updatedAt":316,"category":356,"thumbnail":357},{"name":75,"slug":289,"description":11},{"url":11,"alt":314},{"id":320,"slug":321,"title":322,"excerpt":323,"createdAt":324,"updatedAt":324,"category":359,"thumbnail":360},{"name":75,"slug":289,"description":11},{"url":11,"alt":322},{"id":328,"slug":329,"title":330,"excerpt":331,"createdAt":332,"updatedAt":332,"category":362,"thumbnail":363},{"name":75,"slug":289,"description":11},{"url":11,"alt":330},{"id":336,"slug":337,"title":338,"excerpt":339,"createdAt":340,"updatedAt":340,"category":365,"thumbnail":366},{"name":75,"slug":289,"description":11},{"url":11,"alt":338},{"id":344,"slug":345,"title":346,"excerpt":347,"createdAt":348,"updatedAt":348,"category":368,"thumbnail":369},{"name":75,"slug":289,"description":11},{"url":11,"alt":346}]