Trong thế giới hiện đại, ngày càng có nhiều người muốn học lập trình, trong khi họ không biết bắt đầu từ đâu, nhưng đồng thời, ngành CNTT là điều họ mơ ước vì trở thành lập trình viên web đang là mốt. Đối với nhiều người, nó định vị bước đầu tiên vào thế giới kỳ diệu này, chẳng hạn như các nhà phát triển web hoặc các nhà phát triển front-end cơ bản, phát triển front-end cơ bản. Tuy nhiên, bạn cần phải bắt đầu từ đâu đó trước khi có thể tìm được công việc mơ ước của mình. Đây là cuốn sách kiến thức dành cho người mới bắt đầu để bạn có được một số câu trả lời: Có khóa học miễn phí nào dành cho các nhà phát triển front-end không? Cách tự học trực tuyến, nơi tìm tài liệu học để thành thạo HTML, CSS và JavaScript. Nếu bạn biết HTML và CSS, bạn đã có thể ứng tuyển vào vị trí thiết kế bố cục web.
Những điều cơ bản về phát triển giao diện người dùng là gì?
Bước vào thế giới lập trình web có thể khó khăn đối với những người mới bắt đầu. Vì vậy, nhiều khái niệm nghe có vẻ lạ và trở thành vấn đề ở giai đoạn viết. Cách viết: nhà phát triển phần mềm hay nhà phát triển giao diện người dùng? Có thể là một nhà phát triển front-end hay đúng hơn là một kỹ sư phần mềm front-end? Tuy nhiên, phổ biến nhất là mục nhập gạch nối. Nhà phát triển front-end — người chịu trách nhiệm về phần hình ảnh của ứng dụng (những gì chúng tôi thấy, chúng tôi = người dùng của trang web).
Thông thường, nhà phát triển front-end làm việc với một nhà thiết kế đồ họa (nhà thiết kế web), người cung cấp thiết kế đồ họa. Thông thường, các nhà phát triển front-end có cơ hội làm việc với một nhà thiết kế UX, người đề xuất và tạo ra một nguyên mẫu của các tương tác sẽ diễn ra trên các trang web. Vai trò của các nhà phát triển front-end là tập hợp tất cả lại với nhau. Người ta thường nói rằng một nhà phát triển front-end có nhiệm vụ cắt một thiết kế đồ họa — chia thiết kế thành các phần nhỏ hơn và viết mã (HTML và CSS) thành các trang web mà người dùng cuối cùng sử dụng.
Sau đó, bằng cách sử dụng JavaScript, các tương tác đã đề cập trước đó đã được thêm vào. Trong khi HTML và CSS3 cho phép chúng tôi tạo chuyển tiếp mượt mà và hoạt ảnh cơ bản, JavaScript giới thiệu tất cả các tương tác người dùng trang nâng cao. Sử dụng JavaScript, chúng tôi sẽ thêm trình đơn thả xuống, thanh trượt trên trang, xác thực biểu mẫu, chuyển đổi giữa các trang con hoặc hoạt ảnh nâng cao và trò chơi 3D (ví dụ: sử dụng Babylon-JavaScript). Dữ liệu cho logic trong JavaScript từ back-end của ứng dụng, do đó là hợp tác front-end — back-end developer.
Các vị trí của nhà phát triển front-end sẽ khác nhau rất nhiều. Công việc của một nhà phát triển front-end trong một cơ quan tương tác và sáng tạo, một nhà phát triển front-end trong một công ty phát triển phần mềm, trông sẽ khác và một công việc khác cho một người làm việc phát triển front-end của một công ty khởi nghiệp .
Một nhà phát triển front-end từ việc cắt các dự án đồ họa có thể phát triển theo hướng Nhà phát triển JavaScript — một nhà lập trình web chủ yếu xử lý logic ứng dụng và các hoạt động JavaScript nâng cao. Ngoài ra, một nhà phát triển front-end thường (cũng như một nhà phát triển back-end) phải lập kế hoạch kiến trúc JavaScript của ứng dụng và lựa chọn có ý thức các khung và thư viện cho dự án.
Phát triển Front-End có dễ dàng không?
- Bạn có thể thấy hiệu quả nhanh chóng; không giống như học phát triển web / phát triển back-end, việc tạo các đoạn mã ngay cả trong HTML thuần túy ngay lập tức mang lại cho chúng ta hiệu ứng hình ảnh, thúc đẩy chúng ta tiếp tục làm việc.
- Ngưỡng đầu vào thấp — cần có tương đối ít kỹ năng front-end để bắt đầu sự nghiệp chuyên nghiệp ở vị trí thực tập hoặc vị trí cấp dưới ngay từ đầu.
- Rất nhiều lời mời làm việc cho học sinh lớp sau — đặc biệt là khi các kỳ nghỉ sắp đến, và có rất nhiều thực tập mùa hè.
- Độc lập — chúng tôi có thể tự tạo trang web cho chính mình và sau đó nhận đơn đặt hàng với tư cách là một freelancer. Xét cho cùng, trong phạm vi cơ bản, chúng ta sẽ có thể thiết lập các trang web đơn giản từ A đến Z.
Chúng ta cần gì để phát triển front-end?
Đây là công thức để thành công. Để tạo một trang web, bạn cần:
HTML + CSS
Đây là những thành phần cơ bản để xây dựng một trang web. HTML cung cấp cấu trúc của trang web — các phần tử được mô tả và CSS cho trình duyệt biết những phần tử này trông như thế nào. Khi bạn đã thành thạo HTML và CSS, bạn có thể tạo lại bất kỳ thiết kế (đồ họa) nào và biến nó thành một trang web.
JavaScript
Một ngôn ngữ phát triển front-end lập trình web để tạo trang web. Nhờ JavaScript, bạn thêm tính tương tác vào trang web của mình, tức là bạn phát triển các trang web phản hồi lại hành động của người dùng. Bạn thậm chí có thể xây dựng trò chơi. Chúng tôi khuyên bạn nên thành thạo ít nhất mã JavaScript cơ bản để hiểu cách hoạt động của ngôn ngữ hoặc logic của ngôn ngữ lập trình web. Sau đó, bạn có thể truy cập jQuery.
jQuery
Về mặt kỹ thuật, nó không phải là một ngôn ngữ mà là một thư viện JavaScript. Giống như một trung gian cho phép bạn viết JavaScript dễ dàng hơn và nhanh hơn. Bạn nhập mã jQuery; thư viện lo lắng cho bạn và chơi với người dịch để chuyển ý nghĩa của JavaScript hơi phức tạp sang trình duyệt. Mặc dù ngày nay jQuery đã "hơi cũ", nhưng chúng tôi khuyên bạn nên học nó "theo yêu cầu", nó giúp học logic lập trình web và Bootstrap (khung CSS được sử dụng) dễ dàng hơn và vẫn xuất hiện trong các thư mời làm việc.
Các khuôn khổ
Nhiệm vụ của họ là đơn giản hóa quá trình tạo trang web và ứng dụng bằng cách cung cấp các giải pháp sẵn sàng cho các vấn đề phổ biến nhất. Ngoài ra, chúng cung cấp một mẫu về cách phát triển mã của bạn một cách gọn gàng. Đối với người mới bắt đầu, chúng tôi khuyên bạn nên chọn một khung CSS, ví dụ: Bootstrap (các tùy chọn khác là: Foundation, Pure, YAML CSS), sau đó thêm một trong các khung JavaScript phổ biến hiện nay: Angular 4, ReactJS, Vue.js, Ember.js, Sao băng.js.
Git
Điều này không liên quan trực tiếp đến mã hóa web, mà chúng tôi hiểu rằng thường bị trì hoãn cho đến cuối cùng. Sai lầm, bạn bắt đầu sử dụng Git, hệ thống kiểm soát phiên bản càng sớm thì càng tốt. Đây là thứ tự chúng tôi đề xuất. Tất nhiên, bạn có thể làm điều đó hoàn toàn khác: bỏ qua jQuery và học Bootstrap ngay lập tức sau khi thành thạo các kiến thức cơ bản về HTML và CSS; tuy nhiên, chúng tôi khuyên bạn không nên đi quá xa trong việc đơn giản hóa và cắt bỏ việc tìm kiếm các giải pháp được viết bằng tay và không sử dụng prefabs từ một khuôn khổ hoặc học các khuôn khổ JavaScript mà hầu như không thể hiểu được một dòng trong JavaScript thuần túy.
Tôi bắt đầu từ đâu với phát triển giao diện người dùng?
Học thường xuyên và cố gắng áp dụng từng kỹ năng mới vào thực tế, ngay cả trong những đoạn mã nhỏ chỉ với một mục đích — để hiển thị những gì bạn vừa thành thạo. Chia sẻ chúng trên web. Hạn chế các nhóm động lực của bạn trên Facebook. Chỉ sau 3 giờ đọc những câu chuyện tạo động lực, bạn thường không có động lực hơn gấp 3 lần. Bạn thường có ít hơn 3 giờ cho việc học của mình.
Theo dõi thị trường và đọc các yêu cầu trong thư mời làm việc. Họ đang thay đổi! Chúng tôi viết bài này ngày hôm nay và có lẽ sẽ cần cập nhật nó trong một năm nữa khi công nghệ thay đổi. Sau khi bạn nắm được kiến thức cơ bản: HTML CSS JavaScript, một thứ gì đó mới chắc chắn sẽ trở thành xu hướng — hãy cập nhật danh sách "cần tìm hiểu" của bạn. Tìm kiếm các buổi hội thảo miễn phí (để học hỏi từ những người cố vấn và đồng thời có những mối liên hệ thú vị) và một cơ hội thực tập trong ngành càng sớm càng tốt. Công việc sẽ trở thành một giáo viên tốt nhất.
Ví dụ về phát triển front-end là gì?
HTML + CSS
Ba có lẽ là các trang web nổi tiếng nhất với các khóa học phát triển giao diện người dùng web tương tác. Miễn phí, được tổ chức tốt, họ truyền đạt kiến thức cho người mới bắt đầu rất dễ dàng. Họ tổ chức các khóa học tương tác trong trình duyệt. Chúng tôi không cần cài đặt bất cứ thứ gì tại nhà, chúng tôi chỉ cần thực hiện khóa học, và tiến độ của chúng tôi được đo lường ngay lập tức.
Học viện Khan, Codecademy và Homeschool
Khan Academy có tài liệu hoàn toàn miễn phí và cũng có tùy chọn sử dụng các ngôn ngữ web khác. Đây là một nền tảng giáo dục, không chỉ về phát triển web. Bạn có thể thực hiện nhiều tác vụ khác nhau, từ các phần tử cơ bản, bao gồm HTML và CSS, đến các tập lệnh JavaScript nâng cao hơn.
Codecademy có nhiều nội dung miễn phí và các lộ trình phát triển front-end thú vị được tạo sẵn chỉ dành cho người dùng chuyên nghiệp.
Code School - theo ý kiến của chúng tôi, khóa học được tổ chức tốt nhất. Chúng bao gồm video + một phần tương tác với các nhiệm vụ phát triển giao diện người dùng. Cấp độ đầu tiên của mỗi khóa học là miễn phí, nhưng rất tiếc, bạn phải trả phí cho phần còn lại. Tuy nhiên, ngay cả những phần miễn phí (thường khoảng 1 giờ) cũng đáng để xem.
Làm thế nào để chọn một khóa học để tham gia?
Xem tất cả ba nền tảng web. Các chủ đề chồng chéo lên nhau, nhưng điều đáng làm là phải xem xét một số chủ đề trùng lặp. Đầu tiên, sự lặp lại củng cố kiến thức và thứ hai, mỗi nền tảng front-end có một cách tiếp cận giảng dạy hơi khác nhau. Sự lựa chọn là của bạn. Vì vậy, nhiều người muốn trả tiền cho một khóa học Bootcamp hoặc phát triển web hàng tháng, vì họ có mọi thứ miễn phí trong tầm tay. Không có gì bất thường.
Điều tồi tệ nhất là chúng ta có nhiều tài liệu và muốn tìm hiểu mọi thứ chúng ta cần một cách nhanh chóng mà không cần kiểm tra hay chọn lọc — nhận mọi thứ trên khay và tiến thêm một bước xa hơn những tài liệu cơ bản. Do đó, chúng tôi hiểu rằng nếu bạn không có thời gian cho tất cả các khóa học front-end và việc ra quyết định không phải là sở trường của bạn, hãy xem Khan Academy: Giới thiệu về HTML CSS — Phát triển web.
JavaScript
Khóa học phát triển front-end của chúng tôi sẽ như thế nào nếu không sử dụng JavaScript? Các trang web tương tác ở trên là rất tốt. Họ có các khóa học JavaScript cho chúng tôi — hay, đơn giản, tiếc là không toàn diện lắm, nhưng tốt cho việc khởi động. Nếu bạn đã có những kiến thức cơ bản về HTML và CSS như vậy, bạn không cần phải bắt đầu với các đề xuất trước đó.
Để bắt đầu với 9 bài tập phát triển ngắn trong phần giới thiệu: bằng JavaScript, bạn có thể xây dựng dựa trên các chủ đề tương tự trong Udacity: JavaScript Intro, sau đó (hoặc ngay lập tức) chuyển sang một nhóm nhiệm vụ lớn hơn: HTML / JavaScript: Tạo trang web tương tác Các trang.
jQuery
Một bước nữa trên con đường giao diện người dùng của chúng tôi, nhưng cực kỳ tùy chọn. Hiện tại, một khóa học phát triển front-end có thể thực hiện mà không cần jQuery. Đặc biệt là vì ngày nay có nhiều lựa chọn mới thú vị dành cho các nhà phát triển front-end, chúng tôi đã xem xét các đề nghị tuyển dụng và nó vẫn đáng có trong kho.
Có, Học viện Khan và Codecademy có các khóa học jQuery. Tuy nhiên, trong trường hợp này, tôi muốn giới thiệu — một khóa học phát triển front-end của jQuery Pluralsight (trước đây là Code School) kéo dài một giờ và hoàn toàn miễn phí.
Khung học tập
Ở giai đoạn này, bạn có thể tự mình chọn tài liệu giao tiếp và đánh giá mức độ phù hợp của chúng với kiến thức của bạn. Khi nói đến khung Bootstrap, việc xây dựng một trang web dựa trên lưới 12 cột và kiến thức này là cơ bản để hiểu phần còn lại trong thực tế. Bootstrap cho phép bạn tạo các trang web đáp ứng (RWD) một cách nhanh chóng — tức là được điều chỉnh cho các thiết bị di động. Nếu bạn thích học theo hình thức hướng dẫn: Khóa học bootstrap có sẵn tại học viện Code và với Daily Web, bạn sẽ tạo thanh trượt bootstrap đầu tiên của mình sau 30 phút.
JavaScript khung
Hiện tại, một khóa học phát triển front-end phù hợp chắc chắn sẽ giới thiệu các khung JavaScript hiện đang được sử dụng và ít nhất là dạy một. Bạn có thể tìm thấy các khóa học tương tác với các khuôn khổ trên Pluralsight (trước đây là Code School), miễn phí trong 14 ngày. Bạn có thể tìm thấy một bộ sưu tập tài liệu miễn phí rất phong phú trên scotch.io. Mặt khác, hủy đăng ký nơi bạn sẽ tìm thấy các khóa học phát triển front-end miễn phí cho mỗi khung công tác là một chủ đề cho một bài đăng riêng biệt.
Có rất nhiều người trong số họ. Sự lựa chọn rất khó, và việc tìm hiểu tất cả chúng là điều không thể. Cho dù bạn chọn bắt đầu với điều gì, chỉ cần bám vào nó. Đừng nhảy từ hoa này sang hoa khác vì sau một tuần học phát triển web; ai đó sẽ nói với bạn rằng cái khác tốt hơn. Tìm hiểu cái đầu tiên và viết một ứng dụng web đơn giản trên đó. Thông thường, các ứng dụng như lập kế hoạch, danh sách việc cần làm và tin tức xếp hạng được khuyến khích cho người mới bắt đầu. Tất cả những gì bạn cần là tên của khung và tên của ứng dụng web bạn muốn tạo.
Ví dụ về các khóa học miễn phí:
- AngularJS
- Angular 2+ (hiện tại là 6 — nhưng 4/5 chỉ là một phiên bản phát triển front-end khác)
- ReactJS
- Vue.js
- Ember.js
Nó có phải là kết thúc? Không! Đây là một khởi đầu tuyệt vời và là nền tảng vững chắc cho Junior Front-End Developer.
Điều gì tiếp theo sau các khóa học này?
Bắt đầu bằng cách làm việc trên các dự án web của bạn. Như chúng tôi đã viết ở phần đầu, hãy ghi lại công việc của bạn từ những bước phát triển front-end đầu tiên và đặt mã trên GitHub, ngay cả khi nó không lý tưởng.
Bạn có muốn thử sức mình không?
Cách tốt nhất để củng cố những gì bạn đã học là thông qua thực hành. Trải qua khóa học front-end là một chuyện, nhưng chỉ làm việc trên các dự án web của bạn mới dạy bạn viết mã — để tự giải quyết vấn đề. Tạo một biểu mẫu (trang đích) qua đó bạn có thể gửi email cho tác giả của trang.
Tạo trang web danh thiếp của bạn - danh mục đầu tư - hãy nghĩ đến việc sử dụng JavaScript để điền vào bảng bằng chuỗi Fibonacci, thanh trượt của bạn hoặc một trò chơi đơn giản từ đầu. Hãy nghĩ rằng bạn đã có kỹ năng viết mã nhưng không có kỹ năng đồ họa, vì vậy sự phát triển bạn làm là "xấu xí"? Không có chi! Chọn một thiết kế đồ họa sẵn sàng, ví dụ: từ Thử thách nhà phát triển hàng tuần và cố gắng tạo ra nó.
Mất bao lâu để học những điều cơ bản?
Nó phụ thuộc vào bạn. Kỷ luật là quan trọng nhất. Hầu hết mọi người đều cảm thấy khó khăn hơn khi học một ngôn ngữ lập trình web nhưng lại dành thời gian để tham gia các khóa học không tốn tiền. Việc nắm vững các kiến thức cơ bản để thiết lập trang web đầu tiên của bạn có thể mất khoảng 1-3 tháng, tùy thuộc vào mức độ tham vọng của bạn trong việc phát triển front-end.
Để thành thạo JavaScript, tôi sẽ thêm 3 tháng học tập chăm chỉ nữa. Tôi giả sử bạn đang đi làm, vì vậy bạn sẽ dành khoảng 5-10 giờ mỗi tuần để học, tức là, ít nhất 1 giờ mỗi ngày. Bạn sẽ không trở thành chuyên gia front-end trong sáu tháng, nhưng đó là thời gian đủ để tạo cơ sở cho việc học hỏi thêm.
Tìm kiếm sự trợ giúp trực tuyến
Nhiều hơn một lần trong khi học, bạn sẽ gặp vấn đề: Làm thế nào để căn giữa một phần tử? Tại sao tập lệnh này không hoạt động? HTML và CSS trông khác trên Chrome so với trên Firefox. Làm thế nào để trở thành một chuyên gia trong phát triển front-end?
Điều này là bình thường, nhưng những người hỏi không sai.
- Google —ask Uncle Google, tốt nhất là bằng tiếng Anh.
- Stack Overflow — có thể sẽ là người đầu tiên bật lên phản hồi từ Stack Overflow. Đó là cổng thông tin dành cho nhà phát triển web, nơi người dùng đăng các câu hỏi liên quan đến ngôn ngữ lập trình web và những người khác (thường là các lập trình viên web có kinh nghiệm hơn) cố gắng cung cấp cho bạn câu trả lời về phát triển giao diện người dùng. Các giải pháp tốt nhất trước đây là điểm và tác giả của câu hỏi có thể đánh dấu nhận xét đã giải quyết được vấn đề của mình. Đôi khi có một vài hoặc một tá giải pháp, vì vậy bạn nên đọc tất cả chúng và kiểm tra chúng tại chỗ của mình. Nếu bất kỳ giải pháp nào giúp ích cho bạn, hãy bỏ phiếu — cho nó một mũi tên hướng lên.
- Facebook —các nhóm phát triển đầu cuối trên FB dành cho người mới bắt đầu có thể giúp bạn rất nhiều, đặc biệt khi bạn không biết cách hỏi về vấn đề của mình. Tải lên màn hình và mã của bạn. Đừng mong đợi ai đó viết nó cho bạn, nhưng những bình luận chắc chắn sẽ dẫn bạn đi đúng đường. Thật không may, với những câu hỏi đơn giản tầm thường, mọi người sẽ luôn viết ra điều gì đó khó chịu — thật khó, hãy kiên nhẫn. Chúng tôi đề xuất nhóm Web — hỗ trợ bắt đầu là tốt nhất cho các câu hỏi liên quan đến khởi động và người kiểm duyệt đảm bảo rằng không có sự thù ghét.
- CanIUse —nếu vấn đề của bạn liên quan đến việc CSS không hoạt động trên một trong các trình duyệt của bạn, hãy đảm bảo rằng những gì bạn đang sử dụng được hỗ trợ cho phiên bản bạn đang kiểm tra. Bằng cách này, bạn sẽ tránh được việc tìm kiếm lâu và tẻ nhạt cho các vấn đề giao diện người dùng ma.
Sự kết luận
Vì vậy, trong bài viết này, bạn đã hiểu thêm về thế giới CNTT và chúng tôi rất vui nếu có thể giúp bạn định hướng. Thế giới front-end rất rộng lớn và người mới bắt đầu có thể dễ dàng bị lạc vào đó, nhưng chúng tôi tập trung vào việc giúp mọi người đi đúng đường. Nhưng cũng lưu ý rằng ngoài các ngôn ngữ web truyền thống, có một ngôn ngữ lập trình web không mã . Cho đến khi các công cụ không có mã trở nên phổ biến rộng rãi, việc phát triển ứng dụng web được thực hiện độc quyền bởi các lập trình viên web.
May mắn thay, thời gian không còn nhiều và bây giờ bất kỳ sinh viên nào thông thạo tài liệu này đều có thể tạo ứng dụng web hoặc trang đích của họ. Sau khi học những kiến thức cơ bản, thậm chí ở mức kiến thức, HTML và CSS, bạn đã có thể tìm được công việc mơ ước của mình. Nhiều nhà khoa học đã ghi nhận rằng ngôn ngữ lập trình web cải thiện khả năng của con người và góp phần phát triển các kỹ năng mềm. Cuối cùng, đây là sự độc lập về tài chính của bạn. Chúng tôi biết những người khác từ thế giới front-end, những người đã khởi động các công ty khởi nghiệp của họ và làm những việc cần thiết cho hành tinh của chúng ta.
Và, tất nhiên, cách tiếp cận như vậy có lợi thế:
- Dễ sử dụng và sức mạnh tuyệt vời.
- Thư viện mẫu tuyệt vời.
- Hỗ trợ cài đặt các thông số khác nhau.
Không có mã hoặc ngôn ngữ lập trình trực quan là một cách tiếp cận mới mà bạn không phải viết mã từ đầu. Chúng tôi khuyến khích bạn sử dụng các công cụ có giao diện đồ họa, đây là tương lai của phát triển web. Các ứng dụng web front-end truyền thống là những thứ hay ho, nhưng chúng tôi nghĩ rằng bạn cần phải đổi mới, vì vậy sản phẩm của chúng tôi có thể hữu ích cho bạn. Chúng tôi chân thành mong muốn tìm ra con đường đúng đắn để làm chủ nghề lập trình viên. Con đường này tuy nhiều chông gai nhưng nếu bạn làm chủ được nó, nó sẽ khiến bạn hài lòng cả cuộc đời mà bạn đã bỏ ra trong thời gian này.
