O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: Learn to Code for the Web

Video Description

Knowing how to code removes a barrier between your designs and the Web. Instead of creating countless Photoshop mockups, or trying to micromanage a web developer's actions, you can take your ideas directly to the Web. In this course, you'll master HTML, CSS, and JavaScript—the primary tools for designing sites and web applications—and discover what effective design tools they are.

Table of Contents

  1. An Introduction to HTML 00:17:25
  2. Putting It All Together: Building a Recipe Website 00:05:27
  3. An Introduction to CSS 00:08:26
  4. Separating Styling: Classes, IDs, and Other Segregation 00:06:36
  5. Placing Things Where You Want Them: CSS Positioning, Padding, and Margins 00:06:57
  6. Putting It All Together: Building a Personal Website 00:09:09
  7. HTML Forms 00:01:23
  8. Other Technologies Moving Forward 00:02:05
  9. Hosting your Project Online 00:02:01
  10. Course Introduction & Introduction to CSS 00:08:24
  11. Creating a Functional Spec 00:13:41
  12. Setting up your Environment 00:08:00
  13. Organizing your Project 00:03:54
  14. Learning CSS Basics 00:07:38
  15. Setting up Your CSS Files in Your HTML 00:13:34
  16. Setting up a reset.css in Your Project 00:06:57
  17. Looking at CSS Syntax 00:16:57
  18. Creating the Style Guide Introduction 00:01:52
  19. Setting up Your Style Guide 00:06:05
  20. Using Color in CSS 00:11:32
  21. Font Styles: Using Font Weight 00:08:35
  22. Font Styles: Using Font Size 00:05:37
  23. Font Styles: Using Font Family 00:02:23
  24. Font Styles: Adding to your Style Guide 00:08:05
  25. Creating Custom Fonts Using @Fontface 00:08:39
  26. Styling Links 00:09:09
  27. Padding: Adding Padding to Classes and DIV's 00:06:49
  28. Margins: Adding Margins to Classes and DIV's 00:05:20
  29. Borders: Adding Borders to Classes and DIV's 00:06:20
  30. Styling Backgrounds 00:10:47
  31. Presenting Your Style Guide: How to Present Your Style Guide to Others 00:02:12
  32. Introduction to Creating Page Templates 00:01:06
  33. Creating Your First Page Template 00:03:01
  34. Creating Div Styles: Adding Dropped Shadows 00:10:42
  35. Creating Div Styles: Adding Rounded Corners 00:07:19
  36. Creating Div Styles: Adding Translucency 00:10:09
  37. Creating Div Styles: Adding Gradients 00:06:13
  38. Creating Layouts Using DIV’s: Introduction to Creating a Layout Using Div's 00:00:53
  39. Creating Layouts Using DIV’s: Adding a Column 00:08:12
  40. Creating Layouts Using DIV’s: Adding Heights 00:04:30
  41. Creating Layouts Using DIV’s: Adding Widths 00:02:48
  42. Creating Layouts Using DIV’s: Adding Left and Right Floats 00:10:27
  43. Creating Layouts Using DIV’s: Adding Layers 00:11:34
  44. Creating a Page Structure for HTML 5 00:05:19
  45. Creating Buttons: Creating the Button 00:08:08
  46. Creating Buttons: Adding Hover State 00:08:24
  47. Creating Buttons: Adding Images 00:02:58
  48. Creating a Page Template Wrap Up 00:03:25
  49. Getting Ready for Production 00:00:51
  50. Cross Browser Compatibility 00:07:24
  51. Optimizing Your CSS: Add Multiples Classes on One Line 00:08:57
  52. Optimizing Your CSS: Streamlining CSS Attributes Using Shorthand 00:06:15
  53. Optimizing for Performance 00:09:32
  54. HTML5 And CSS - An Introduction To Modern Web Development 00:02:10
  55. About The Author 00:01:32
  56. Overview Of The Course 00:02:04
  57. Setting Up Your Workspace 00:01:27
  58. A Simple HTML Document 00:01:53
  59. The Basic Structure Of A Website 00:01:33
  60. Moving Files From Your Computer To A Webserver 00:01:55
  61. What Is HTML? 00:02:05
  62. HTML Syntax 00:02:22
  63. The Doctype 00:01:13
  64. The Document Head 00:02:50
  65. The Document Body 00:00:59
  66. Understanding Block And Inline Elements 00:02:11
  67. Paragraphs And Line Breaks 00:01:26
  68. Div And Span 00:01:49
  69. Links 00:02:29
  70. Images 00:02:33
  71. Basic Lists 00:01:50
  72. Lists Of Lists 00:01:17
  73. Tables 00:01:53
  74. Validation 00:03:05
  75. Understanding Document Structure In HTML 00:02:11
  76. Quotes 00:01:21
  77. Articles 00:01:34
  78. Navigation 00:01:03
  79. Figures 00:01:44
  80. Sections 00:01:43
  81. Headers And Footers 00:02:02
  82. Aside 00:01:31
  83. What Is CSS? 00:01:54
  84. Adding CSS To An HTML Document 00:02:03
  85. Basic CSS Selectors 00:03:16
  86. Grouping CSS Selectors 00:01:09
  87. Using Shorthand 00:01:19
  88. CSS Units 00:03:25
  89. Color In CSS 00:01:47
  90. The Cascade 00:03:30
  91. Understanding Web Typography 00:03:19
  92. Text Size 00:05:31
  93. Text Weight And Style 00:02:12
  94. Using Fonts 00:03:54
  95. Pseudo-Class Selectors 00:01:45
  96. Styling Links 00:02:01
  97. Dynamic Pseudo-Class Selectors - The Hover State 00:01:28
  98. Background Color In CSS 00:02:38
  99. Adding A Background Image To A Page 00:03:17
  100. Using Background Images On Other Elements 00:01:59
  101. Styling A Blockquote With Multiple Background Images 00:01:49
  102. Gradients With CSS 00:03:48
  103. Shadows In CSS 00:01:58
  104. Opacity And Transparency 00:01:40
  105. The CSS Layout Model 00:02:23
  106. Margins And Padding 00:02:56
  107. Borders 00:02:49
  108. Absolute Positioning 00:03:10
  109. Relative Positioning 00:01:06
  110. The Basics Of Float 00:01:57
  111. Clearing Floats 00:03:09
  112. Building A Simple, Floated Layout 00:05:09
  113. Styling The Navigation Sidebar 00:02:32
  114. Styling The Page Header 00:03:39
  115. Styling The Page Footer 00:02:13
  116. Understanding The Role Of Forms On The Web 00:01:52
  117. The Form Element 00:01:10
  118. The Input Element 00:03:20
  119. Form Labels 00:01:35
  120. Text Areas 00:01:30
  121. Buttons 00:01:19
  122. File Input Fields 00:01:57
  123. Hidden Fields 00:01:17
  124. Checkboxes And Radio Buttons 00:02:24
  125. Select Lists 00:02:44
  126. Fieldsets And Legends 00:01:57
  127. Laying Out A Simple Form 00:03:29
  128. Styling Our Form With CSS 00:02:48
  129. Advanced Form Styling Tips 00:04:13
  130. The Audio Element 00:02:10
  131. The Video Element 00:02:51
  132. Providing Fallbacks For Older Browsers 00:03:54
  133. What Is Responsive Design? 00:02:04
  134. Media Queries 00:02:24
  135. Images In Responsive Design 00:01:35
  136. A Simple Layout With Three Breakpoints 00:04:33
  137. Testing Different Platforms 00:03:14
  138. Debugging CSS Problems 00:02:57
  139. Accessibility Tips 00:02:37
  140. Common Problems When Making Websites Live 00:02:02
  141. Resources And Where To Get Help 00:01:57
  142. Meta - Overview 00:04:16
  143. Meta - Using these Videos 00:03:11
  144. Basics - Working with the Browser and a Text Editor 00:03:42
  145. Variables - Overview 00:05:51
  146. Variables - Working with String Expressions 00:04:04
  147. Variables - Working with Number Expressions 00:07:03
  148. Variables - Summary & Practice Overview 00:01:49
  149. Functions - Defining a Function & Calling a Function 00:15:26
  150. Functions - Scope & Examples 00:13:25
  151. Functions - Summary & Practice Overview 00:04:07
  152. Accessing Solutions to the Practice Problems 00:01:33
  153. Types - Overview 00:01:37
  154. Types - The typeof Operator 00:08:40
  155. Types - Numbers and Arithmetic Expressions 00:10:30
  156. Types - Strings 00:10:35
  157. Types - Boolean Types and Boolean Expressions 00:08:08
  158. Types - Complex Boolean Expressions 00:09:09
  159. Types - Functions that Test Types 00:09:25
  160. Types - Summary & Practice Overview 00:05:24
  161. Conditionals - if-statements & else-clauses 00:14:19
  162. Conditionals - Conditionals in Functions 00:09:35
  163. Conditionals - if-else-if & nested if-statements 00:14:59
  164. Conditionals - Writing Robust Functions 00:04:15
  165. Conditionals - Summary & Practice Overview 00:02:08
  166. Loops - while-loops and for-loops 00:12:12
  167. Loops - Using Loops in Functions 00:07:09
  168. Loops - Transforming Strings with Loops 00:07:56
  169. Loops - Breaking Out of a Loop 00:08:32
  170. Loops - Iterating Backwards! 00:03:37
  171. Loops - Summary & Practice Overview 00:02:13
  172. Arrays - Overview & Basic Operations 00:12:12
  173. Arrays - Similarities to Strings 00:05:16
  174. Arrays - More Examples 00:14:51
  175. Arrays - Array Types 00:06:14
  176. Arrays - Summary & Practice Overview 00:03:08
  177. Array Iterators - forEach 00:07:45
  178. Array Iterators - Map 00:10:13
  179. Array Iterators - Chaining 00:05:41
  180. Array Iterators - Filter 00:06:07
  181. Array Iterators - Some and Every 00:05:10
  182. Array Iterators - Reduce 00:13:20
  183. Array Iterators - Converting Between Strings and Arrays 00:05:11
  184. Array Iterators - Summary & Practice Overview 00:05:22
  185. Objects - Overview & Basic Operations 00:11:36
  186. Objects - The Relationship Between Objects and Arrays 00:04:28
  187. Objects - Complex Objects 00:03:41
  188. Objects - Checking Object Types 00:05:13
  189. Objects - Summary & Practice Overview 00:05:20
  190. Putting It All Together 00:08:49