tiger-ll / webfundamentals

A Chinese handbook for multi-device web best practices

Web Fundamentals - Simplified Chinese

Page Distribution - 100% translation complete, proofing in progress.

• Getting Started @lostlandark
  • Content Structure @lostlandark
  • Responsive Layout @lostlandark

---

• Multi-device Layouts @lostlandark
  • Responsive Web Design Fundamentals example
    • Set the viewport example
    • Size content to the viewport example
    • Use CSS media queries for responsiveness example
    • How to choose breakpoints example
  • Responsive Web Deisgn Patterns @Pellegrino
    • Mostly fluid forgot
    • Column Drop forgot
    • Layout shifter forgot
    • Tiny tweaks forgot
    • Off canvas forgot
  • Navigation and Action Patterns @Pellegrino
    • App bar @somanybubububu
    • Tab bar @somanybubububu
    • Navigation drawer @somanybubububu
    • Bottom bar @somanybubububu

---

• Form and user input
  • Create Amazing Forms @tiger
    • Label and name inputs properly @mu
    • Provide real-time validation @tiger
    • Choose the best input type @tiger
    • Simplify checkout with requestAutocomplete API @tiger
    • Grouping form fields @tiger
  • Add Touch to Your Site @tiger
    • Stateful Elements Respond to Touch @tiger
    • Implement Custom Gestures @portrayals

---

• Introduction to Media @tofu
  • Images @tofu
  • Video @somanybubububu
    • Add a video @somanybubububu
    • Provide alternatives for legacy platforms @somanybubububu
    • Customize the video player @somanybubububu
    • Size videos correctly @somanybubububu
    • Accessbility matters @somanybubububu
    • Quick Reference @somanybubububu
  • Audio (content under development)

---

• Performance
  • Critical path rendering @tofu
    • Constructing the Object Model @tofu
    • Render-tree construction, Layout, and Paint @tofu
    • Render Blocking CSS @tofu
    • Adding Interactivity with JavaScript @tofu
    • Measuring the Critical Rendering Path with Navigation Timing @tofu
    • Analyzing Critical Rendering Path Performance @tofu
    • Optimizing the Critical Rendering Path @tofu
    • PageSpeed Rules and Recommendations @tofu
  • Optimizing-content-efficiency @somanybubububu
    • Eliminating unnecessary downloads @somanybubububu
    • Optimizing encoding and transfer size of text-based assets @somanybubububu
    • HTTP caching @somanybubububu

---

• Resources @somanybubububu
  • Glossary
  • Samples
  • Style guide
  • Example article