Cheat sheets & checklists

A list of all the cheat sheets and checklists available on the website for quick reference.

Set up

  1. Snippets cheat sheet
    HTML, CSS
  2. Keyboard shortcut cheat sheet
    Definitions, Applications, Text, Files & folders, Web browser, Code editor
  3. Code character cheat sheet
    Brackets, Quotes, Slashes, Dashes, Misc.
  4. Commit message cheat sheet
    Best practices, Examples
  5. Naming & paths cheat sheet
    Naming conventions, Paths & folders
  1. Troubleshooting checklist
    General, HTML, CSS, GitHub

Web Dev

  1. HTML semantics cheat sheet
    Document, Lists, Text, Images & media, Data & code, Meaningless tags, Be careful, Links, Date/time formats
  2. CSS selectors & units cheat sheet
    Selectors, Pseudo classes, Pseudo elements, Interaction selectors, Attribute selectors, Colours, Units, Unit rules
  3. Web typography cheat sheet
    Metrics, Units, Properties, Text-flow columns, Experimental properties, Keyboard shortcuts
  4. Boxes & borders cheat sheet
    The Box Model, Box dimensions, Colours & borders, Box sizing systems, Display & layout
  5. Flexbox cheat sheet
    Enabling, Orientation, Alignment, Flexibility
  6. CSS grid cheat sheet
  7. CSS layout cheat sheet
    Layout mechanics, Centering elements, Common code
  8. Screen sizes cheat sheet
    The many sizes of the Web, Size classifications
  1. HTML semantics checklist
    Boilerplate, Document, Content, Data, No-nos, Validation
  2. Web typography checklist
    Content, Design, Usability
  3. Browser testing checklist
    Screen sizes, Functionality, Operating systems, Desktop browsers, Mobile browsers, Less common browsers
  4. Homepage checklist
    Content, Design, Just don’t…

Web Dev

  1. Gridifier cheat sheet
    Making a grid, Grid unit alignment, Units, Unit size examples, Unit utilities, Example solutions, Common problems
  2. Typografier cheat sheet
    Font sizes, Spacing, Utilities, Icons
  3. Modulifier cheat sheet
    Responsive setup, Images, List group, Embed containers, Media objects, Icons, Hidden, Positioning, Nice lists, Basic buttons, Forms, Accessibility, Print styles
  4. Forms cheat sheet
    Tags, Input types, Input attributes, CSS selectors, Examples
  5. Tables cheat sheet
    Tags, Examples, CSS snippets
  6. Accessibility cheat sheet
    Impairments overview, HTML semantics, WAI-ARIA landmark roles, Extra information
  1. Accessibility checklist
    Content, Design, Usability, Images & media, Testing, VoiceOver shortcuts
  2. Accessibility testing checklist
    Design & structure, Features, Tools

Web Dev

  1. Images cheat sheet
    Image formats, HTML tags, HTML examples, CSS background images, CSS gradients, Border images, Common CSS code snippets
  2. CSS animations & effects cheat sheet
    Transforms, Transitions, Animations, Filters, Target
  3. SVG cheat sheet
    Setup, Shapes, Grouping & naming, Styling shapes, Styling strokes, Text, Styling text, Linking & images, Styling with CSS, Effects, SVG icons, Accessibility
  1. Performance checklist
    Performance Budget, Validation, Design & code

Web Dev

  1. Jekyll cheat sheet
    Setup and use, Files & paths, Layouts, Data, includes & posts, Template tags, Template filters
  2. Pattern library cheat sheet
    Installation & setup, Folders & files, Configuration & documentation
  3. Markdown & YAML cheat sheet
    Markdown, YAML
  1. Project UX checklist
    Website goals, Personas, Task flows, Wireframes, Visual design, Micro copy
  1. Pattern library timeline
    1. 1. Install tools
    2. 2. Create website UX
    3. 3. Set up tools
    4. 4. Set up the pattern library
    5. 5. Style typography & colours
    6. 6. Write an introductory readme
    7. 7. Structure data
    8. 8. Make patterns
    9. 9. Style buttons
    10. 10. Create icons
    11. 11. Code images & cards
    12. 12. Document patterns
    13. 13. Design forms & fields
    14. 14. Code navigation
    15. 15. Style different sections
    16. 16. Code headers
    17. 17. Design footers
    18. 18. Share code & build pages
    19. 19. Prepare datasets for output
    20. 20. Design remaining patterns
    21. 21. Build pages with Jekyll
    22. 22. Piece together the homepage
    23. 23. Write & finalize documentation
    24. 24. Design the product list page
    25. 25. Hand-off to team member
    26. 26. Code the checkout form page
    27. 27. Merge team work
    28. 28. Code the product details page
    29. 29. Merge teammate’s work
    30. 30. Finalize the pattern library

Web Dev

  1. SEO cheat sheet
    Semantics, Social tags, Metadata, Extra files
  1. Writing checklist
    Content, Consistency, Languages
  2. SEO checklist
    Content, Important tags, Design, Extra files, Metadata, Analytics & monitoring
  3. Advanced performance checklist
    Performance Budget, Validation, Testing, Design, Code, Server
  4. Launch checklist
    Content & usability, Design, Forms, Accessibility, Code quality, Browser testing, Details, Performance, Search engine optimization

Web Dev

  1. Sprint checklist
    Agile, Sprint process, Issue labels, Development process, Plan sprint, Milestone & deadline, Project board, Create Issues, Sprint review, Cleanup, Review
  2. Usability testing checklist
    Testing setup, Define testing objectives, Determine flows & scenarios, Identify devices, Draft instructions, Find participants, Minimize bias, Observe participants, Observation results document
  3. Interactive prototype checklist
    Screens, Interactivity, Code deduplication
  1. Branching flowchart
    1. 1. Determine the small feature to be coded
    2. 2. Make a detailed Issue for the task
    3. 3. Pull
    4. 4. Make a new branch for the task
    5. 5. Write code & commit regularly
    6. 6. Publish branch
    7. 7. Create a detailed pull request
    8. 8. Resolve any conflicts
    9. 9. Pull conflict resolution merge
    10. 10. Get a teammate’s review
    11. 11. Make more commits
    12. 12. Merge pull request & delete branch
    13. 13. Close the Issue
    14. 14. Delete local branch
    15. 15. Pull

JS

  1. JavaScript cheat sheet
    Syntax, jQuery & HTML, Sample programs
  1. JavaScript checklist
    Code quality, Testing, Validation