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