Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Foundation HTML, CSS + Javascript, а также все другие курсы, прямо сейчас!
Премиум
  1. Урок 1. 00:14:19
    What is the World Wide Web?
  2. Урок 2. 00:02:32
    What is SuperHi?
  3. Урок 3. 00:16:25
    Writing our first HTML
  4. Урок 4. 00:07:42
    Writing our first CSS
  5. Урок 5. 00:10:37
    Sally Hart Photography Part 1
  6. Урок 6. 00:16:00
    Sally Hart Photography Part 2
  7. Урок 7. 00:04:45
    Sally Hart Photography Part 3
  8. Урок 8. 00:18:12
    Sally Hart Photography Part 4
  9. Урок 9. 00:15:58
    Overview and initial HTML
  10. Урок 10. 00:29:29
    Padding, margins and the box model
  11. Урок 11. 00:30:22
    Blockquotes and borders
  12. Урок 12. 00:12:19
    Navigation hovers and max widths
  13. Урок 13. 00:27:14
    Making our website responsive
  14. Урок 14. 00:06:49
    Project overview and initial HTML
  15. Урок 15. 00:08:20
    Header and hero section HTML
  16. Урок 16. 00:17:19
    Getting content into columns using CSS floats
  17. Урок 17. 00:15:44
    Using background-position and vertically centering text
  18. Урок 18. 00:04:42
    Multiple columns using fluid percentage widths
  19. Урок 19. 00:10:05
    Remaining HTML and a quick look at symbols
  20. Урок 20. 00:09:26
    Styling up quotes sections
  21. Урок 21. 00:04:10
    Rounding corners using border-radius
  22. Урок 22. 00:11:48
    Sharing CSS classes between elements
  23. Урок 23. 00:03:44
    Figuring out responsive breakpoints
  24. Урок 24. 00:08:05
    Removing floats and responsive styles
  25. Урок 25. 00:05:45
    Responsive styles and hiding elements
  26. Урок 26. 00:14:17
    Adding multiple media queries and fine tuning
  27. Урок 27. 00:04:48
    Styling specific elements using nth-child
  28. Урок 28. 00:12:22
    Fixing the header and using drop shadows
  29. Урок 29. 00:06:39
    Using the Chrome developer tools to inspect websites
  30. Урок 30. 00:02:13
    Project overview
  31. Урок 31. 00:03:42
    Initial HTML
  32. Урок 32. 00:12:18
    HTML continued and initial CSS
  33. Урок 33. 00:04:56
    Header position and active link style
  34. Урок 34. 00:11:08
    Introducing inline-block elements
  35. Урок 35. 00:05:04
    Varied element widths using classes
  36. Урок 36. 00:06:57
    Footer styles
  37. Урок 37. 00:07:24
    Header styles using flexbox
  38. Урок 38. 00:03:41
    Photo grid styles using flexbox
  39. Урок 39. 00:11:00
    Positioning elements using absolute position
  40. Урок 40. 00:07:22
    Changing element and color opacity
  41. Урок 41. 00:04:18
    Offset absolute position using negative values
  42. Урок 42. 00:04:36
    Smoothly transitioning CSS properties
  43. Урок 43. 00:09:15
    Changing element layer order using z-index
  44. Урок 44. 00:02:39
    Responsive tweaks using flexbox
  45. Урок 45. 00:05:41
    Hover transitions for navigation links
  46. Урок 46. 00:03:56
    Adding character to transitions using timings
  47. Урок 47. 00:04:56
    Grayscale image transitions using CSS filters
  48. Урок 48. 00:04:39
    Adding the list view page and initial HTML
  49. Урок 49. 00:03:58
    List view hover effect image styles
  50. Урок 50. 00:05:00
    Adding list separators using CSS content
  51. Урок 51. 00:06:57
    List image hover effect using transitions
  52. Урок 52. 00:02:28
    Project overview
  53. Урок 53. 00:07:45
    HTML structure using outer and inner containers
  54. Урок 54. 00:12:03
    Initial CSS and using 2x assets
  55. Урок 55. 00:10:51
    Hero background positioning and copy column
  56. Урок 56. 00:04:05
    Final navigation and products HTML
  57. Урок 57. 00:08:53
    Navigation and products style using flexbox
  58. Урок 58. 00:10:26
    Adding product overlay initial HTML and CSS
  59. Урок 59. 00:04:12
    Positioning the overlay using absolutes and rgba
  60. Урок 60. 00:06:15
    More playful hover effects using transition timings
  61. Урок 61. 00:06:19
    Initial breakpoint for tablet layout
  62. Урок 62. 00:06:37
    Responsive styles for tablet to mobile
  63. Урок 63. 00:02:19
    Mobile responsive styles
  64. Урок 64. 00:03:04
    Adding show filters link
  65. Урок 65. 00:05:08
    Using unordered list elements to style up the filters
  66. Урок 66. 00:01:29
    Final filter list style tweaks
  67. Урок 67. 00:03:26
    What is Javascript and jQuery?
  68. Урок 68. 00:12:22
    What types of data do we have in Javascript?
  69. Урок 69. 00:03:47
    Using the Chrome Javascript console
  70. Урок 70. 00:03:43
    Attaching our Javascript files to the page
  71. Урок 71. 00:06:42
    Showing and hiding content on the click event
  72. Урок 72. 00:08:32
    Building a navigation toggle using jQuery
  73. Урок 73. 00:05:22
    Getting attributes and using variables
  74. Урок 74. 00:04:04
    Using the this keyword in Javascript
  75. Урок 75. 00:05:42
    Filtering the products selection using jQuery
  76. Урок 76. 00:04:46
    Adding and removing the active link style
  77. Урок 77. 00:03:13
    Overriding CSS styles using !important
  78. Урок 78. 00:01:26
    Project overview
  79. Урок 79. 00:05:37
    A quick look at the head and body tags
  80. Урок 80. 00:04:29
    Initial HTML
  81. Урок 81. 00:05:16
    Header and navigation slideout styles
  82. Урок 82. 00:07:53
    Vertically aligning navigation using transforms
  83. Урок 83. 00:08:07
    Overlaid offset text effect using absolutes
  84. Урок 84. 00:02:35
    HTML finishing touches
  85. Урок 85. 00:04:03
    Offset text overlay continued
  86. Урок 86. 00:03:12
    Final lookbook section CSS
  87. Урок 87. 00:05:53
    Silky smooth rotate and scale transforms
  88. Урок 88. 00:04:37
    Using translate, scale and multiple transitions on an element
  89. Урок 89. 00:04:36
    Hamburger icon positioning and z-index
  90. Урок 90. 00:06:03
    Toggling CSS classes and states using jQuery
  91. Урок 91. 00:02:03
    Project overview
  92. Урок 92. 00:01:41
    Project setup
  93. Урок 93. 00:12:18
    Building a scroll function that counts the pixels to top
  94. Урок 94. 00:05:30
    Hiding and showing the header on scroll
  95. Урок 95. 00:10:05
    Setting the background color on scroll using extended if/else statements
  96. Урок 96. 00:03:50
    Progress bar HTML and CSS
  97. Урок 97. 00:03:42
    Setting the bar CSS using jQuery
  98. Урок 98. 00:08:19
    Figuring out how far down the page we have scrolled
  99. Урок 99. 00:03:09
    Setting the bar width dynamically
  100. Урок 100. 00:01:22
    Project overview
  101. Урок 101. 00:03:44
    Project setup
  102. Урок 102. 00:04:05
    Modal overlay CSS
  103. Урок 103. 00:02:58
    Increasing clickable area and changing cursors
  104. Урок 104. 00:03:45
    Positioning modal content in the center
  105. Урок 105. 00:02:29
    Hiding the modal and adding script tags
  106. Урок 106. 00:05:21
    Showing our modal on click and blocking default link action
  107. Урок 107. 00:03:47
    Closing our modal using a separate function
  108. Урок 108. 00:06:44
    Getting and setting HTML and using the this keyword
  109. Урок 109. 00:03:46
    Using variables for setting the HTML
  110. Урок 110. 00:07:43
    Making the design responsive
  111. Урок 111. 00:01:33
    Project overview
  112. Урок 112. 00:06:59
    HTML structure
  113. Урок 113. 00:06:07
    A look at the CSS
  114. Урок 114. 00:03:06
    What does overflow do?
  115. Урок 115. 00:07:16
    Initial transition using interval functions
  116. Урок 116. 00:02:47
    A little bit about arrays in Javascript
  117. Урок 117. 00:09:00
    Moving to the next slide dynamically
  118. Урок 118. 00:08:18
    Putting the slide functionality into separate functions
  119. Урок 119. 00:04:04
    Finding how many slides we have using .length
  120. Урок 120. 00:04:55
    Wiring up the prev/next buttons and cancelling intervals
  121. Урок 121. 00:05:04
    Setting the text for our current slide
  122. Урок 122. 00:06:25
    Making the slideshow loop through
  123. Урок 123. 00:05:45
    Passing data to functions using arguments
  124. Урок 124. 00:04:39
    Creating a function for moving the slide
  125. Урок 125. 00:08:11
    Making the arrow keys work for navigation