Front-End Web Developers

**1. Làm Front-End Web Developers là làm gì? **

• Front-End phát triển web tạo ra các trang web về phía người dùng sử dụng. Họ làm việc với các nhà thiết kế web để tạo ra những trải nghiệm tương tác tuyệt vời mà làm cho các web môi trường gây nghiện như ngày hôm nay. Khi bạn nhấp vào trang web này, các máy chủ Udacity gửi thông tin vào máy tính của bạn, sau đó chuyển thành các trang web mà bạn đang nhìn thấy ngay bây giờ. Ai đã viết code mà? Một Front-End Web Developer.

• Front-End phát triển Web xây dựng các trang tĩnh, như thế này, cũng như các ứng dụng web động như Twitter, Facebook và Google Docs....

• Chịu trách nhiệm cho việc thiết kế và phát triển của người dùng mã phải đối mặt.

• Tối ưu hóa các ứng dụng web để tối đa hóa tốc độ và khả năng mở rộng.

• Tạo nhanh chóng, dễ dàng sử dụng các ứng dụng và phát triển nguyên mẫu một cách nhanh chóng.

• Xây dựng tuyệt vời, trải nghiệm người dùng nhập vai.

• Nghĩ rằng bạn đã sẵn sàng để xây dựng các trang web tuyệt vời tiếp theo?

2. Những gì cần học để trở thành một front-end

Ngôn ngữ

HTML

HTML là lần đầu tiên trong ba ngôn ngữ lớn, bạn cần phải học để làm cho trang web HTML, CSS và JavaScript. HTML không phải là một ngôn ngữ lập trình cho mỗi gia nhập. Nó mô tả cách các yếu tố trên một trang web nên được đặt ra và cung cấp các trình duyệt với một danh sách tất cả các tập tin khác, như CSS và JavaScript, rằng các trang web cần. Bạn có thể nghĩ về HTML như các kế hoạch chi tiết của một ngôi nhà. Nó sẽ cho bạn biết làm thế nào lớn các phòng đều có và những gì cần được bên trong chúng. Nhưng nó không cho bạn biết làm thế nào họ nên xem xét.

CSS

Nếu HTML mô tả cách bố trí của một ngôi nhà, CSS mô tả cái nhìn của một nhà. CSS, hay Cascading Style Sheets, chịu trách nhiệm về cách trang web tìm kiếm. Màu sắc, phông chữ, và thậm chí một số hình ảnh động được điều khiển bằng CSS. Giống như HTML, CSS không phải là một ngôn ngữ lập trình. Đó là một tài liệu văn bản mà đọc như hướng dẫn thiết kế nội thất của để làm một trang web tuyệt vời.

JAVASCRIPT

Trong ba ngôn ngữ web lớn, JavaScript là người duy nhất được coi là một ngôn ngữ lập trình thực tế. JavaScript khiển tương tác trên một trang web. Nó giống như một người siêng năng có thể phá đổ bức tường, xây dựng phòng mới và trang trí lại ngôi nhà của bạn. Để có một trang web tĩnh đơn giản, bạn sẽ không cần phải sử dụng nhiều JavaScript. Nhưng đối với một ứng dụng web năng động, bạn sẽ cần một sự hiểu biết sâu sắc về ngôn ngữ.

Kỹ thuật thiết kế Web

THIẾT KẾ ĐÁP ỨNG

Mở một trang web và làm cho trình duyệt của bạn nhỏ hơn. Đã làm các nội dung trang thay đổi bố cục của nó để phù hợp với màn hình mới? Đó là thiết kế đáp ứng. Người ta hy vọng trang web hiện đại để nhìn tuyệt vời trên điện thoại của họ và trên máy tính xách tay của họ. Nguyên tắc thiết kế đáp ứng, bạn sẽ tìm hiểu làm thế nào để làm cho trang web mà quy mô và điều chỉnh để cung cấp những trải nghiệm tuyệt vời bất kể các thiết bị.

NGÔN NGỮ THIẾT KẾ HIỆN ĐẠI

Một ngôn ngữ thiết kế là một tập hợp các nguyên tắc được sử dụng để tổ chức và thống nhất thiết kế của một sản phẩm. Google, ví dụ, gần đây đã phát hành các thông số kỹ thuật cho thiết kế Vật liệu, một ngôn ngữ thiết kế hiện đại cho các trang web đáp ứng và ứng dụng di động. Thiết kế chất liệu đặt trọng tâm vào việc sử dụng các lớp mà nhìn và cư xử như thể chúng đã được thực hiện với giấy thủ công màu. Một ngôn ngữ thiết kế sẽ giúp bạn tạo gắn kết, kinh nghiệm trực quan cho người dùng của bạn.

FRAMEWORKS

Bootstrap là một ví dụ tốt về điều này. Khung làm cho nó dễ dàng để cấu trúc và xây dựng trang web. Họ cung cấp các lớp CSS tùy chỉnh để đảm bảo rằng nội dung của bạn sẽ rất tốt không có vấn đề thiết bị. Khung có thể giúp bạn thực hiện theo ngành công nghiệp thực hành tốt nhất và các nguyên tắc thiết kế hiện đại. Các khuôn khổ khác, như Foundation, cung cấp cùng một loại cấu trúc cho các trang web của bạn.

Các ứng dụng Web

KHUÔN KHỔ JAVASCRIPT / KHUÔN MẪU

Bạn biết làm thế nào trang Facebook của bạn có cùng một bố trí chính xác như tất cả các trang của bạn bè? Đó là bởi vì các công cụ khuôn mẫu. Công cụ khuôn mẫu là chìa khóa cho việc tạo ra các trang web động dựa trên dữ liệu mà họ kéo từ các máy chủ back-end. Hiểu được cách sử dụng một template là bước đầu tiên trong việc xây dựng một ứng dụng web.

Kỹ năng ngoại vi

KIỂM SOÁT MÃ NGUỒN

Với các dự án phức tạp, làm thế nào để bạn duy trì mã của bạn? Phiên bản phần mềm điều khiển như Git giúp các nhà phát triển phần mềm trên toàn thế giới tiết kiệm và duy trì mã của họ, ngay cả khi các dự án phát triển đến hàng trăm nhà phát triển và hàng chục các tiểu dự án.

HIỆU SUẤT WEB

Một khi bạn đã thực hiện trang web của bạn, làm thế nào bạn sẽ đảm bảo nó nhanh chóng? Bằng cách hiểu một vài nguyên tắc đơn giản trong việc xử lý của trình duyệt, bạn sẽ có thể để đảm bảo rằng bạn cung cấp nhanh chóng, hiệu quả cho người sử dụng các trang web của bạn.

** 3. Top 10 framework Phát triển Front-End 2015**

1. Bootstrap - http://getbootstrap.com/

Bootstrap chắc chắn là các khuôn khổ phổ biến nhất và sử dụng rộng rãi, ngày nay. Đó là một bộ thiết kế web đẹp, trực quan và mạnh mẽ để tạo qua trình duyệt, giao diện tìm kiếm phù hợp và tốt. Nó cung cấp rất nhiều các thành phần giao diện người dùng phổ biến với một phong cách đồng bằng, một hệ thống lưới điện và plugins JavaScript cho các kịch bản phổ biến.

Nó được xây dựng với LESS và bao gồm bốn phần chính:

• Scaffolding : - phong cách toàn cầu, đáp ứng lưới 12 cột và bố cục. Ghi nhớ rằng Bootstrap không bao gồm các tính năng đáp ứng theo mặc định. Nếu thiết kế của bạn cần phải được đáp ứng, bạn phải kích hoạt chức năng này bằng tay.

• Base CSS - điều này bao gồm các phần tử HTML cơ bản như bảng, biểu mẫu, các nút, và hình ảnh, phong cách và tăng cường với các lớp học mở rộng.

• Components - bộ sưu tập của các thành phần tái sử dụng như dropdowns, button groups, navigation controls (tabs, pills, lists, breadcrumbs, pagination),thumbnails, progress bars, media objects, và nhiều hơn nữa.

• JavaScript - jQuery plugin mà đưa những thành phần trên vào cuộc sống, plus transitions, modals, tool tips, popovers, scrollspy (cho tự động cập nhật các mục tiêu nav dựa trên vị trí di chuyển), carousel, typeahead (một thư viện tự động hoàn chỉnh nhanh chóng và đầy đủ tính năng), affix navigation, và nhiều hơn nữa.

Bootstrap là đã đủ mạnh để trao quyền cho bất kỳ giao diện web. Nhưng để sử dụng nhiều hơn của nó và làm cho quá trình phát triển dễ dàng hơn, bạn có thể tìm thấy rất nhiều công cụ và nguồn lực bổ sung cho nó. Một số trong số họ được liệt kê dưới đây:

• jQuery UI Bootstrap - một nguồn tài nguyên tuyệt vời cho jQuery và người hâm mộ Bootstrap kết hợp sức mạnh của cả hai. Nó mang đến cho độc đáo các slickness của Bootstrap để jQuery UI widget.

• jQuery Mobile Bootstrap Theme - tương tự với chủ đề jQuery UI trên, đây là một chủ đề được xây dựng cho jQuery Mobile. Nó là một nguồn tài nguyên hữu ích nếu bạn có một trang web front-end được xây dựng với Bootstrap và muốn cung cấp một cái nhìn tương tự cho điện thoại di động.

• Fuel UX - điều này kéo dài Bootstrap có thêm điều khiển JavaScript nhẹ. Thật dễ dàng để cài đặt, tùy chỉnh, cập nhật và tối ưu hóa.

• StyleBootstrap.info - Bootstrap có Customizer riêng của mình nhưng StyleBootstrap là một trong những chi tiết hơn với các bộ chọn màu sắc và khả năng để tạo kiểu cho mỗi thành phần khác nhau

• BootSwatchr - một chủ đề con lăn Bootstrap cho thấy kết quả ngay lập tức thay đổi của bạn. Đối với mọi phong cách được tạo ra, các ứng dụng tạo ra một URL duy nhất trong trường hợp bạn muốn chia sẻ nó với những người khác hoặc trả lại và chỉnh sửa bất cứ lúc nào sau đó.

• Bootswatch - một bộ tốt đẹp của chủ đề miễn phí cho Bootstrap.

• Bootsnipp - một bộ sưu tập tốt của các yếu tố thiết kế và các đoạn mã HTML cho

• Bootstrap. Nó cũng cung cấp hình thành và xây dựng nút.

• LayoutIt - kéo và thả giao diện người xây dựng dựa trên các yếu tố và các thành phần của Bootstrap. Nó giúp bạn soạn thiết kế trực quan của bạn bằng cách đặt và sắp xếp các yếu tố khác nhau vào bố cục của bạn bằng cách kéo và thả và sau đó cho phép bạn chỉnh sửa các thuộc tính của họ. Bạn nhận được các mã cơ sở và sau đó mở rộng nó. Đơn giản và dễ dàng.

2. Fbootstrapp - http://ckrack.github.io/fbootstrapp/

Fbootstrapp dựa trên Bootstrap và cung cấp cho bạn các chức năng tương tự cho các ứng dụng iframe Facebook và thiết kế. Nó bao gồm các cơ sở CSS và HTML cho tất cả các thành phần tiêu chuẩn như kiểu chữ, hình thức, các nút, bảng, lưới, chuyển hướng (typography, forms, buttons, tables, grids, navigation) và nhiều hơn nữa, mang phong cách điển hình trong Facebook xem và cảm nhận.

3. BootMetro - http://aozora.github.io/bootmetro/

BootMetro là một khuôn khổ lấy cảm hứng từ Metro UI CSS, được xây dựng trên đầu trang của Bootstrap, tạo website Metro / Windows 8 theo kiểu. Nó bao gồm tất cả các tính năng của Bootstrap cộng với một số tính năng bổ sung thêm như tiled pages, an application bar và nhiều hơn nữa.

4. Kickstrap - http://getkickstart.com/

Đơn giản chỉ cần đặt, Kickstrap là một loại Bootstrap trên steroid. Nó sử dụng Bootstrap là cơ sở của nó và mở rộng thêm với nhiều ứng dụng, chủ đề và tính năng bổ sung. Điều này làm cho khuôn khổ một bộ hoàn chỉnh để xây dựng các trang web mà không cần cài đặt gì. Chỉ cần đặt nó trong trang web của bạn và bạn đã sẵn sàng để đi.

Apps chỉ bó JavaScript và CSS file đó chạy với nhau như là một gói sau khi trang của bạn đã hoàn tất tải. Một số các ứng dụng bao gồm theo mặc định là Knockout.js, Retina.js, Firebug Lite, và Updater. Và bạn có thể thêm nhiều hơn nữa.

Chủ đề cho bạn khả năng để phân biệt từ cái nhìn chuẩn nhất các trang web Bootstrap 'và cảm nhận.

Extras là những bổ sung quạt tạo ra để mở rộng thư viện Bootstrap UI. Họ thường sử dụng các cú pháp tương tự hoặc tương tự.

5. Foundation - http://foundation.zurb.com/

• Foundation là một, tính năng phong phú, đáp ứng khung front-end mạnh mẽ. Với Foundation bạn có thể nhanh chóng chế tạo thử nghiệm và xây dựng trang web hay các ứng dụng làm việc trên bất kỳ loại thiết bị, với vô số cấu trúc bố trí bao gồm, các yếu tố và thực hành tốt nhất. Nó được xây dựng với điện thoại di động đầu tiên trong tâm trí, utilitizes đặc trưng ngữ nghĩa, và sử dụng Zepto thay vì jQuery để mang lại trải nghiệm người dùng tốt hơn và hiệu suất nhanh hơn.

• Quỹ có 12 cột linh hoạt, nestable lưới mạnh mẽ, đủ để cho phép bạn nhanh chóng tạo ra bố cục đa thiết bị. Xét về tính năng nó cung cấp nhiều. Có phong cách cho kiểu chữ, các nút, hình thức, và điều khiển chuyển hướng khác nhau(ypography, buttons, forms, and various navigation controls). Nhiều thành phần CSS hữu ích được cung cấp như bảng, bảng giá, thanh tiến trình, bảng biểu, hình thu nhỏ, và video flex có thể quy mô đúng video của bạn trên bất kỳ thiết bị (panels, pricing tables, progress bars, tables, thumbnails, and flex video that can scale properly your video on any device). Và, tất nhiên, plugins JavaScript bao gồm dropdowns, joyride (một đơn giản và dễ dàng tham quan website), Magellan (một chuyển hướng dính cho biết bạn đang ở đâu trên trang), orbit (một thanh trượt hình ảnh đáp ứng với sự hỗ trợ cảm ứng), reveal (để tạo ra hộp thoại modal hay cửa sổ pop-up), sections (một thay thế mạnh mẽ cho accordions truyền thống và các tab), và tooltips.

• Framework cũng cung cấp nhiều tiện ích hữu ích:

• Stencils - tất cả các yếu tố giao diện người dùng có sẵn trong Foundation trong một hình thức của giấy nến OmniGraffle và PDF vector để xây dựng wireframes và mô hình nhanh hơn và dễ dàng hơn.

• HTML Templates - thuận tiện, sẵn sàng để đi bố trí cho các bạn nhanh chóng bắt đầu từ và xây dựng trên. Để sử dụng chúng, bạn chỉ đơn giản là lấy mã và thả vào giữa thẻ của trang.

• Fonts Icon - đây là những bộ biểu tượng tùy chỉnh các biểu tượng pictographic được lưu trữ trong một phông chữ web tiện dụng.

• SVG Social Icons - một tập hợp các biểu tượng xã hội thông tin độc lập.

• Responsive Tables - cơ chế của bảng đáp ứng của Quỹ là để có những cột đầu tiên và "pin" nó vào bên trái của bảng, do đó cho phép bạn di chuyển các cột khác theo nó.

• Off-Canvas Layouts - những bố cục cho phép bạn để giữ cho nội dung hoặc định hướng trên các thiết bị di động ẩn cho đến khi một trong hai kích thước màn hình lớn hơn cho phép nó để được nhìn thấy hoặc một người dùng hành động để lộ nó. Và khi người cuối cùng sẽ xảy ra nội dung hoặc định hướng các slide vào xem.

Như bạn có thể thấy, Foundation là giống như một kho tàng cho các nhà phát triển web / thiết kế. Và để có được những gì bạn cần, bạn có thể sử dụng các tùy biến để xây dựng tải tùy chỉnh của bạn.

6. GroundworkCSS - http://groundwork.sidereel.com/

GroundworkCSS là một khung mới, ngoài khung front-end. Đó là một phản ứng đầy đủ HTML5, CSS và bộ công cụ JavaScript xây dựng với sức mạnh của Sass và Compass đó cung cấp cho bạn khả năng để nhanh chóng tạo thử nghiệm và xây dựng trang web và các ứng dụng làm việc trên hầu như bất kỳ thiết bị.

Nó cung cấp một, nestable, phần dựa trên hệ thống lưới dịch cực kỳ linh hoạt giúp tạo bố trí bất kỳ có thể. GroundworkCSS có một số tính năng thật sự diễn cảm như máy tính bảng và các lưới điện thoại di động mà duy trì các cấu trúc cột lưới thay vì sụp đổ các cột lưới vào hàng cá nhân khi viewport là dưới 768 hoặc 480 pixels. Một tính năng thú vị là một plugin jQuery ResponsiveText cho phép bạn để có văn bản tự động có kích thước thích hợp với chiều rộng của khung nhìn: cực kỳ hữu ích cho các tiêu đề mở rộng và xây dựng các bảng đáp ứng.

Khung bao gồm một tập hợp phong phú của các thành phần giao diện người dùng như tabs, responsive data tables, buttons, forms, responsive navigation controls, tiles (một thay thế tuyệt đẹp để các nút radio và nhàm chán yếu tố hình thức tiêu chuẩn khác), tooltips, modals, Cycle2 (một mạnh mẽ, đáp ứng nội dung trượt), và nhiều yếu tố và người trợ giúp hữu ích hơn. Nó cũng cung cấp một bộ tốt đẹp của biểu tượng xã hội vector và một bộ đầy đủ các biểu tượng pictographic trong FontAwesome.

Để xem các khuôn khổ trong hành động mà bạn có thể sử dụng các resizer tại các trung tâm hàng đầu của cửa sổ trình duyệt. Bằng cách này bạn có thể kiểm tra khả năng đáp ứng của các thành phần chống lại các kích cỡ và khung nhìn trong khi khám phá các tính năng của khuôn khổ khác nhau.

GroundworkCSS là rất tốt tài liệu với nhiều ví dụ, và để giúp bạn bắt đầu một cách nhanh chóng khuôn khổ cũng cung cấp cho bạn một số mẫu đáp ứng. Điều duy nhất tôi xem xét như là một điểm yếu là mất tích một cách để tùy chỉnh tải của bạn.

7. Gumby - http://www.gumbyframework.com/

Gumby là đơn giản, linh hoạt, mạnh mẽ và khuôn khổ front-end được xây dựng với Sass và Compass.

Bố trí cố định của nó tự tối ưu hóa nội dung cho máy tính để bàn và các nghị quyết thoại di động. Nó hỗ trợ nhiều loại lưới, bao gồm cả những cột lồng nhau, với các biến cột khác nhau. Gumby có hai mẫu PSD mà bạn bắt đầu thiết kế trên 12 và 16 hệ thống lưới cột.

Khung cung cấp tính năng phong phú UI Kit bao gồm cácbuttons, forms, mobile navigation, tabs, skip links, toggles and switches, drawers, responsive images, retina images và nhiều hơn nữa. Theo các xu hướng thiết kế mới nhất của các yếu tố giao diện người dùng phong cách Metro có thiết kế phẳng nhưng bạn có thể sử dụng khá phong cách với thiết kế độ dốc quá, hoặc để trộn lên cả hai phong cách như bạn muốn. Một bộ tuyệt vời của phản ứng, biểu tượng Entypo độ phân giải độc lập, để bạn có thể sử dụng trong các dự án web của bạn, hoàn toàn được tích hợp vào các Gumby Framework.

Gumby cũng có một tùy biến rất tốt với các bộ chọn màu giúp bạn xây dựng tải tùy chỉnh của bạn một cách dễ dàng.

8. HTML KickStart - http://www.99lime.com/elements/

HTML KickStart là một HTML5, CSS và bộ công cụ jQuery-powered cho dễ dàng tạo ra bất kỳ loại bố trí. Nó cung cấp trong sạch, tuân thủ tiêu chuẩn và cross-browser mark-up.

Khung có phong cách cho grids, typography, forms, buttons, tables or lists and cross-browser web elements like a JavaScript slideshow, tabs, breadcrumb navigation, menus with sub-menus, tooltips và nhiều hơn nữa.

Bạn có thể sử dụng 99Lime UIKit tại link http://www.99lime.com/uikit/ đó có tất cả các yếu tố giao diện người dùng của HTML KickStart sẵn sàng để được sử dụng trong wireframes của bạn.

9. IVORY - http://weice.in/ivory/

IVORY là một khung nhẹ, đơn giản và mạnh mẽ mà có thể xử lý bố trí đáp ứng từ 320px đến 1200px chiều rộng. Nó được đóng gói với 12 cột lưới rộng dịch, phong cách cho kiểu chữ và một số thành phần giao diện người dùng thiết yếu như like buttons, toggle-switches, accordions, tabs, tooltips và nhiều hơn nữa.

IVORY là một sự lựa chọn hoàn hảo khi bạn cần một đơn giản và linh hoạt, giải pháp đa thiết bị, và thiết kế của bạn không đòi hỏi thêm chức năng mà các khuôn khổ khác cung cấp.

10. Kube - https://imperavi.com/kube/

Cuối cùng, nếu bạn cần một cơ sở nhưng đơn giản mà không phức tạp và tính năng bổ sung không cần thiết, cho dự án mới của bạn, Kube có thể là sự lựa chọn đúng. Kube là một khung tối thiểu, đáp ứng và thích nghi với phong cách không áp đặt mà cung cấp cho bạn sự tự do để tạo ra. Nó cung cấp các phong cách cơ bản đối với grids, forms, typography, tables, buttons, navigation, and other stuff like links or images.

Khung chứa một tập tin CSS nhỏ gọn cho việc xây dựng bố trí đáp ứng một cách dễ dàng và hai tập tin JS để thực hiện các tab và các nút trong các thiết kế của bạn. Nếu bạn đang tìm kiếm sự linh hoạt tối đa và tùy biến, bạn có thể tải về phiên bản phát triển, bao gồm các tập tin LESS, với các biến, mixins và mô-đun.

Lời kết

Tôi hy vọng rằng bây giờ, sau khi đọc bài viết này, bạn có một cái nhìn tốt hơn về những lựa chọn khác nhau có sẵn cho bạn cho các dự án tiếp theo của bạn. Tôi đã cố gắng để đặt ở đây phổ biến nhất, tính năng phong phú, khung cấu trúc tốt và hứa hẹn mà tôi biết tại thời điểm viết bài này. Tuy nhiên, như bạn đã biết những điều có được thay đổi với tốc độ của ánh sáng. Vì vậy, nếu bạn biết một số khuôn khổ khác không được liệt kê ở đây, xin vui lòng chia sẻ kiến thức của bạn trong các ý kiến như vậy, làm cho bài viết này hữu ích hơn. cảm ơn