https://www.thanhnamnguyen.dev/assets/js/071ada60.11cb4188.js

1"use strict";(self.webpackChunkthanhnamnguyen_dev=self.webpackChunkthanhnamnguyen_dev||[]).push([["2706"],{68488(n,t,e){e.r(t),e.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>l,frontMatter:()=>a,metadata:()=>r,toc:()=>o});var r=e(36925),i=e(74848),h=e(28453);let a={slug:"frontend-roadmap",title:"Frontend Roadmap - L\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n th\xe0nh 1 Frontend Developer",description:"Trong th\u1EDDi \u0111\u1EA1i s\u1ED1 h\xf3a hi\u1EC7n nay, Frontend Development \u0111\xf3ng vai tr\xf2 quan tr\u1ECDng trong vi\u1EC7c x\xe2y d\u1EF1ng c\xe1c trang web v\xe0 \u1EE9ng d\u1EE5ng web h\u1EA5p d\u1EABn.",authors:["thanhnamnguyen"],tags:["frontend","roadmap"],image:"https://res.cloudinary.com/thanhnam/image/upload/v1704088124/thanhnamnguyen.dev/blog/frontend-roadmap_habinx.jpg",comments:!0,socialsShare:!0,alertEdit:!0,showAdsTOCBlog:!0},c,d={authorsImageUrls:[void 0]},o=[{value:"1. Hi\u1EC3u v\u1EC1 Frontend Development",id:"frontend-development",level:2},{value:"2. C\xf4ng vi\u1EC7c c\u1EE7a m\u1ED9t Frontend Developer l\xe0 g\xec?",id:"cong-viec-cua-fe-dev",level:2},{value:"3. H\u1ECDc c\xe1c k\u1EF9 n\u0103ng c\u01A1 b\u1EA3n",id:"ky-nang-co-ban",level:2},{value:"3. Frameworks v\xe0 th\u01B0 vi\u1EC7n",id:"frameworks-library",level:2},{value:"4. Hi\u1EC3u v\u1EC1 thi\u1EBFt k\u1EBF v\xe0 tr\u1EA3i nghi\u1EC7m ng\u01B0\u1EDDi d\xf9ng (UI/UX)",id:"ux-ui",level:2},{value:"5. D\u1EF1 \xe1n th\u1EF1c t\u1EBF",id:"du-an",level:2},{value:"6. Theo d\xf5i v\xe0 c\u1EADp nh\u1EADt c\xe1c th\xf4ng tin m\u1EDBi nh\u1EA5t",id:"cap-nhat-thong-tin",level:2},{value:"7. L\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n - Frontend Roadmap",id:"frontend-roadmap",level:2}];function s(n){let t={a:"a",h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,h.R)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"Trong th\u1EDDi \u0111\u1EA1i s\u1ED1 h\xf3a hi\u1EC7n nay, Frontend Development \u0111\xf3ng vai tr\xf2 quan tr\u1ECDng trong vi\u1EC7c x\xe2y d\u1EF1ng c\xe1c trang web v\xe0 \u1EE9ng d\u1EE5ng web. N\u1EBFu b\u1EA1n quan t\xe2m \u0111\u1EBFn l\u1ED9 tr\xecnh \u0111\u1EC3 tr\u1EDF th\xe0nh 1 Frontend Developer h\xe3y tham kh\u1EA3o b\xe0i vi\u1EBFt n\xe0y."}),"\n",(0,i.jsx)(t.h2,{id:"frontend-development",children:"1. Hi\u1EC3u v\u1EC1 Frontend Development"}),"\n",(0,i.jsx)(t.p,{children:"Frontend development l\xe0 qu\xe1 tr\xecnh ph\xe1t tri\u1EC3n c\xe1c y\u1EBFu t\u1ED1 tr\u1EF1c quan v\xe0 t\u01B0\u01A1ng t\xe1c tr\xean m\u1ED9t trang web m\xe0 ng\u01B0\u1EDDi d\xf9ng t\u01B0\u01A1ng t\xe1c tr\u1EF1c ti\u1EBFp. \u0110\xe2y l\xe0 s\u1E

1F1 k\u1EBFt h\u1EE3p c\u1EE7a HTML, CSS v\xe0 JavaScript, trong \u0111\xf3 HTML cung c\u1EA5p c\u1EA5u tr\xfac, CSS ch\u1ECBu tr\xe1ch nhi\u1EC7m v\u1EC1 ki\u1EC3u d\xe1ng v\xe0 b\u1ED1 c\u1EE5c, v\xe0 JavaScript qu\u1EA3n l\xfd h\xe0nh vi (behavior) v\xe0 t\xednh t\u01B0\u01A1ng t\xe1c (interactive)."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"Hi\u1EC3u v\u1EC1 Frontend Development",src:e(78034).A+"",width:"1140",height:"440"})}),"\n",(0,i.jsx)(t.h2,{id:"cong-viec-cua-fe-dev",children:"2. C\xf4ng vi\u1EC7c c\u1EE7a m\u1ED9t Frontend Developer l\xe0 g\xec?"}),"\n",(0,i.jsxs)(t.p,{children:["L\xe0 m\u1ED9t Frontend Developer, b\u1EA1n s\u1EBD ch\u1ECBu tr\xe1ch nhi\u1EC7m t\u1EA1o ra giao di\u1EC7n ng\u01B0\u1EDDi d\xf9ng c\u1EE7a m\u1ED9t trang web, \u0111\u1EA3m b\u1EA3o n\xf3 tr\xf4ng \u0111\u1EB9p v\xe0 d\u1EC5 s\u1EED d\u1EE5ng, v\u1EDBi s\u1EF1 t\u1EADp trung l\u1EDBn v\xe0o c\xe1c nguy\xean t\u1EAFc thi\u1EBFt k\u1EBF v\xe0 tr\u1EA3i nghi\u1EC7m ng\u01B0\u1EDDi d\xf9ng (UX/UI). B\u1EA1n s\u1EBD l\xe0m vi\u1EC7c ch\u1EB7t ch\u1EBD v\u1EDBi ",(0,i.jsx)(t.strong,{children:"c\xe1c nh\xe0 thi\u1EBFt k\u1EBF (designer)"}),", m\u1ED9t ",(0,i.jsx)(t.strong,{children:"Backend Developer"})," v\xe0 qu\u1EA3n l\xfd d\u1EF1 \xe1n \u0111\u1EC3 \u0111\u1EA3m b\u1EA3o s\u1EA3n ph\u1EA9m cu\u1ED1i c\xf9ng \u0111\xe1p \u1EE9ng nhu c\u1EA7u c\u1EE7a kh\xe1ch h\xe0ng v\xe0 mang l\u1EA1i tr\u1EA3i nghi\u1EC7m t\u1ED1t nh\u1EA5t cho ng\u01B0\u1EDDi d\xf9ng cu\u1ED1i (end user)."]}),"\n",(0,i.jsx)(t.h2,{id:"ky-nang-co-ban",children:"3. H\u1ECDc c\xe1c k\u1EF9 n\u0103ng c\u01A1 b\u1EA3n"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"HTML & CSS:"})," B\u1EAFt \u0111\u1EA7u v\u1EDBi vi\u1EC7c h\u1ECDc HTML \u0111\u1EC3 x\xe2y d\u1EF1ng c\u1EA5u tr\xfac trang web v\xe0 CSS \u0111\u1EC3 l\xe0m \u0111\u1EB9p n\xf3."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"JavaScript:"})," H\u1ECDc v\u1EC1 JavaScript \u0111\u1EC3 th\xeam t\xednh n\u0103ng \u0111\u1ED9ng v\xe0 t\u01B0\u01A1ng t\xe1c v\xe0o trang web."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"H\u1ECDc c\xe1c k\u1EF9 n\u0103ng c\u01A1 b\u1EA3n HTML, CSS, JavaScript",src:e(7812).A+"",width:"860",height:"512"})}),"\n",(0,i.jsxs)(t.p,{children:["B\u1EA1n c\xf3 th\u1EC3 tham kh\u1EA3o t\u1EA1i ",(0,i.jsx)(t.strong,{children:"W3Schools"})," v\u1EDBi ",(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://www.w3schools.com/html/default.asp",children:"HTML"})," ",(0,i.jsx)(t.a,{href:"https://www.w3schools.com/css/default.asp",children:"CSS"})," v\xe0 ",(0,i.jsx)(t.a,{href:"https://www.w3schools.com/js/default.asp",children:"JavaScript"})]})]}),"\n",(0,i.jsx)(t.h2,{id:"frameworks-library",children:"3. Frameworks v\xe0 th\u01B0 vi\u1EC7n"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://getbootstrap.com/",children:"Bootstrap"})})," v\xe0 CSS Frameworks kh\xe1c (nh\u01B0 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://tailwindcss.com/",children:"TailwindCSS"})}),"): H\u1ECDc c\xe1ch s\u1EED d\u1EE5ng c\xe1c framework \u0111\u1EC3 t\u1EA1o giao di\u1EC7n nhanh ch\xf3ng v\xe0 th\xe2n thi\u1EC7n v\u1EDBi thi\u1EBFt b\u1ECB di \u0111\u1ED9ng."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://react.dev/",children:"React"})}),", ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://angular.io/",children:"Angular"})})," ho\u1EB7c ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://vuejs.org/",children:"Vue.js"})}),": Hi\u1EC3u v\u1EC1 c\xe1c framework ph\xe1t tri\u1EC3n ph\xeda tr\u01B0\u1EDBc ph\u1ED5 bi\u1EBFn \u0111\u1EC3 x\xe2y d\u1EF1ng \u1EE9ng d\u1EE5ng web \u0111a t\xednh n\u0103ng."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"Frameworks v\xe0 th\u01B0 vi\u1EC7n",src:e(45880).A+"",width:"1280",height:"720"})}),"\n",(0,i.jsx)(t.h2,{id:"ux-ui",children:"4. Hi\u1EC3u v\u1EC1 thi\u1EBFt k\u1EBF v\xe0 tr\u1EA3i nghi\u1EC7m ng\u01B0\u1EDDi d\xf9ng (UI/UX)"}),"\n",(0,i.jsx)(t.p,{children:"H\xe3y h\u1ECDc v\u1EC1 c\xe1c nguy\xean t\u1EAFc thi\u1EBFt k\u1EBF v\xe0 tr\u1EA3i nghi\u1EC7m ng\u01B0\u1EDDi d\xf9ng \u0111\u1EC3 t\u1EA1o ra giao di\u1EC7n h\u1EA5p d\u1EABn v\xe0 d\u1EC5 s\u1EED d\u1EE5ng."}),"\n",(0,i.jsx)(t.h2,{id:"du-an",children:"5. D\u1EF1 \xe1n th\u1EF1c t\u1EBF"}),"\n",(0,i.jsx)(t.p,{children:"Tham gia v\xe0o c\xe1c d\u1EF1 \xe1n th\u1EF1c t\u1EBF ho\u1EB7c x\xe2y d\u1EF1ng trang web ri\xeang c\u1EE7a b\u1EA1n \u0111\u1EC3 \xe1p d\u1EE5ng ki\u1EBFn th\u1EE9c v\xe0 k\u1EF9 n\u0103ng."}),"\n",(0,i.jsx)(t.h2,{id:"cap-nhat-thong-tin",children:"6. Theo d\xf5i v\xe0 c\u1EADp nh\u1EADt c\xe1c th\xf4ng tin m\u1EDBi nh\u1EA5t"}),"\n",(0,i.jsxs)(t.p,{children:["L\u0129nh v\u1EF1c Frontend ph\xe1t tri\u1EC3n nhanh ch\xf3ng. Theo d\xf5i c\xe1c xu h\u01B0\u1EDBng m\u1EDBi v\xe0 c\xf4ng ngh\u1EC7 \u0111\u1EC3 duy tr\xec ki\u1EBFn th\u1EE9c c\u1EE7a b\u1EA1n. B\u1EA1n c\xf3 th\u1EC3 t\u1EA3i extension ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://daily.dev/",children:"Daily.dev"})})," \u0111\u1EC3 lu\xf4n theo d\xf5i c\xe1c tin t\u1EE9c c\xf4ng ngh\u1EC7 m\u1EDBi."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"daily.dev",src:e(78442).A+"",width:"3396",height:"1840"})}),"\n",(0,i.jsx)(t.h2,{id:"frontend-roadmap",children:"7. L\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n - Frontend Roadmap"}),"\n",(0,i.jsxs)(t.p,{children:["D\u01B0\u1EDBi \u0111\xe2y l\xe0 l\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n \u0111\u1EC3 tr\u1EDF th\xe0nh m\u1ED9t ",(0,i.jsx)(t.strong,{children:"Frontend Developer"})," theo th\u1EE9 t\u1EF1 t\u1EEB d\u1EC5 \u0111\u1EBFn kh\xf3. B\u1EA1n s\u1EBD t\xecm hi\u1EC3u v\u1EC1:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Internet"}),"\n",(0,i.jsx)(t.li,{children:"HTML, CSS, JavaScript c\u01A1 b\u1EA3n"}),"\n",(0,i.jsx)(t.li,{children:"T\xecm hi\u1EC3u v\u1EC1 Git (h\u1EC7 th\u1ED1ng qu\u1EA3n l\xfd phi\xean b\u1EA3n ph\xe2n t\xe1n Distributed Version Control System \u2013 DVCS)"}),"\n",(0,i.jsx)(t.li,{children:"Ch\u1ECDn m\u1ED9t Frameworks \u0111\u1EC3 h\u1ECDc n\xe2ng cao"}),"\n",(0,i.jsx)(t.li,{children:"..."}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"L\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n - Frontend Roadmap",src:e(74108).A+"",width:"3445",height:"9167"})}),"\n",(0,i.jsxs)(t.p,{children:["Truy c\u1EADp v\xe0o ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://roadmap.sh/frontend",children:"Frontend Developer Roadmap"})})," \u0111\u1EC3 t\xecm hi\u1EC3u r\xf5 h\u01A1n."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"L\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n - Frontend Roadmap",src:e(90249).A+"",width:"3410",height:"1862"})})]})}function l(n={}){let{wrapper:t}={...(0,h.R)(),...n.components};return t?(0,i.jsx)(t,{...n,children:(0,i.jsx)(s,{...n})}):s(n)}},78442(n,t,e){e.d(t,{A:()=>r});let r=e.p+"assets/images/daily-dev-c834fbec9afd70d4af202b79664bfc9d.png"},90249(n,t,e){e.d(t,{A:()=>r});let r=e.p+"assets/images/frontend-roadmap-details-d9e42a636ca4e5adbee3658d36552977.png"},74108(n,t,e){e.d(t,{A:()=>r});let r=e.p+"assets/images/frontend-roadmap-8cf0fbff1c65b566264e0ce643e26fbe.png"},7812(n,t,e){e.d(t,{A:()=>r});let r=e.p+"assets/images/html-css-js-b4590b761a95b73074e569f13d4f321d.png"},45880(n,t,e){e.d(t,{A:()=>r});let r=e.p+"assets/images/lib&framework-3d80182964bf472d96562ebad7f76065.jpg"},78034(n,t,e){e.d(t,{A:()=>r});let r=e.p+"assets/images/web-development-7bfb6fd513f158ac169141b

16801b0c8b.webp"},28453(n,t,e){e.d(t,{R:()=>a,x:()=>c});var r=e(96540);let i={},h=r.createContext(i);function a(n){let t=r.useContext(h);return r.useMemo(function(){return"function"==typeof n?n(t):{...t,...n}},[t,n])}function c(n){let t;return t=n.disableParentContext?"function"==typeof n.components?n.components(i):n.components||i:a(n.components),r.createElement(h.Provider,{value:t},n.children)}},36925(n){n.exports=JSON.parse('{"permalink":"/blog/frontend-roadmap","source":"@site/blog/2023/09/07/frontend-roadmap/index.mdx","title":"Frontend Roadmap - L\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n th\xe0nh 1 Frontend Developer","description":"Trong th\u1EDDi \u0111\u1EA1i s\u1ED1 h\xf3a hi\u1EC7n nay, Frontend Development \u0111\xf3ng vai tr\xf2 quan tr\u1ECDng trong vi\u1EC7c x\xe2y d\u1EF1ng c\xe1c trang web v\xe0 \u1EE9ng d\u1EE5ng web h\u1EA5p d\u1EABn.","date":"2023-09-07T00:00:00.000Z","tags":[{"inline":false,"label":"Frontend","permalink":"/blog/tags/frontend","description":"C\xe1c b\xe0i vi\u1EBFt v\u1EC1 ch\u1EE7 \u0111\u1EC1 Frontend"},{"inline":false,"label":"Roadmap","permalink":"/blog/tags/roadmap","description":"C\xe1c b\xe0i vi\u1EBFt v\u1EC1 ch\u1EE7 \u0111\u1EC1 Roadmap"}],"readingTime":3.07,"hasTruncateMarker":false,"authors":[{"id":1,"name":"Th\xe0nh 

1Nam Nguy\u1EC5n","title":"Web Developer","page":{"permalink":"/blog/authors/thanhnamnguyen"},"socials":{"linkedin":"https://www.linkedin.com/in/thanhnamnguyen16/","github":"https://github.com/namnguyenthanhwork","facebook":"https://www.facebook.com/NguyenThanhNam1601","blog":"https://blog.thanhnamnguyen.dev/"},"imageURL":"/img/logo/LyokoLogo-Face.png","key":"thanhnamnguyen"}],"frontMatter":{"slug":"frontend-roadmap","title":"Frontend Roadmap - L\u1ED9 tr\xecnh ph\xe1t tri\u1EC3n th\xe0nh 1 Frontend Developer","description":"Trong th\u1EDDi \u0111\u1EA1i s\u1ED1 h\xf3a hi\u1EC7n nay, Frontend Development \u0111\xf3ng vai tr\xf2 quan tr\u1ECDng trong vi\u1EC7c x\xe2y d\u1EF1ng c\xe1c trang web v\xe0 \u1EE9ng d\u1EE5ng web h\u1EA5p d\u1EABn.","authors":["thanhnamnguyen"],"tags":["frontend","roadmap"],"image":"https://res.cloudinary.com/thanhnam/image/upload/v1704088124/thanhnamnguyen.dev/blog/frontend-roadmap_habinx.jpg","comments":true,"socialsShare":true,"alertEdit":true,"showAdsTOCBlog":true},"unlisted":false,"prevItem":{"title":"T\u1EA1o hi\u1EC7u \u1EE9ng v\u0103n b\u1EA3n s\u1EED d\u1EE5ng Gradient Text CSS","permalink":"/blog/tao-hieu-ung-gradient-text"},"nextItem":{"title":"C\xe1c c\xf4ng c\u1EE5 d\xe0nh cho l\u1EADp tr\xecnh vi\xean Frontend","permalink":"/blog/cac-cong-cu-danh-cho-frontend-dev"}}')}}]);