Tài liệu tham khảo mdn css
Đây là hướng dẫn mà mọi người có thể sử dụng để tìm hiểu về thực tiễn phát triển giao diện người dùng. Nó phác thảo và thảo luận rộng rãi về thực tiễn của kỹ thuật front-end. cách học nó và những công cụ nào được sử dụng khi thực hành nó vào năm 2019 Show
Nó được viết đặc biệt với mục đích trở thành một nguồn tài nguyên chuyên nghiệp cho các nhà phát triển front-end tiềm năng và hiện đang hành nghề để trang bị cho mình các tài liệu học tập và công cụ phát triển. Thứ hai, nó có thể được sử dụng bởi các nhà quản lý, CTO, người hướng dẫn và công ty săn đầu người để hiểu sâu hơn về thực tiễn phát triển front-end Nội dung của sổ tay ủng hộ các công nghệ web (HTML, CSS, DOM và JavaScript) và những giải pháp được xây dựng trực tiếp trên các công nghệ mở này. Các tài liệu được tham khảo và thảo luận trong cuốn sách là tốt nhất trong lớp hoặc cung cấp hiện tại cho một vấn đề Cuốn sách không nên được coi là một phác thảo toàn diện về tất cả các tài nguyên có sẵn cho nhà phát triển front-end. Giá trị của cuốn sách gắn liền với cách sắp xếp ngắn gọn, tập trung và kịp thời với thông tin phân loại vừa đủ để không gây choáng ngợp cho bất kỳ ai về bất kỳ chủ đề cụ thể nào Mục đích là phát hành bản cập nhật nội dung hàng năm. Đây hiện là năm thứ tư một phiên bản đã được phát hành Chương cung cấp một bản tóm tắt ngắn gọn về năm phát triển front-end và những gì có thể xảy ra. Chương & nhằm mục đích cung cấp một cái nhìn tổng quan ngắn gọn về nguyên tắc và thực hành phát triển front-end. Các chương & tổ chức và đề xuất các lộ trình và tài nguyên học tập. Chương sắp xếp và liệt kê các công cụ được sử dụng bởi các nhà phát triển front-end và Chương nêu bật các cửa hàng thông tin về front-end chương 0. Tổng kết năm 2018 và hướng tới0. 1 — Tóm tắt quá trình phát triển Front-end năm 20180. 2 — Năm 2019, Kỳ vọngChương 3. Học Front-end Dev. Tài nguyên tự định hướng/Đề xuấtChương này nêu bật nhiều tài nguyên (đào tạo bằng video, sách, v.v.). ) mà một cá nhân có thể sử dụng để định hướng quá trình học tập và sự nghiệp của riêng họ với tư cách là nhà phát triển giao diện người dùng Các tài nguyên học tập được xác định (bài báo, sách, video, screencasts, v.v. ) sẽ bao gồm cả tài liệu miễn phí và trả phí. Tài liệu trả phí sẽ được biểu thị bằng [$] 3. 1. - Tìm hiểu Internet/Web
nguồn hình ảnh. https. //www. chàoitsliam. com/2014/12/20/how-the-internet-works-infographic/ nguồn hình ảnh. http. //www. phiến quân. com/công nghệ/tìm-ra-người-chạy-biểu-đồ-internet/ 3. 2. - Tìm hiểu trình duyệt web
Các trình duyệt được sử dụng phổ biến nhất (trên máy tính để bàn và thiết bị di động) lànguồn hình ảnh. http. //gs. máy đếm tiền. com/browser-market-share Sự phát triển của trình duyệt và công nghệ web (i. e. , API)Trình duyệt không đầu được sử dụng phổ biến nhất làTrình duyệt hoạt động như thế nàoTối ưu hóa cho trình duyệtSo sánh trình duyệtHack trình duyệtPhát triển cho trình duyệtTrước đây, các nhà phát triển front-end đã dành rất nhiều thời gian để làm cho mã hoạt động trên một số trình duyệt khác nhau. Đây đã từng là một vấn đề lớn hơn ngày nay. Ngày nay, trừu tượng (e. g. , React, Webpack, Post-CSS, Babel, v.v. ) kết hợp với các trình duyệt hiện đại giúp phát triển trình duyệt khá dễ dàng. Thách thức mới không phải là người dùng sẽ sử dụng trình duyệt nào, mà là họ sẽ chạy trình duyệt đó trên thiết bị nào Trình duyệt thường xanhCác phiên bản mới nhất của hầu hết các trình duyệt hiện đại được coi là trình duyệt thường xanh. Đó là, về mặt lý thuyết, chúng được cho là tự động cập nhật âm thầm mà không cần nhắc người dùng. Động thái hướng tới các trình duyệt tự cập nhật này phản ứng với quá trình loại bỏ chậm các trình duyệt cũ không tự động cập nhật Chọn trình duyệtTính đến hôm nay, hầu hết các nhà phát triển front-end đều sử dụng Chrome và "Chrome Dev Tools" để phát triển mã front-end. Tuy nhiên, tất cả các trình duyệt hiện đại được sử dụng nhiều nhất đều cung cấp nhiều công cụ dành cho nhà phát triển. Chọn một để sử dụng để phát triển là một lựa chọn chủ quan. Vấn đề quan trọng hơn là biết trình duyệt nào, trên thiết bị nào, bạn phải hỗ trợ và sau đó thử nghiệm một cách thích hợp 3. 3 - Tìm hiểu hệ thống tên miền (hay còn gọi là DNS)
nguồn hình ảnh. http. //www. tiêu hóa kỹ thuật số. com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works. jpg 3. 4 - Tìm hiểu HTTP/Mạng (Bao gồm CORS & WebSockets)
Tài liệu HTTPVideo/Bài báo/Hướng dẫn HTTPMã trạng thái HTTP
CORS
ổ cắm web3. 5 - Tìm hiểu Web Hosting
học chungnguồn hình ảnh. https. // trang web đầu tiên. com/wp-content/uploads/2016/06/what-is-web-hosting-infographic. jpg 3. 6 - Tìm hiểu chung về phát triển Front-End3. 7 - Tìm hiểu giao diện người dùng/Thiết kế tương tác
Tối thiểu tôi khuyên bạn nên đọc các văn bản kinh điển sau đây về vấn đề này để người ta có thể hỗ trợ và xây dựng tiềm năng giao diện người dùng có thể sử dụng được 3. 8 - Học HTML & CSS
Giống như việc xây dựng một ngôi nhà, người ta có thể coi HTML là khung và CSS là bức tranh & trang trí học chungLàm chủ CSSTài liệu tham khảo/Tài liệuThuật ngữ/Từ vựngTiêu chuẩn/Thông số kỹ thuậtKiến trúc CSSQuy ước về tác giả/kiến trúc3. 9 - Tìm hiểu Công cụ Tìm kiếm Tối ưu hóa
nguồn hình ảnh. https. //trực quan. ly/community/infographic/computers/how-does-seo-work học chung3. 10 - Học JavaScript
Bắt đầuhọc chunglàm chủJavaScript chức năngTài liệu tham khảo/Tài liệuThuật ngữ/Bách khoa toàn thư/Biệt ngữTiêu chuẩn/Thông số kỹ thuậtPhong cáchTrình khám phá/Trình hiển thị JS3. 11 - Tìm hiểu DOM, BOM, CSSOM & jQuery
Con đường lý tưởng, nhưng chắc chắn là khó khăn nhất, trước tiên là học JavaScript, sau đó là DOM, sau đó là jQuery. Tuy nhiên, hãy làm những gì có ý nghĩa với bộ não của bạn. Hầu hết các nhà phát triển front-end tìm hiểu về JavaScript và sau đó là DOM bằng cách học jQuery trước tiên. Dù bạn đi theo con đường nào, chỉ cần đảm bảo rằng JavaScript, DOM và jQuery không trở thành hộp đen học chunglàm chủTài liệu tham khảo/Tài liệuTiêu chuẩn/Thông số kỹ thuật3. 12 - Tìm hiểu Web Animationhọc chungTiêu chuẩn/Thông số kỹ thuật3. 13 - Tìm hiểu Phông chữ, Biểu tượng & Hình ảnh trên Web
Phông chữBiểu tượngHình ảnh3. 14 - Tìm hiểu khả năng tiếp cận
học chungTiêu chuẩn/Thông số kỹ thuật3. 15 - Tìm hiểu Web/Trình duyệt APInguồn hình ảnh. http. //www. sự phát triển của web. com/ BOM (Mô hình đối tượng trình duyệt) và DOM (Mô hình đối tượng tài liệu) không phải là API trình duyệt duy nhất được cung cấp trên nền tảng web bên trong trình duyệt. Mọi thứ không phải là DOM hoặc BOM cụ thể, mà là giao diện để lập trình trình duyệt có thể được coi là web hoặc API trình duyệt (đáng tiếc là trước đây một số API này được gọi là API HTML5, điều này gây nhầm lẫn giữa các chi tiết cụ thể/tiêu chuẩn hóa của riêng chúng với HTML5 thực tế . Lưu ý rằng API web hoặc trình duyệt bao gồm API thiết bị (e. g. , Bạn nên biết và tìm hiểu, khi thích hợp, API web/trình duyệt. Một công cụ tốt để sử dụng để làm quen với tất cả các API này là điều tra HTML5test. kết quả com cho 5 trình duyệt mới nhất MDN có rất nhiều thông tin về API web/trình duyệt Hãy nhớ rằng không phải mọi API đều được chỉ định bởi W3C hoặc WHATWG Ngoài MDN, bạn có thể thấy các tài nguyên sau đây hữu ích để tìm hiểu về tất cả API của web/trình duyệt 3. 16 - Tìm hiểu JSON (JavaScript Object Notation)
học chungTài liệu tham khảo/Tài liệuTiêu chuẩn/Thông số kỹ thuậtkiến trúc3. 17 - Tìm hiểu các mẫu JSMẫu JavaScript thường được sử dụng, nhưng không phải lúc nào cũng có giải pháp MV* để tách các phần của chế độ xem (i. e. , giao diện người dùng) từ logic và mô hình (i. e. , dữ liệu hoặc JSON) Lưu ý rằng JavaScript 2015 (còn gọi là ES6) đã thêm một cơ chế tạo khuôn mẫu gốc có tên là "Chuỗi mẫu". Ngoài ra, việc tạo khuôn mẫu gần đây đã được thay thế bằng những thứ như JSX, phần tử mẫu hoặc Nếu tôi không sử dụng React & JSX, trước tiên tôi sẽ tiếp cận với "Chuỗi mẫu" của JavaScript và khi thiếu điều đó, hãy chuyển sang nunjucks 3. 18 - Tìm hiểu Trình tạo trang tĩnhTrình tạo trang tĩnh, thường được viết bằng mã phía máy chủ (i. e. , ruby, php, python, nodeJS, v.v. ), tạo các tệp HTML tĩnh từ văn bản/dữ liệu tĩnh + mẫu dự định được gửi từ máy chủ đến máy khách một cách tĩnh mà không có tính chất động học chung3. 19 - Học Khoa học Máy tính qua JS3. 20 - Tìm hiểu kiến trúc ứng dụng Front-Endhọc chungGần đây không có nhiều nội dung chung được tạo về chủ đề này. Hầu hết nội dung được cung cấp để tìm hiểu cách xây dựng các ứng dụng giao diện người dùng/SPA/JavaScript giả định trước rằng bạn đã chọn một công cụ như Angular, Ember, React hoặc Aurelia Lời khuyên của tôi, năm 2019 hãy học React và Mobx và Apollo/graphql 3. 21 - Tìm hiểu dữ liệu (i. e. JSON) Thiết kế API3. 22 - Học phản ứnghọc phản ứngLàm chủ phản ứngKhi bạn đã xử lý tốt React, hãy chuyển sang tìm hiểu một giải pháp quản lý trạng thái mạnh mẽ hơn như MobX. Nếu bạn là một nhà phát triển có kinh nghiệm với kiến thức Lập trình chức năng, hãy xem Redux. Nếu bạn cần trợ giúp để hiểu vai trò của quản lý trạng thái ngoài việc xem 3. 23 - Tìm hiểu Quản lý trạng thái ứng dụng3. 24 - Tìm hiểu ứng dụng web lũy tiến
3. 25 - Tìm hiểu thiết kế API JS3. 26 - Tìm hiểu Công cụ dành cho nhà phát triển web trên trình duyệt
Mặc dù hầu hết các trình duyệt đều được trang bị các công cụ dành cho nhà phát triển web, nhưng các công cụ dành cho nhà phát triển Chrome hiện được nhắc đến nhiều nhất và được sử dụng rộng rãi Tôi khuyên bạn nên tìm hiểu và sử dụng các công cụ dành cho nhà phát triển web Chrome, đơn giản vì các tài nguyên tốt nhất để tìm hiểu các công cụ dành cho nhà phát triển web xoay quanh Chrome DevTools Tìm hiểu Công cụ dành cho nhà phát triển web ChromeTài liệu công cụ dành cho nhà phát triển web Chrome3. 27 - Tìm hiểu dòng lệnh (còn gọi là CLI)
học chunglàm chủ3. 28 - Tìm hiểu nút. js
học chung3. 29 - Tìm hiểu các mô-đunhọc chungTài liệu tham khảo/Tài liệu3. 30 - Tìm hiểu bộ tải/bộ đóng gói mô-đungói webTổng sốBưu kiện3. 31 - Tìm hiểu Trình quản lý gói
học chung3. 32 - Tìm hiểu kiểm soát phiên bản
Giải pháp phổ biến nhất được sử dụng để kiểm soát phiên bản ngày nay là Git. Học nó học chunglàm chủTài liệu tham khảo/Tài liệu3. 33 - Tìm hiểu Build và Task Automation
học chungTài liệu tham khảo/Tài liệuGulp thật tuyệt. Tuy nhiên, bạn có thể chỉ cần Đọc 3. 34 - Tìm hiểu Tối ưu hóa Hiệu suất Trang web
học chung3. 35 - Tìm hiểu kiểm tra
học chung3. 36 - Tìm hiểu Headless Browsers
PhantomJS không còn được duy trì, Headless Chrome bước vào 3. 37 - Tìm hiểu phát triển ngoại tuyếnPhát triển ngoại tuyến (còn gọi là ngoại tuyến trước) là một lĩnh vực kiến thức và thảo luận xung quanh các phương pháp phát triển cho các thiết bị không phải lúc nào cũng được kết nối với Internet hoặc nguồn điện học chung3. 38 - Tìm hiểu Bảo mật Web/Trình duyệt/Ứng dụng3. 39 - Tìm hiểu phát triển đa thiết bịnguồn hình ảnh. http. // băng giá. com/blog/post/đây-là-web/ Một trang web hoặc ứng dụng web có thể chạy trên nhiều loại máy tính, máy tính xách tay, máy tính bảng và điện thoại, cũng như một số thiết bị mới (đồng hồ, máy điều nhiệt, tủ lạnh, v.v.). ). Cách bạn xác định thiết bị nào bạn sẽ hỗ trợ và cách bạn sẽ phát triển để hỗ trợ các thiết bị đó được gọi là "chiến lược phát triển đa thiết bị". Dưới đây, tôi liệt kê các chiến lược phát triển đa thiết bị phổ biến nhất |