The Complete Front-End Web Development Course!

Joseph Delgadillo, Best-Selling Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
117 Lessons (14h 35m)
    • 1. Introduction to the Course

      1:46
    • 2. Atom Setup

      5:15
    • 3. Intro to HTML - Document Structure

      4:05
    • 4. Elements - Div, Span

      6:43
    • 5. i, b, p, a

      6:28
    • 6. ul, li, ol

      5:23
    • 7. Header, Footer

      5:21
    • 8. Section, Main, Article

      8:14
    • 9. H1-H6, Aside

      3:16
    • 10. Tables

      9:56
    • 11. Creating a Simple Text Site

      8:30
    • 12. Images

      3:30
    • 13. Forms

      4:48
    • 14. Inputs

      7:01
    • 15. Checkboxes

      4:55
    • 16. Radio Buttons

      4:40
    • 17. Select, Option, Buttons

      6:19
    • 18. HTML5 Videos

      7:13
    • 19. HTML5 Audio

      4:35
    • 20. HTML Doctypes

      2:58
    • 21. Meta Tags

      7:13
    • 22. Intro to CSS - Targeting, Color, Background

      15:58
    • 23. Element Specificity

      3:48
    • 24. ID Targeting, Margin, Border

      11:50
    • 25. Padding, Margin, Float

      8:11
    • 26. Max Width, Background Image

      16:43
    • 27. Switching to an IDE

      1:45
    • 28. Font Weight, Style and Family

      13:43
    • 29. Text Decorations

      3:51
    • 30. Text Spacing

      3:54
    • 31. Text Decoration Modification

      4:16
    • 32. Text Shadow

      7:42
    • 33. Pseudo-states

      8:52
    • 34. Border Radius

      8:27
    • 35. Positions

      9:04
    • 36. Pseudo-elements

      6:54
    • 37. Z-index

      5:50
    • 38. Viewpoint Width and Height, Overflowing Content

      7:20
    • 39. Transition Property

      5:30
    • 40. Intro to JavaScript

      4:23
    • 41. Alerts and Console Logging

      5:44
    • 42. Integers, Strings and Variables

      6:49
    • 43. Undefined Variables and Modifying Values of Variables

      5:27
    • 44. Boolean Operators

      2:48
    • 45. Comparing Values

      5:10
    • 46. If-statements

      10:53
    • 47. For Loops

      3:19
    • 48. Defining Functions

      6:04
    • 49. Event Handling

      9:06
    • 50. Setting an Elements Inner HTML

      2:49
    • 51. Arrays Part 1

      5:57
    • 52. Arrays Part 2

      6:55
    • 53. Arrays Part 3

      5:24
    • 54. Textareas and Getting the Values of Inputs

      13:43
    • 55. Function Parameters and Return Values

      7:34
    • 56. Multiple Parameters in Functions

      5:01
    • 57. Flexible Function Parameters

      11:57
    • 58. Exercise - Find the Missing Number

      7:52
    • 59. Exercise Solution

      7:33
    • 60. Classes Intro

      4:55
    • 61. Class Constructor, Instance Variables and Static Variables

      9:07
    • 62. Extending Classes

      13:39
    • 63. jQuery (JavaScript) Setup

      6:17
    • 64. Targeting Elements

      4:10
    • 65. Event Handling

      10:48
    • 66. Dropdown Menus

      22:22
    • 67. Making Our Dropdown Disappear

      4:36
    • 68. Multiple Targets, Events, Attr Method

      8:45
    • 69. Prepend, Append, HTML

      5:16
    • 70. preventDefault

      6:11
    • 71. Event.which, Switch

      9:01
    • 72. Custom Context Menu, pageY, pageX

      13:28
    • 73. Is Method

      7:54
    • 74. Writing Our Own Version of jQuery

      17:23
    • 75. Find Method

      4:40
    • 76. First and Last

      1:59
    • 77. Focusin and Focusout

      11:21
    • 78. Contains, Is, hasClass

      7:08
    • 79. Each Method

      2:36
    • 80. Callbacks

      7:14
    • 81. CSS

      5:03
    • 82. Intro to Bootstrap

      6:48
    • 83. Navbar Part 1

      6:44
    • 84. Navbar Part 2

      10:41
    • 85. Bootstrap Forms Part 1

      13:59
    • 86. Bootstrap Forms Part 2

      4:41
    • 87. Bootstrap Buttons

      5:43
    • 88. Pipboy Web Project

      9:14
    • 89. Pipboy Navbar

      7:35
    • 90. Main Page

      6:45
    • 91. Pipboy Image and Footer

      13:25
    • 92. Pipboy Colors

      5:03
    • 93. Pipboy Font and Styling the Main Nav

      13:03
    • 94. Scanlines

      6:19
    • 95. Navigation Styling

      9:43
    • 96. Tabs

      8:57
    • 97. Progress Bars

      10:11
    • 98. Stat Bars

      13:35
    • 99. Footer Fixes

      2:08
    • 100. Damage and Resistance

      5:27
    • 101. Icons

      12:51
    • 102. Inventory Template

      4:11
    • 103. Item List

      13:02
    • 104. Weapon Stat Container

      11:05
    • 105. Finishing Touches with JavaScript

      17:53
    • 106. Solving Problems with Programs

      5:15
    • 107. Manifest Files

      5:56
    • 108. Basic Setup

      3:14
    • 109. Getting Video URLs

      2:07
    • 110. Injecting JS

      5:56
    • 111. Getting Pretty Objects for Each URL

      4:46
    • 112. Creating Download Options List

      16:29
    • 113. Communicating Between the Page and Extension

      9:25
    • 114. Chrome Downloads API and Background Scripts

      7:59
    • 115. Receiving Messages and Downloading Files

      5:44
    • 116. Styling Our Extension and Publishing

      9:13
    • 117. Final Thoughts

      16:07

About This Class

If you would like to get started as a front-end web developer, you are going to LOVE this course! Work on projects ranging from a simple HTML page to a complete JavaScript based Google Chrome extension. We will cover the following technologies in this course:

  • Web development basics with HTML

  • Cascading Style Sheets (CSS)

  • JavaScript programming

  • jQuery JavaScript library

  • Bootstrap framework

This course covers the most popular web development frameworks, and will get you started on your path towards becoming a full-stack web developer!

Still not sold? Check out a few of the awesome reviews this course has received!

"Excellent Course! Highly Recommend It! Such a great hands on experience with this course."

"Very nice course, covers all the stuff you need, good voice and good explanation makes it perfect for people that are new to HTML. Also there's some best practices recommendations which are useful even for advanced developers."

"Excellence in giving the optimal set of tools for web development beginners seeking a well-rounded start for professional web development."

Thank you for taking the time to read this, and we hope to see you in the course!