Front-end developer

Giao diện người dùng của một trang web là phần mà người dùng tương tác. Mọi thứ bạn thấy khi điều hướng trên Internet, từ phông chữ, màu sắc cho đến menu thả xuống và thanh trượt, v.v... đều là sự kết hợp của HTML, CSS và JavaScript trên trình duyệt

HTML

HTML là ngôn ngữ đánh dấu được sử dụng để cấu trúc và cung cấp ý nghĩa cho nội dung web, ví dụ: xác định các đoạn văn, tiêu đề và bảng dữ liệu hoặc nhúng hình ảnh và video vào trang.

Nơi học HTML trực tuyến:

W3 Schools SoloLearn Mozilla codecademy LinkedIn Learning HTML cheat sheet HTML Best Practices

CSS

CSS là một ngôn ngữ của các quy tắc kiểu mẫu được sử dụng để áp dụng kiểu mẫu cho nội dung HTML, chẳng hạn như đặt màu nền và phông chữ, đồng thời bố trí nội dung trong nhiều cột, v.v...

Nơi học CSS trực tuyến:

W3 Schools SoloLearn Web.dev by Google Mozilla codecademy LinkedIn Learning CSS cheat sheet

Javascript

JavaScript là một ngôn ngữ kịch bản cho phép bạn tạo nội dung cập nhật động, điều khiển đa phương tiện, tạo hình ảnh động và khá nhiều thứ khác.

Nơi học Javascript trực tuyến:

W3 Schools SoloLearn The Modern JavaScript Tutorial LinkedIn Learning Youtube Learn JavaScript Javascript cheat sheet JavaScript best practices

Các trang web này giúp bạn học HTML, CSS và Javascript: General Assembly Dash freeCodeCamp Udemy Bootcamp Khan Academy Don't Fear the Internet Interneting Is Hard educative Tutorial Republic và còn nữa...

Package Managers (trình quản lý gói) là một hệ thống sẽ quản lý các phần phụ thuộc vào dự án của bạn. Trình quản lý gói phổ biến: Node package manager Yarn

Là một front-end developer, bạn sẽ nghe thấy khái niệm Responsive web design (Thiết kế web đáp ứng). Bạn có thể tự viết mã hoặc sử dụng các thư viện tích hợp sẵn như Bootstrap Tailwind CSS Bulma Chakra UI Material Design Foundation UIkit Milligram Pure Tachyons Materialize Pico Semantic UI

Để viết mã CSS ngắn gọn, dễ đọc và hiệu quả, bạn có thể sử dụng Leaner Style Sheets (Less) Syntactically Awesome Style Sheets (SASS) PostCSS CSS Modules styled-components styled-jsx

Để sử dụng các phông chữ đẹp và tuyệt vời trên trang web, bạn có thể sử dụng Google fonts Font Squirrel MyFonts dafont Everything Fonts FontGet FontShare

Biểu tượng, hình minh họa, biểu tượng yêu thích: Font Awesome Bootstrap Icons IconFinder IconDuck Icons8 Tabler Icons Icon Horse App Icon Resizer SVG repo Free SVG flaticon Creative Fabrica Free SVG Designs Free SVG Download freepik Free SVG Cut Files

Bạn cần chèn các thẻ / thuộc tính / lược đồ cần thiết, tối ưu tốc độ tải trang khi làm Search engine optimization (SEO) Structured data Lighthouse Web performance optimization (WPO) Markup Validation Service Schema Markup validator Rich Results Test Image compression 1 Image compression 2 WebP Import maps Turbo

Bên cạnh Javascript truyền thống, chúng ta cũng cần học TypeScript CoffeeScript (Chuyển đổi Javascript sang Coffee: js2.coffee ) ES6 JSX

Javascript build tools Webpack esbuild Grunt NPM scripts

Kiểm tra ứng dụng của bạn với Jest React Testing Library Cypress Enzyme

Render phía máy chủ (SSR) với VueJS Angular React Redux

Tạo các trang web tĩnh với Next.js Gatsby

Bạn muốn xây dựng các ứng dụng di động? Hãy thử React Native Flutter NativeScript Ionic

Bạn muốn xây dựng các ứng dụng trên máy tính? Hãy thử Electron Carlo Proton native

Tạo HTML dễ dàng, đẹp mắt và hiệu quả với Haml (HTML abstraction markup language) (Chuyển đổi HTML / ERB sang HAML: awsm-tools Html2Haml ) Handlebars Mustache EJS Jade BlazeJS

Để tạo văn bản, hình ảnh và JSON giả, bạn có thể sử dụng Lorem Ipsum generator Lorem Picsum Fake JSON JSON Placeholder micro-jaymock mockable Hình ảnh miễn phí Unsplash SKUAWK Pexels

Công cụ biểu đồ: Google charts ChartJS Chartist.js Recharts n3-charts ZingChart HighCharts FusionCharts Flot amCharts Emprise Javascript Charts Plotly CanvasJS TOAST UI Chart AnyChart - JS charts

Công cụ vẽ Wireframe : Pencil Whimsical Sketch Adobe XD FigJam UXPin Freehand justinmind mockplus Axure RP Balsamiq Wireframe.cc

Một số liên kết hữu ích: Sự khác biệt giữa HTML và HTML5 Xác thực biểu mẫu phía máy khách Emmet Sự khác biệt giữa CSS và CSS3 Phát triển đa trình duyệt JavaScript HTML DOM JavaScript Cookies JavaScript Hoisting Fetch API Cross-Origin Resource Sharing (CORS) ESLint EmberJS GraphQL Apollo Graph Platform Prettier StandardJS WebAssembly jQuery Google polymer D3JS PixiJS SWFObject Three.js Velocity.js WinJS Lodash SPA (Single-page application) Underscore REST APIs Filebase Định dạng HTML Trình nén HTML Xóa nền hình ảnh AI Background Remover Trình tạo nút nhấn Nút nhấn CSS đẹp mắt Trình tạo CSS Glassmorphism Trình tạo bố cục CSS

Công cụ chuyển đổi tệp trực tuyến cho JSON, XML, Excel, PDF và các định dạng khác Conversion Tools Tạo HTML, CSS, JSON-LD, Twitter Cards, Open Graph, v.v... với Web Code Tools Xây dựng các ứng dụng Javascript Full-Stack với Meteor WAVE cho phép bạn đánh giá các vấn đề về khả năng tiếp cận trang web trong trình duyệt của bạn

Hỗ trợ phát triển website

Trang web này được tạo ra để cung cấp thông tin hữu ích và miễn phí cho cộng đồng. Để duy trì và phát triển, chúng tôi cần sự hỗ trợ từ các bạn.

Nếu thấy trang web có giá trị, bạn có thể đóng góp bất kỳ khoản nào, dù là 20k hay 50k, để giúp trang tiếp tục hoạt động. Sự đóng góp của bạn sẽ giúp chi trả cho chi phí vận hành, bảo trì và nâng cao nội dung. Mọi sự ủng hộ đều rất được trân trọng và sẽ giúp chúng tôi phát triển bền vững.

Chân thành cảm ơn sự hỗ trợ của bạn!