Cheat sheets & checklists

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

The Web

Sorry, there aren’t any cheat sheets, checklists or flowcharts for this course yet.

Set up

  1. Keyboard shortcut cheat sheet
    Definitions, Applications, Text, Files & folders, Web browser, Code editor
  2. Snippets cheat sheet
    HTML, CSS
  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

Content

  1. HTML semantics cheat sheet
    Document, Lists, Text, Images & media, Data & code, Meaningless tags, Be careful, Links, Date/time formats
  2. Tables cheat sheet
    Tags, Examples, CSS snippets
  3. SEO cheat sheet
    Semantics, Social tags, Metadata, Extra files
  4. Forms cheat sheet
    Tags, Input types, Input attributes, CSS selectors, Examples
  1. Writing checklist
    Content, Consistency, Languages
  2. HTML semantics checklist
    Boilerplate, Document, Content, Data, No-nos, Validation
  3. SEO checklist
    Content, Important tags, Design, Extra files, Metadata, Analytics & monitoring

Access-ibility

  1. Accessibility cheat sheet
    Impairments overview, HTML semantics, WAI-ARIA landmark roles, Extra information
  2. Screen reader cheat sheet
    VoiceOver shortcuts
  1. Accessibility checklist
    Content, Design, Usability, Images & media, Testing, Helpful MacOS shortcuts
  2. Accessibility testing checklist
    Design & structure, Features, Tools

Type

  1. CSS selectors & units cheat sheet
    Selectors, Pseudo classes, Pseudo elements, Interaction selectors, Attribute selectors, Colours, Units, Unit rules
  2. Web typography cheat sheet
    Metrics, Units, Properties, Text-flow columns, Experimental properties, Keyboard shortcuts
  1. Web typography checklist
    Content, Design, Usability

Layout

  1. Boxes & borders cheat sheet
    The Box Model, Box dimensions, Colours & borders, Box sizing systems, Display & layout
  2. Flexbox cheat sheet
    Enabling, Orientation, Alignment, Flexibility
  3. CSS grid cheat sheet
    Parents, Children, Getting fancy
  4. CSS layout cheat sheet
    Layout mechanics, Centering elements, Common code
  1. Homepage checklist
    Content, Design, Just don’t…

Images

  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
  2. Advanced performance checklist
    Performance Budget, Validation, Testing, Design, Code, Server

Many screens

  1. Screen sizes cheat sheet
    The many sizes of the Web, Size classifications
  1. Browser testing checklist
    Screen sizes, Functionality, Operating systems, Desktop browsers, Mobile browsers, Less common browsers

Libraries

  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

Design systems

  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

Teams

  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
  2. Updating from master flowchart
    1. 1. Commit what you’re working on
    2. 2. Switch to the master branch
    3. 3. Pull
    4. 4. Switch back to your feature branch
    5. 5. Update from master

JS

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

What’s next?

  1. Launch checklist
    Content & usability, Design, Forms, Accessibility, Code quality, Browser testing, Details, Performance, Search engine optimization
  1. Portfolio timeline
    1. 1. Coming soon page
    2. 2. Buying domains & email addresses
    3. 3. Content & personality
    4. 4. Paper wireframes
    5. 5. Pattern library
    6. 6. Pattern library critiques
    7. 7. Search engine optimization
    8. 8. Portfolio design & content
    9. 9. Video
    10. 10. Portfolio critiques & improvements
    11. 11. Performance
    12. 12. Progressive enhancement & accessibility
    13. 13. Final portfolio website
    14. 14. 404 pages
    15. 15. Test all the things!
    16. 16. Final critiques
    17. 17. Launch