(Chia sẻ) 4 năm kinh nghiệm tự học HTML, CSS, JS của mình

Chào bạn!

Mình tên là Tuấn với nickname hay gọi là evondev, mình hiện là sáng lập & phát triển blog evondev.com – chuyên chia sẻ kiến thức về Web (Học HTML, CSS, JS).

Ở bài viết này, mình sẽ chia sẻ về con đường & kinh nghiệm tự học Frontend trong 4 năm qua để bản thân có được chút thành công nhỏ của ngày hôm nay. Nếu bạn là người đang theo chuyên môn web như mình thì hi vọng bài viết sẽ tạo động lực và giúp ích được bạn phần nào trong quá trình tự học của bản thân.

Mình cũng từng là 1 newbie nên có thể bạn sẽ bắt gặp đâu đó hình ảnh của chính bản thân bạn trong hành trình của mình.

Đôi chút về mình – Evondev

Mình sinh ra và lớn lên ở vùng sâu vùng xa của Bà Rịa Vũng Tàu, từ lớp 1 đến lớp 12 mình học hành cũng bình thường, không có nổi trội gì. Lên cấp 3 mình học Pascal nhưng không hiểu mấy (Mình không nghĩ sau này sẽ trở thành lập trình viên luôn).

Lúc lên cao đẳng mình vẫn duy trì cách học tập như thế và đạt loại khá. Ban đầu, mình thích Photoshop chứ không phải lập trình vì mình thấy chỉnh ảnh rồi màu mè khá là ngầu. Cơ mà trường không có dạy Photoshop cho hệ chính quy.

Tới năm 2 thì mình mò mẫm tự học HTML, CSS, JS & làm được nhiều cái hay ho nên mình rất thích, dù mình làm rất xấu và code rất tệ. Nhưng sự thích thú đó là cơ duyên đưa mình đến với lập trình.

Hiện tại mình là một Frontend Developer. Ngoài giờ làm việc trên công ty thì mình còn phát triển bản thân bằng việc viết blog, xây dựng kênh Youtube chia sẻ kiến thức mình đạt được tới nhiều người, cộng đồng lập trình. Đồng thời mình cũng quản lý 1 nhóm rất mạnh về frontend trên Facebook.

Gần đây mình cũng vừa mới quay hơn 100 videos về HTML/CSS & đóng gói nó thành 1 khóa học online

Tự học và làm ở công ty đầu tiên

Bản thân mình khi mới bắt đầu học lập trình rất mông lung. Quá trình tự học ban đầu phải nói là cực kỳ gian nan và gặp nhiều khó khăn. Mọi thứ phải tự mày mò trên Internet, nhưng khổ cái là mỗi người chia sẻ đều theo 1 kiểu khác nhau. Ai cũng cho quan điểm & kiến thức của họ đúng.

Sau khi tìm hiểu & lên kế hoạch. Thì mình quyết định theo đuổi 3 chuyên môn chính: Học HTML CSS & Javascript. Khi đã xác định được định hướng để phát triển mình bắt đầu lựa chọn nơi uy tín để gửi gắm kiến thức của bản thân, nhờ lời khuyên của nhiều người nên mình quyết định học ở w3schools.

Thời gian học HTML, CSS, JS ở đây cũng chính là khoảng thời gian mình đi thực tập ở 1 công ty về outsource web.

Tại môi trường này, mình được kiểm tra từng thuộc tính một để xem sự hiểu biết tới đâu, mình cũng được học cách sử dụng ra sao cho đúng. Về áp lực thì code sai & ăn chửi cũng rất nhiều, tuy nhiên mình học được nhiều thứ hay ho khác mà khi học ở trường mình không có được.

Sau đó là khoảng thời gian mình đi tìm việc, với kinh nghiệm học hỏi ở các anh chị ở công ty thực tập mình biết thêm cách viết email, cách trả lời mail, cách thương lượng lương, cách trả lời phỏng vấn, ăn mặc, ứng xử, những điều này đều là kỹ năng mềm ngoài việc có kiến thức ra thì nó cũng chiếm phần quan trọng tới buổi phỏng vấn.

Cuối cùng mình đã đậu rồi làm việc ở một công ty Product của Singapore có trụ sở tại Việt Nam với vị trí là thiết kế giao diện (thiết kế giao diện web trên Photoshop) và code giao diện (HTML CSS).

Cả công ty chỉ có đúng một mình mình làm giao diện mà thôi, mình đã đậu là do mình có thể thiết kế với Photoshop và code được. May mắn là trước đó mình có làm freelance về thiết kế giao diện web do được một chị lâu năm trong nghề thiết kế quen biết chỉ dạy.

Vừa thực tập vừa học HTML, CSS ở công ty đầu tiên

Trong công ty mình không thể hỏi ai, “đơn phương độc mã” trong công việc, sếp giao việc rồi sau đó mình tự thiết kế rồi tự code mọi giao diện với HTML CSS.

Nhược điểm lớn nhất của việc chỉ làm có một mình là khi bị bí ở đâu đó sẽ không thể hỏi được ai, thời điểm đó là năm 2016 chưa có nhiều nhóm trên Facebook như hiện nay, và dù cho nếu có thì với tính cách của bản thân thì mình cũng không bao giờ lên hỏi cả.

Để tìm được câu trả lời cho câu hỏi nào đó mình thường tự mò trên Google & Stackoverflow. Vì vậy, dù cho chỉ có 1 mình nhưng mình đã luôn cố gắng và giải quyết hầu hết các vấn đề gặp phải cho nên trình độ mình mới cải thiện rất nhiều.

Ngoài ra, để nâng cao trình độ của bản thân mình còn tự học thêm ở 2 nền tảng là Codecademy và Udemy

Mình còn học thêm JQuery để làm các animation, thao tác với HTML, đọc thêm kiến thức hay ở những blog nước ngoài như CSS-Tricks, teamtreehouse.

Thời điểm này mình chưa biết gì về Javascripts cả (mặc dù đó là định hướng ban đầu của mình), có ông anh làm ngôn ngữ khác & ông hỏi mình về Javascript làm mình cũng lú người ra do mình chỉ biết mỗi JQuery.

Lúc này là năm 2016 có Framework JS là Angular 1 cũng rất chi là hay, tuy nhiên do mình còn quá yếu nên đọc không hiểu gì cả, nên mình cứ tiếp tục làm giao diện với HTML CSS và các chuyển động với JQuery mà thôi.

Tối ưu UX/UI là một trong những kỹ năng quan trọng của người làm web, vì vậy mình đã update thêm cho bản thân mỗi ngày với những blog liên quan như goodui.org, uxdesign.cc, kế tiếp là vào các trang về thiết kế như dribbble, medium muz li để lấy cảm hứng thiết kế, ở đây có rất nhiều người thiết kế cực kỳ đẹp và ấn tượng.

Tuy nhiên, bản thân mình thấy mình không giỏi khoản này nên về sau sếp giao là mình code thẳng rồi sửa giao diện sau theo ý sếp chứ không thiết kế trên Photoshop nữa.

Nhưng bản thân mình thấy việc học thêm về UX/UI không thừa, nhờ vậy mà mình đã biết một UI đẹp hay một UX tệ là thế nào từ những góp ý của sếp, để sau này mình có thể cho ra được những sản phẩm đẹp và chất hơn nữa.

Việc tự học thì mọi thứ chỉ toàn là lý thuyết và bạn không thể nào lên trình được nếu không thực chiến. Trong quá trình tự học HTML CSS và JS mình luôn luôn đặt câu hỏi cho bản thân như:

• Thẻ trong HTML này dùng để làm gì?
• Nó có công dụng gì?
• Tại sao phải đặt tên class như này nhỉ?
• Thuộc tính trong CSS là tại sao chỗ này phải dùng đoạn code này, chỗ kia phải dùng thuộc tính kia thì nó mới chạy
• …

Tự đặt câu hỏi rồi đi tìm câu trả lời với những trường hợp khác nhau sẽ giúp bạn hiểu rõ hơn về vấn đề, đây cũng là cách giúp bạn nhớ lâu hơn nhiều so với việc ngồi học thuộc như thời còn học sinh đi học.

Bước chuyển mình sang môi trường mới

Mình làm công ty nước ngoài hơn một năm thì mình nghỉ do công ty đã đầy đủ thiết kế và không còn tasks cho mình nữa. Sau đó mình apply vào công ty hiện tại – KTcity và làm cho đến bây giờ.

Khoảng thời gian giữa 2017 mình có làm việc trực tiếp với sếp (hiện tại) thông qua việc chỉnh sửa giao diện WordPress với các tuỳ biến giao diện (phải nói là thay đổi liên tục).

Mình live code (code trực tiếp) cho sếp nhìn, sếp nói tới đâu mình code tới đó một cách nhanh nhất và ưng mới thôi, lúc này khả năng tìm kiếm, trình độ code của mình tăng lên đáng kể.

Khi làm với WordPress, điển hình là với những công cụ builder kéo thả, nếu bạn muốn tối ưu lại thiết kế thì phải tùy biến lại CSS mà cấu trúc HTML của WordPress nó rất chi là rối và CSS cũng rất là loạn cho nên thời điểm này mình phải tìm hiểu thêm về WordPress cũng như tìm hiểu về độ ưu tiên trong CSS để có thể ghi đè code lên code của WordPress để code của mình có tác dụng.

Làm đi làm lại rất nhiều với nhiều template đa dạng của WordPress nên trình độ mình lên thêm 1 bậc ở môi trường mới, biết thêm cơ bản về WordPress và ngôn ngữ PHP luôn.

Thời điểm này mình vẫn còn làm JQuery, làm animation các kiểu tới 2018 mình mới bắt đầu tìm hiểu về Javascript thuần và cũng bắt đầu quá trình tự học JS (Javascript).

Sau đây là những nguồn mình đã tự học qua, bạn có thể tham khảo:

• Ebooks: Head First Javascript, Eloquent Javascript
• Blog (nước ngoài): medium, quora, scotchio, freecodecamp, javascriptissexy, toidicodedao, rithmschools …
• Khóa học (udemy): Javascript Complete Course, Understanding The Weird Part,…

Sau đó, mình áp dụng những kiến thức đã học đó vào những tính năng sếp mình yêu cầu thay vì dùng JQuery. Từ đó mình thấy thích thú với Javascript, mình tìm tòi & làm nhiều hơn về các nội dung chuyên sâu, học hỏi cách tối ưu để mở rộng nâng cao trình độ bản thân.

Viết blog chia sẻ học HTML, CSS, JS (Evondev Blog)

Vào tháng 7 năm 2018 mình đã bắt đầu cho ra đời blog mang personal brand của mình là evondev

Cảm thấy bản thân mình đã có kiến thức và kinh nghiệm thực chiến, đặc biệt là HTML CSS nên mình đã quyết định chia sẻ nhiều hơn trên blog.

Ngoài ra nhờ các kiến thức về UX/UI nên mình đã tối ưu lại để blog trở nên đẹp & clean hơn mà khi người dùng truy cập vào đều sẽ có cảm hứng để ở lại đọc, đó là yếu tố mình đặt lên hàng đầu sau kiến thức.

Lúc này trở ngại lớn nhất của mình là không biết viết và quảng bá blog như thế nào, vì xuất thân là dân dev nên những việc này với mình gần như “mù tịt”.

Nhưng không có việc gì khó mà mình không làm được, nhờ blog Kiemtiencenter mà mình đã học và cải thiện rất nhiều, minh chứng cho việc đó là thương hiệu Evondev được nhiều người trong lĩnh vực biết đến, thậm chí là cả những người không phải dev và mình có được hơn 35k pageviews mỗi tháng với các từ khóa chính đứng TOP Google.

Đồng hành cùng dự án hơn 60.000 người dùng

Gần cuối năm 2018 mình cũng học xong JS cơ bản và cũng áp dụng được sơ sơ, mình vẫn tiếp tục rèn luyện HTML CSS và JS tại codepen.io (một code editor online) dành cho các lập trình viên.

Sau đó mình tiếp tục tìm hiểu thêm về NodeJS và ReactJS

Vì mình thấy để trở thành Frontend Developer thì phải học thêm nhiều thứ nữa chứ không chỉ là học HTML, CSS, JS và mình đã tìm được một nguồn học rất chất lượng với các khoá học cực ngon nhưng giá thì không rẻ chút nào tại Wesbos.

Ở đây tuy giá khá cao, nhưng mình cảm thấy bản thân thật đúng đắn khi đầu tư vào kiến thức như thế và không tiếc tiền một chút nào cả.

Nhờ vậy mà qua tới 2019, lúc KTcity mới bắt đầu – Dự án mới áp dụng các công nghệ như ReactJS, NodeJS, NextJS. Mình và một anh bạn nữa tự học tự mò rồi cùng làm dựa vào các kiến thức học được từ các khoá học online và bằng tất cả sự nỗ lực của 2 người thì bọn mình cũng đã hoàn thành sản phẩm được như mong đợi cho đến bây giờ.

Quá trình làm khá gian nan do tự học tự mò, lỗi cũng nhiều nhưng đều cùng nhau giải quyết và giúp sản phẩm trở nên tốt nhất có thể và hiện tại đã có 60.000 người dùng.

Giao diện thì nhiều vô số kể nhưng mình rất thích làm vì mỗi giao diện có cái khó cái dễ khác nhau, với những năm đúc kết kinh nghiệm thực chiến mình rất tự tin và luôn hoàn thành deadline trong thời gian sớm nhất.

Làm ra một sản phẩm đẹp từ thiết kế cảm giác rất thích, đặc biệt là các thiết kế đẹp từ bạn Designer tài năng của công ty, vì mình cũng có học về thiết kế từ trước nên mình và bạn Designer làm việc rất ăn ý cũng như tin tưởng vào trình độ của nhau.

Launch khóa học HTML, CSS online đầu tiên

Tại thời điểm 2019 mình bắt đầu tham gia cộng đồng Frontend Việt Nam và bắt đầu chia sẻ các kiến thức tại blog của mình vào đó.

Mình thấy nhóm hoạt động rất mạnh và mình muốn chia sẻ nhiều hơn cho nên mình đã xin vào làm Mod cho nhóm đến tận bây giờ, chia sẻ những kiến thức, kỹ năng mà mình có được trong hơn 4 năm qua.

Thấu hiểu việc tự học và tiến bộ với nghề front end dev không hề đơn giản. Cùng với việc được nhiều người ủng hộ việc dạy học nên năm 2020 mình quyết định mở khóa offline đầu tiên và nó khá thành công, nhưng để đảm bảo chất lượng nên mình thường không nhận nhiều.

“Trời tính không bằng Covid tính” nên cũng trong năm 2020 mình đã chuyển hẳn sang dạy online qua Zoom và được các bạn trong cộng đồng hưởng ứng còn lớn hơn đợt trước, lượng học viên tham gia rất đông và đến bây giờ mình đã có tổng cộng là 7 lớp.

Tâm huyết của mình không dừng lại ở đó, song song với công việc chính vào ban ngày thì ban đêm là thời gian mình đầu tư vào những video chất lượng để ra mắt khóa học bằng video.

Vì mình cho rằng: Dạy offline hay qua Zoom, mình chỉ hướng dẫn được cho 1 số lượng học viên hạn chế cho mỗi lớp. Tuy nhiên, nếu có khóa học online bằng video, mình hoàn toàn có thể truyền tải kiến thức cho cho 1000-2000 bạn trong 1 năm.

Và thời gian gần đây, mình đã cho ra mắt khóa học HTML, CSS online tại KTcity với gần 120 videos. Khác với những nơi khác chỉ làm video 1 lần thì mình tập trung cuối tuần update kiến thức bằng những video mới để giúp cho việc học của bạn hiệu quả nhất có thể.

Nếu bạn muốn học có thể dùng coupon EVONTET để giảm giá thêm nhé

Trong quá trình làm cộng đồng, mình thấy nhiều bạn mới học code giao diện hoặc những người làm mà không có thời gian code các giao diện nho nhỏ như form, button, loading…

Lúc này, mình lại nảy ra ý tưởng xây dựng một trang web chia sẻ các giao diện như vậy kèm code cho họ tham khảo và lấy về sử dụng, và mình cũng đã hoàn thành nó tại codingui.dev với rất nhiều giao diện mà các bạn có thể vào xem bất kỳ lúc nào bạn muốn.

Ngoài blog ra, để đa dạng cách chia sẻ mình còn có kênh Youtube riêng là Evondev. Và mình cũng mới làm một trang web cá nhân nữa cũng khá là hịn hò tại evon.dev nhen. Các bạn có thể vào khám phá nà.

Facebook group là một cách để chia sẻ kiến thức nhanh dưới những bài viết ngắn, giúp những thành viên trong nhóm có thể tham khảo học hỏi cho nên là tất nhiên mình cũng đang xây dựng thêm một group riêng về Frontend trên Facebook, chia sẻ nhiều nội dung chất và hay trong này. Bạn có thể tham gia tại đây.

Lunch khoá học HTML CSS nâng cao

Sau thành công nho nhỏ của khoá học HTML CSS cơ bản, thì mình thấy nhiều bạn muốn nâng cao hơn nữa vì thế đầu năm nay 2021 mình cũng đã ra mắt thành công khoá học nâng cao và cũng được rất nhiều người ủng hộ. Nếu bạn thích học thì có nhấn vào đây để tham khảo nhé.

Phát triển Visual Studio Code Extension

Trong quá trình mình code với phần mềm VSCode thì mình thấy dùng những theme có sẵn đôi khi màu của nó không hợp với ý của mình cho nên mình đã tìm tòi và phát triển một theme cho riêng mình cũng như cộng đồng sử dụng với tên gọi là Evondev Dracula.

Dracula là vì mình phát triển dựa trên một theme nổi tiếng khác có tên là Dracula Official.

Nếu bạn sử dụng VSCode để code thì có thể gõ tên extension của mình Evondev Dracula trong mục Extensions để tìm và cài đặt sử dụng nhé.

Ngoài ra khi code HTML CSS, mình thấy có nhiều đoạn code mà chúng ta rất hay dùng đi dùng lại, mà phải mất công gõ đi gõ lại nữa. Để tiết kiệm thời gian cho việc đó và làm sao đó cho hiệu quả hơn thì mình cũng phát triển thêm một extension khác có tên là Evondev Snippets mà bạn cũng thể tham khảo và cài đặt cho VSCode nhé, nó sẽ giúp các bạn code CSS nhanh hơn nhiều lắm với hàng tá snippets rất hữu ích trong CSS.

Tạm kết

Bây giờ mình đã là một Frontend Developer, không còn là một người mới vào nghề như 3, 4 năm trước nữa, level lên càng cao thì công việc & trách nhiệm càng nhiều.

Bản thân mình vẫn chưa phải là giỏi giang gì nên mỗi ngày phải luôn update thêm cho bản thân những kiến thức mới, chinh phục những gì bản thân chưa làm được.

Tâm huyết của mình không chỉ là tương lai và sự phát triển của bản thân mà còn là bước tiến cho cộng đồng lập trình ở Việt Nam nữa.

Trên đây là toàn bộ quá trình về con đường tự học và đúc kết kinh nghiệm của mình trong 4 năm qua mà mình đã đạt được. Hy vọng nó sẽ là một phần động lực cho các bạn mới bước chân vào nghề như mình trước đây và giúp các bạn phấn đấu hơn và mau thành công hơn.