Con đường Intern Front End từ con số 0

Lưu ý: Thời gian hoàn thành dưới đây chỉ là ước lượng để giúp các bạn biết tập trung vào kiến thức nào. Có thể thay đổi tùy theo sức học của mỗi người. Nên dành mỗi ngày từ 2–3 tiếng để đạt được hiệu quả tốt nhất.

Lập trình cơ bản (~ 2 tháng)

Trước khi vào chính Front End, chắc chắn bạn cần vững kiến thức nền tảng trước đã. Ở đây mình bắt đầu bằng Java (Có thể học tương tự như C#)

Công cụ lập trình: Eclipse hoặc Netbeans.

Hiểu được khái niệm cơ bản của lập trình (if-else, variable, class, loop, function, type, …) (~ 0.5 tháng)

Đây là những kiến thức quan trọng mà chắc chắn bạn sẽ dùng cho tới khi không còn học lập trình nữa, có thể làm một số bài tập:

**niithanoi.edu.vn/bai-tap-java-co-ban:** 20 bài tập có lời giải sẽ giúp bạn hiểu được, thực hành một số kiến thức cơ bản, logic trong lập trình nhé (Làm tới khúc nào không hiểu thì google để học về kiến thức đó).

Học thuật toán sắp xếp (Sort) thôi nào (~ 0.5 tháng)

Kiến thức về sắp xếp là kĩ năng quan trọng mà nhiều công ty sẽ phỏng vấn. Chỉ cần hiểu được ý tưởng của từng thuật toán là được.

**medium.com/tuanbinhblog/thuat-toan-sort:** Có tổng cộng 8 thuật toán sort nhưng bạn chỉ cần hiểu chắc chắn bubble sort, selection sort, quicksort. Các thuật toán còn lại cần nắm rõ khái niệm và cách hoạt động.

Bài tập đơn giản: Cho 1 mảng [10, 16, 56, 89, 14, 22, 77, 13, 14, 28]. Ứng dụng bubble sort, selection sort, quicksort để sắp xếp theo thứ tự tăng dần và giảm dần.

Học lập trình OOP (~ 1 tháng — Càng hiểu nhiều càng tốt)

OOP gần như là kĩ năng không thể thiếu và luôn luôn được hỏi khi phỏng vấn cả Front End hoặc Back End.

viettuts.vn/java/tong-quan-java-oops: Tất tần tật kiến thức OOP. Ở mỗi mục sẽ có link tìm hiểu thêm. Bạn nhớ xem hết nhé. Bên trái thanh sidebar mục OOP là toàn bộ kiến thức của OOP.

Bài tập: Ứng dụng OOP làm một dự án quản lý nhân viên trong công ty. Có 3 chức danh Manager, Employee, CEO. Thông tin cơ bản (Tên, Ngày Sinh, Địa chỉ, Số điện thoại, Lương). Employee thì có thêm thông tin (Số giờ làm việc, bộ phận làm việc). Manager thì tương tự Employee nhưng có thêm (Số nhân viên mình quản lý: Tính dựa trên các nhân viên trong bộ phận làm việc). CEO thì giống Manager ngoại trừ bộ phận làm việc thì không có (Số nhân viên mình quản lý: Là tổng số nhân viên trong công ty).

Có các chức năng như sau:

  • Xuất toàn bộ danh sách nhân viên.

  • Thêm 1 nhân viên.

  • Sửa 1 nhân viên.

  • Xóa 1 nhân viên.

  • Tìm nhân viên theo tên.

  • Xuất toàn bộ danh sách nhân viên theo thứ tự mức lương giảm dần.

Lưu ý: Khi thêm, sửa nhân viên thì những thông tin như số điện thoại, tuổi, lương chỉ đồng ý khi nhập là một số. Số điện thoại cần đúng 10 số, ngày sinh phải là một ngày hợp lệ. Lương thì nhân viên không thể lớn hơn lương Manager, Manager không thể lớn hơn CEO. Các thông tin không được bỏ trống.

Vì dự án này khó nên các bạn có thể inb hỏi mình nếu gặp khó khăn nhé

Nâng Cao (Không bắt buộc nhưng học thêm càng tốt)

Làm dự án ở trên nhưng thay vì dữ liệu từ nhập thì dữ liệu sẽ tương tác với SQL và lưu xuống database của SQL.

codejava.net/java-se/jdbc/jdbc-tutorial-sql-insert-select-update-and-delete-examples: Đầy đủ hướng dẫn ở đây. Kéo xuống cuối sẽ có video để code theo. Áp dụng với dự án OOP ở trên.

Chuẩn bị ăn hành thôiChuẩn bị ăn hành thôi

Món ăn chính: Front End

Cảnh báo: Món ăn này mới vào sẽ hơi ngộp kiến thức. Nhưng chỉ cần cố gắng code, code và code sẽ nhớ được. Đối với Front End nên bắt tay vào làm ngay chứ đừng quá chú trọng thuộc lí thuyết. Vừa thực hành vừa học sẽ nhớ dai hơn.

Công cụ lập trình: Visual Studio Code với extension sau: open in browser (Để mở code lên trang web bằng cách chuột phải file html chọn open in browser).

HTML & CSS (~ 1 tuần)

bizflycloud.vn/tin-tuc/html-la-gi-cac-kien-thuc-co-ban-nhat-ve-html/: Khái niệm cơ bản của HTML.

daynhauhoc.com/t/cac-the-html-thong-dung/: Các thẻ html hay dùng.

Bài tập HTML: hocwebchuan.com/exercises/html-html5/html_basic07

Xem lời giải và làm theo nhưng mỗi lần viết xong 1 dòng nên qua browser xem nó thay đổi gì nhé. Tương tự mục bên phải sẽ có hướng dẫn giải CSS cho bài tập này (Làm theo để biết CSS cơ bản nó tương tác như nào với HTML).

Đầy đủ hết lời giải rồi, làm theo thôi.Đầy đủ hết lời giải rồi, làm theo thôi.

developer.mozilla.org/vi/docs/Learn/Getting_started_with_the_web/CSS_basics: Khái niệm cơ bản CSS.

Bài tập HTML & CSS cơ bản: mdn.github.io/beginner-html-site-styled/

Flexbox (~ 1 tuần)

Mặc dù đây là một kĩ năng của css nhưng mình tách riêng ra vì flexbox rất quan trọng. Bạn cần rèn luyện nhiều để có nền tảng giúp responsive sau này.

thachpham.com/web-development/html-css/huong-dan-css3-flexbox-toan-tap: Tất tần tật mọi thứ về flexbox. Bài nào có bài mẫu thì cứ code theo nhé.

Bài tập ôn lại HTML & CSS và Flexbox ( ~ 0.5 tháng)

https://www.youtube.com/watch?v=5m-TZzuQtN8: Video 55' hướng dẫn lập trình website cơ bản từ lúc phân tích cho tới lúc lên code. Nên xem từ đầu và code theo nhé.

Responsive (~ 0.5 tháng)

Trang web mà không có responsive thì sẽ hiển thị trên 1 screen duy nhất mà thôi. Như mình lập trình trên desktop thì lúc lên điện thoại sẽ bị vỡ layout. Vì vậy responsive là kiến thức rất rất quan trọng.

Responsive giúp trang web hiển thị thuận mắt hơn trên các thiết bị khác.Responsive giúp trang web hiển thị thuận mắt hơn trên các thiết bị khác.

hocwebchuan.com/tutorial/responsive/: Đọc hết và thử áp dụng responsive dành cho mobile với bài tập ở trên.

Dự án lớn ôn lại những kiến thức đã học (~ 1 tháng)

https://w3layouts.com/stitchery-fashion-category-bootstrap-responsive-web-template/: Ấn vào mục View Demo. Chỉ cần làm tới Amazing Team là được. Hiệu ứng rê chuột cần phải giống hoàn toàn. Slide hình ảnh không cần làm cũng được. Nếu bạn nào muốn thử thì có thể tìm hiểu thư viện owl carousel tự cài đặt nhé hoặc xài carousel của bootstrap.

Tới đây bạn đã có thể làm chắc giao diện web thoải mái rồi nhé! Hãy ngẫm lại quá trình mình đã tiến bộ sao nhé ^^Tới đây bạn đã có thể làm chắc giao diện web thoải mái rồi nhé! Hãy ngẫm lại quá trình mình đã tiến bộ sao nhé ^^

Bootstrap (~ 2 tuần)

Bootstrap là kiến thức không thể thiếu nhưng cũng không nên quá tập trung vào Bootstrap. Vì Bootstrap ở những công ty lớn, chuyên làm giao diện sẽ ít sử dụng vì nó rất khó chỉnh sửa. Học để nắm khái niệm từ đó có thể chuyển qua Material UI, Ant Design, Tailwind, …

Kiến thức quan trọng cần nắm của Bootstrap:

Component: getbootstrap.com/docs/4.5/components/

Không cần phải đọc chỉ cần làm một trang web có đầy đủ các yếu tố sau (Dựa vào những component cho ở bên trái):

  • Thanh Navbar và có một menu là Dropdowns.

  • Slider banner (Carousel).

  • 1 Thẻ Card chứ hình ảnh sản phẩm tùy ý, thêm Button nút delete màu đỏ và nút update màu xanh (Lấy màu trong getbootstrap.com/docs/4.5/utilities/colors/).

  • Khi ấn nút update trên sẽ show ra Modal đầy đủ các thông tin của sản phẩm đó cho người dùng.

Grid: quantrimang.com/grid-system-he-thong-luoi-trong-bootstrap

Đọc hiểu được khái niệm Grid của Bootstrap. Thực hành được càng tốt.

Bootstrap là “đỉnh" đầu tiên của đời lập trình viên FEBootstrap là “đỉnh" đầu tiên của đời lập trình viên FE

BEM & SASS/SCSS (~ 1 tháng)

Code “được" thì bình thường nhưng Code “đẹp — dễ bảo trì — dễ nâng cấp" mới là điều mà mọi nhà tuyển dụng, dự án lớn cần đến.

Kiến thức quan trọng cần nắm:

  • Cách đặt tên class HTML theo BEM

topdev.vn/blog/bem-la-gi/

viblo.asia/p/tim-hieu-ve-bem-trong-15-phut

  • SASS/SCSS

SASS là gì và tại sao phải dùng SASS: tecktrending.com/sat-sass-la-cai-khi-gi

Khái niệm biến trong SASS: minhho.net/bien-va-cach-su-dung-bien-trong-scss

Khái niệm mixin: viblo.asia/p/sass-co-ban-mixin

Cách chia thư mục SASS để tối ưu quản lý code: viblo.asia/p/cau-truc-files-trong-cac-du-an-su-dung-sass-voi-7-1-pattern-architecture

Dự án kết hợp BEM và SASS

w3layouts.com/template/bank-cards-website-template: Vào chọn mục Demo bên phải để hiển thị toàn bộ trang web.

Javascript (~ 1.5 tháng)

Ngôn ngữ gây lú cực mạnh nhưng quen rồi thì code khá vuiNgôn ngữ gây lú cực mạnh nhưng quen rồi thì code khá vui

Sách hay bằng tiếng Anh cho bạn nào muốn đọc (Không bắt buộc): github.com/jumaschion/You-Dont-Know-JS-1/

Kiến thức quan trọng cần nắm vững (Lưu ý đây là những kiến thức mình thấy quan trọng khi phỏng vấn intern chứ không phải toàn bộ kiến thức hay của JS):

Kiểu dữ liệu trong js: webcoban.vn/javascript/cac-kieu-du-lieu-data-type-trong-javascript

let, const, var: viblo.asia/p/phan-biet-kieu-bien-var-let-va-const-trong-javascript

Khái niệm DOM: viblo.asia/p/nhung-khai-niem-co-ban-ve-dom

Bài tập nhỏ: Tạo một trang HTML có 2 ô input số thứ nhất và số thứ hai, một button khi ấn vào sẽ tính toán cộng, trừ, nhân, chia 2 số trên và hiển thị ra trang web.

Các hàm xử lý chuỗi trong Javascript (Đọc qua để nắm ý tưởng các hàm): freetuts.net/cac-ham-xu-ly-chuoi-trong-javascript-393

Spread Operator, Rest Parameter, Destructuring: anonystick.com/blog-developer/giai-thich-ve-destructuring-rest-parameters-va-spread-syntax-trong-javascript

To Be Continued …