Bài đăng này sẽ giúp bạn trở thành Lập trình viên Front-end chuyên nghiệp vì bài đăng này gần như không giới hạn về mọi loại tài liệu.

Các trang blog:

  • Hasnode - Hashnode là cách dễ nhất để bắt đầu một blogcủa lập trình viên miễn phí và kết nối với độc giả thông qua cộng đồng lập trình viên toàn cầu.
  • Dev.to - DEV là một cộng đồng các lập trình viên cùng giúp đỡ lẫn nhau
  • Hackernoon - Trang web truyền thông về công nghệ độc lập

Tiện ích mở rộng của Chrome: 

  • DailyDev - Nhận thông tin mới nhất về cộng đồng lập trình trong tab mặc định của chrome.
  • WhatFont - Nhận biết trang web đang sử dụng phông chữ nào.
  • ColorPick Eyedropper - Để biết trang web đang sử dụng màu nào.
  • Wappalyzer - Tìm hiểu về công nghệ của bất kỳ trang web nào.
  • Web Developer - Các công cụ mở rộng.
  • React developer tools - React Developer Tools là một tiện ích mở rộng Chrome DevTools cho thư viện JavaScript React mã nguồn mở. Nó cho phép bạn kiểm tra thành phần React trong Công cụ Chrome.

 VS Code mở rộng:

  • NPM - Tiện ích mở rộng này giúp bạn quản lý Package.json của mình và sẽ cung cấp các cảnh báo, giúp kiểm soát phiên bản.
  • Prettier - Prettier là một trình định dạng mã cố định. Nó thực hiện một cách nhất quán bằng cách phân tích mã cú pháp của bạn và in lại nó với các quy tắc riêng của nó có tính đến độ dài dòng tối đa, mã gói khi cần thiết.
  • Rainbow Brackets - Tìm thẻ bị thiếu đó một cách dễ dàng bằng cách mã hóa màu cho mọi dấu ngoặc vuông được đặt trong trường của bạn.
  • VS Code Great Icons - Tổ chức trường của bạn bằng cách áp dụng một bộ biểu tượng thích hợp để xác định trực quan các tệp theo loại.
  • Placeholder Images - Các dịch vụ như unsplash.it và placehold.it cực kỳ hữu ích. Giờ đây, bạn có thể tiết kiệm thời gian bằng cách thêm hình ảnh ngay từ trong VS Code.
  • Vetur - Phần mở rộng VueJS
  • ESLint - Tiện ích mở rộng sử dụng thư viện ESLint được cài đặt trong thư mục không gian làm việc đã mở.
  • Live Server - Khởi chạy Máy chủ cục bộ với tính năng tải lại trực tiếp cho các trang tĩnh và động
  • Visual Studio IntelliCode - Tiện ích mở rộng này sẽ chuyển các đề xuất hoàn thành phù hợp nhất lên đầu.
  • Debugger For Chrome - Tiện ích mở rộng này cho phép bạn gỡ lỗi mã JavaScript của mình đang chạy trong trình duyệt Chrome, từ bên trong VS Code.
  • Debugger for Microsoft Edge - Gỡ lỗi mã JavaScript của bạn trong trình duyệt Microsoft Edge
  • Debugger for Firefox - Gỡ lỗi ứng dụng web hoặc tiện ích mở rộng trình duyệt của bạn trong Firefox
  • Bracket Pair Colorizer 2 - Một phần mở rộng có thể tùy chỉnh để tô màu các dấu ngoặc vuông phù hợp

Chủ đề VS Code:

  • One Dark Pro - Chủ đề One Dark mang tính biểu tượng của Atom cho Visual Studio Code
  • Material Theme - Chủ đề hay nhất hiện nay dành cho Visual Studio Code
  • Horizon Theme - Một chủ đề kép cho Visual Studio Code

Tài liệu chung:

  • Đầu tiên, bạn sẽ cần một danh sách kiểm tra để đánh dấu tất cả những gì bạn đã học. Bạn có thể xem hình ảnh bên dưới để biết danh sách sẽ như thế nào.
    Link -> The Front-End Checklist
    image.png

  • Frontend Development Roadmap

image.png

Tài liệu học tập:

DOCS và trang Cheat

  • MDN Web Docs - Trang MDN Web Docs cung cấp thông tin về các công nghệ Web mở bao gồm HTML, CSS và API cho cả các trang Web và các ứng dụng web tiến bộ.
  • DevDocs - Trình duyệt tài liệu nhanh, ngoại tuyến và miễn phí dành cho lập trình viên. Tìm kiếm hơn 100 tài liệu trong một ứng dụng web.
  • DEVHINTS - 1 bộ sưu tập các trang tính
  • FLEX - Malven - Một bảng cheatsheet trực quan cho bố cục CSS flex.
  • GRID - Malven - Một bảng cheatsheet trực quan cho bố cục CSS grid.

Nó làm việc như thế nào?

Đối với HTML và CSS

  • freeCodeCamp - Khóa học miễn phí Lập trinh Web
  • Flexbox Froggy - Một trò chơi giúp bạn học CSS Flex
  • CSS TRICKS - Flexbox - Hướng dẫn đầy đủ về Flexbox.
  • Grid Garden - Một trò chơi để học CSS Grid.
  • CSS TRICKS - A Complete Guide to Grid - Hướng dẫn toàn diện CSS grid
  • Learn CSS Grid - Hướng dẫn toàn diện để giúp bạn hiểu và học CSS Grid Layout, của Jonathan Suh.
  • Can I Use - Bảng hỗ trợ trình duyệt cập nhật để hỗ trợ công nghệ web front-end trên trình duyệt web trên máy tính để bàn và thiết bị di động.
  • HTML Dog - giải thích đơn giản và trọng tâm
  • Marksheet - Số lượng hướng dẫn không giới hạn
  • The ODIN Project - Cách học tốt nhất
  • CSS Effects - Ảnh động CSS
  • Keyframes - Tạo hoạt ảnh @keyframe CSS cơ bản hoặc phức tạp bằng trình chỉnh sửa dòng thời gian trực quan.
  • Animista - Chơi với một bộ sưu tập các ảnh động CSS.
  • Interneting Is Hard - Hướng dẫn hoàn chỉnh cho người mới bắt đầu
  • BEM - cheat sheet.
  • Autoprefixer - là một plugin PostCSS phân tích cú pháp CSS của bạn và thêm tiền tố của nhà cung cấp.
  • CSS Formatter - CSS Formatter, CSS Beautifier.
  • Placeholder - Trình giữ chỗ

ONLINE IDE, EDITOR

Nguồn hình ảnh

Khả năng tiếp cận

TERMINALS CHO WINDOWS

Kênh Youtube

FONTS AND TYPOGRAPHY

Hình vẽ minh họa:

ICONS

  • Font Awesome - Biểu tượng vector
  • Ionicons - được cấp phép MIT.
  • icons8 - Tải xuống các biểu tượng miễn phí ở PNG và SVG.
  • flaticon - Biểu tượng vector miễn phí ở định dạng SVG, PSD, PNG, EPS hoặc dưới dạng FONT ICON.
  • Simple Icons - 1463 Biểu tượng SVG miễn phí cho các thương hiệu phổ biến.

Hẹn gặp lại ở phần 2 nhé!

Nguồn dịch từ: dev.to