Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

  1. Урок 1. 00:06:35
    What are design systems
  2. Урок 2. 00:08:33
    Atomic Design principles
  3. Урок 3. 00:05:34
    Example design systems
  4. Урок 4. 00:05:03
    Your role as an engineer in a design system
  5. Урок 5. 00:04:06
    What we'll build
  6. Урок 6. 00:01:50
    Css architecture checklist
  7. Урок 7. 00:02:50
    Setup folder and file structure
  8. Урок 8. 00:09:27
    Define system variables
  9. Урок 9. 00:07:35
    Define foundation colors
  10. Урок 10. 00:01:54
    Assignment - Define foundation colors
  11. Урок 11. 00:02:01
    Define foundation typography
  12. Урок 12. 00:01:11
    Assignment - Define foundation typography
  13. Урок 13. 00:03:43
    Define mixins
  14. Урок 14. 00:03:13
    Assignment - Define mixins
  15. Урок 15. 00:06:32
    Global root and css reset
  16. Урок 16. 00:07:16
    Add stylelint and prettier
  17. Урок 17. 00:03:57
    Setup husky and pre-commit hooks
  18. Урок 18. 00:06:49
    Compile scss to css
  19. Урок 19. 00:09:22
    Compile components to css
  20. Урок 20. 00:10:08
    Setup mono repository with yarn and lerna
  21. Урок 21. 00:04:02
    Add react package to mono repository
  22. Урок 22. 00:04:43
    Add rollup to compile react
  23. Урок 23. 00:10:31
    Setup a react playground
  24. Урок 24. 00:03:53
    Setup dev script for all packages
  25. Урок 25. 00:03:32
    Identify atoms, molecules and organisms
  26. Урок 26. 00:00:52
    Assignment - Identify atoms, molecules and organisms
  27. Урок 27. 00:05:01
    Develop the colour component
  28. Урок 28. 00:08:47
    Dynamically generate utility classes
  29. Урок 29. 00:01:06
    Assignment - create image atom
  30. Урок 30. 00:07:02
    Extract foundation to a separate package
  31. Урок 31. 00:15:23
    Spacing component
  32. Урок 32. 00:11:10
    The select molecule
  33. Урок 33. 00:11:52
    Styles for the select molecule
  34. Урок 34. 00:07:11
    Calculate the overlay position
  35. Урок 35. 00:03:32
    Style the select option
  36. Урок 36. 00:08:35
    Selected option state
  37. Урок 37. 00:02:18
    Animate select caret
  38. Урок 38. 00:07:41
    Render props for custom option
  39. Урок 39. 00:03:25
    Expanded and popup aria attributes
  40. Урок 40. 00:16:53
    Control menu items with keyboard
  41. Урок 41. 00:09:53
    Accessible keyboard navigation
  42. Урок 42. 00:07:24
    Setup babel and jest
  43. Урок 43. 00:01:00
    Assignment - Select test cases
  44. Урок 44. 00:09:22
    Assignment - Select test cases solution
  45. Урок 45. 00:05:06
    Tests for foundations
  46. Урок 46. 00:07:53
    Setup storybook
  47. Урок 47. 00:04:06
    Select component variants
  48. Урок 48. 00:09:07
    Addon knobs
  49. Урок 49. 00:07:40
    Addon accessibility
  50. Урок 50. 00:05:57
    Visual regression tests with chromatic
  51. Урок 51. 00:07:31
    Publish to npm with lerna
  52. Урок 52. 00:06:57
    Control published files
  53. Урок 53. 00:04:44
    Conventional commits
  54. Урок 54. 00:03:06
    Lint commits
  55. Урок 55. 00:06:11
    Generate changelogs with lerna
  56. Урок 56. 00:06:36
    Setup github actions workflow
  57. Урок 57. 00:07:15
    Fix build issues on CI
  58. Урок 58. 00:04:44
    Automate chromatic with github actions
  59. Урок 59. 00:04:25
    Deploy storybook to netlify