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

  1. Урок 1. 00:03:04
    Course welcome and introduction
  2. Урок 2. 00:05:09
    FIFTY Festival project overview and SuperHi editor intro
  3. Урок 3. 00:12:30
    Adding our initial HTML and explaining our structure
  4. Урок 4. 00:09:35
    Using custom fonts on our sites with @font-face
  5. Урок 5. 00:13:02
    Setting up our full width and height section styles
  6. Урок 6. 00:08:08
    Adding animations to elements using CSS keyframes
  7. Урок 7. 00:10:51
    Styling up our vintage marquee effect using CSS
  8. Урок 8. 00:05:14
    Using CSS blending modes to create overlay effects
  9. Урок 9. 00:05:14
    Using keyframes to create a vintage web marquee effect
  10. Урок 10. 00:10:11
    Using Javascript to make a long repeating array of marquee text
  11. Урок 11. 00:10:15
    Getting elements from our page and changing their content using vanilla Javascript
  12. Урок 12. 00:09:43
    Styling up our lineup setions using CSS
  13. Урок 13. 00:14:39
    Adding randomness to our background shape positions using nth-child selectors
  14. Урок 14. 00:03:45
    Creating a pulsating animation for our background circle shapes
  15. Урок 15. 00:04:29
    Animating elements using Javascript rather than CSS
  16. Урок 16. 00:07:34
    How we run functions on multiple elements using Javascript vs. jQuery
  17. Урок 17. 00:06:51
    Creating an auto-incrementing animation delay using Javascript loops
  18. Урок 18. 00:05:32
    Applying rotation animations to our squiggle shapes
  19. Урок 19. 00:12:10
    Using StackOverflow to find a function that generates us a random number
  20. Урок 20. 00:06:02
    Adding modern Javascript to our code for added elegance and future-proofness
  21. Урок 21. 00:13:20
    Finding Javascript libraries on GitHub to help us with certain bits of functionality
  22. Урок 22. 00:08:19
    Triggering fade in transitions on scroll
  23. Урок 23. 00:14:21
    Using Javascript loops to apply auto-incrementing transition delay to our lineups and shapes
  24. Урок 24. 00:07:12
    Linking to content on our page using anchor tags in id attributes
  25. Урок 25. 00:17:23
    Using Javascript for smooth scrolling to elements on our page
  26. Урок 26. 00:08:44
    Adding layout styles for our footer section using flexbox
  27. Урок 27. 00:18:37
    Using flexbox to achieve our sign up form’s irregular layout with ease
  28. Урок 28. 00:07:15
    Getting our site to fit snuggly on smaller screens using media queries
  29. Урок 29. 00:03:54
    Using CampaignMonitor to create a subscriber form our page
  30. Урок 30. 00:02:06
    Project introduction
  31. Урок 31. 00:01:19
    The new interactive slides
  32. Урок 32. 00:02:55
    What we’ll learn
  33. Урок 33. 00:03:17
    Adding our initial HTML
  34. Урок 34. 00:12:11
    Column layout using flexbox
  35. Урок 35. 00:08:50
    Styling up our search input and loading indicators
  36. Урок 36. 00:10:45
    What are APIs and why are they great?
  37. Урок 37. 00:10:15
    Getting data in the background using fetch
  38. Урок 38. 00:07:42
    Using fetch to get data from Giphy’s API
  39. Урок 39. 00:04:58
    Creating our gif video element using Javascript
  40. Урок 40. 00:04:11
    Separating tasks out into their own functions
  41. Урок 41. 00:11:05
    Using CSS Grid to stack our videos on top of each other
  42. Урок 42. 00:04:32
    Responding to key press events on input
  43. Урок 43. 00:07:06
    Using event data to test what key we’ve pressed
  44. Урок 44. 00:08:40
    Improving our search hint to show the user what they’re searching
  45. Урок 45. 00:07:32
    Putting our fetch code into a function that uses the search term
  46. Урок 46. 00:05:09
    Getting a random item from our array of images
  47. Урок 47. 00:12:10
    Toggling a loading state on our page
  48. Урок 48. 00:10:14
    Adding a video animation effect on video load
  49. Урок 49. 00:10:46
    Clearing our gif stack and resetting the search
  50. Урок 50. 00:03:29
    Responding to events across the whole page
  51. Урок 51. 00:02:36
    Handling errors when things go wrong
  52. Урок 52. 00:06:32
    Responsive styles and tweaks
  53. Урок 53. 00:12:21
    Project finish and final code summary
  54. Урок 54. 00:02:04
    Project introduction
  55. Урок 55. 00:06:50
    What are SVGs and how do we use them?
  56. Урок 56. 00:05:12
    Creating our own page with a simple SVG image
  57. Урок 57. 00:07:15
    Introducing Tachyons as a lightweight CSS toolkit
  58. Урок 58. 00:09:41
    Introduction to a grid system using Tachyons
  59. Урок 59. 00:11:35
    Building our full grid
  60. Урок 60. 00:04:56
    Final grid finishes and background colors
  61. Урок 61. 00:11:03
    Drawing circles in SVG to build our tunnel animation
  62. Урок 62. 00:12:21
    Introducing anime.js and using it for animating our tunnel
  63. Урок 63. 00:04:13
    Using transform-origin and easing to add character to our animations
  64. Урок 64. 00:06:19
    Using a delay function to create a staggered animation effect
  65. Урок 65. 00:09:13
    Our conveyor belt animation effect
  66. Урок 66. 00:03:24
    Adding our color palette in using lightweight CSS classes
  67. Урок 67. 00:13:01
    Looking at anime.js demos and using them to animate paths
  68. Урок 68. 00:05:12
    Using the same path technique to create a wave animation
  69. Урок 69. 00:01:27
    Using SVGOMG to compress SVGs
  70. Урок 70. 00:06:33
    Using an inset box shadow to add borders to our boxes
  71. Урок 71. 00:06:08
    Adding our cross SVG code in
  72. Урок 72. 00:08:28
    Using Javascript to duplicate our SVG content multiple times
  73. Урок 73. 00:04:12
    Animating our crosses using a delayed rotation effect
  74. Урок 74. 00:09:50
    Repeating the same technique for our squares
  75. Урок 75. 00:05:45
    Animating our dot pattern using scale transform
  76. Урок 76. 00:02:09
    Adding our title in as raw SVG
  77. Урок 77. 00:04:03
    Animating our flashing boxes using background color and arrays
  78. Урок 78. 00:09:08
    Creating our square tunnel animation using SVG rects
  79. Урок 79. 00:11:03
    Fixing up our page to make it responsive
  80. Урок 80. 00:10:42
    Project final tweaks and summary
  81. Урок 81. 00:02:55
    Project introduction
  82. Урок 82. 00:06:53
    Adding our initial HTML
  83. Урок 83. 00:03:35
    Adding our custom fonts
  84. Урок 84. 00:10:00
    Styling up our intro section
  85. Урок 85. 00:04:38
    About em and rem units
  86. Урок 86. 00:03:09
    Applying stroke to our heading text
  87. Урок 87. 00:02:36
    Styling up our call to action button
  88. Урок 88. 00:02:52
    An introduction to basscss
  89. Урок 89. 00:11:18
    Responsive 12 column grids using basscss
  90. Урок 90. 00:05:32
    Adding our about section and heading variation
  91. Урок 91. 00:03:34
    Using variables in our CSS
  92. Урок 92. 00:05:28
    Responsive spacing using helper classes
  93. Урок 93. 00:06:17
    Styling our speakers section and blockquote
  94. Урок 94. 00:11:26
    Showing and revealing our fixed header on scroll
  95. Урок 95. 00:14:14
    Horizontal scrolling elements and custom scrollbars
  96. Урок 96. 00:05:15
    Vertical text using CSS writing-mode
  97. Урок 97. 00:19:29
    Styling our register section using CSS grid
  98. Урок 98. 00:05:31
    Adding our final images section and footer
  99. Урок 99. 00:07:31
    Parallax tilt hover effect for our images
  100. Урок 100. 00:03:44
    Fading images in on scroll
  101. Урок 101. 00:04:08
    Revealing our payment form using transforms
  102. Урок 102. 00:06:17
    An introduction to Stripe for payments
  103. Урок 103. 00:11:05
    A breakdown of Stripe’s payment flow
  104. Урок 104. 00:07:15
    Using Stripe’s code for our checkout form
  105. Урок 105. 00:15:51
    Sending the order to our server using fetch
  106. Урок 106. 00:08:29
    Creating messages for successful payments
  107. Урок 107. 00:16:00
    Adding an animated loading state to our form
  108. Урок 108. 00:06:13
    Adding styles to make our page fully responsive
  109. Урок 109. 00:09:28
    Project summary