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

HTML CSS and JavaScript for Beginners - A Web Design Course

Video Description

Explore how to build amazing interactive and dynamic websites using HTML, CSS, JavaScript, and jQuery

About This Video

  • Learn how to build interactive and dynamic websites using HTML, CSS, JavaScript, and jQuery
  • Learn to create interactive content online using JavaScript

In Detail

This course starts from scratch, teaches you how to create websites, and covers everything from the basic syntax—all the common tags used to develop web content, and how and where you can write HTML—top resources and links included.

You'll learn about HTML structure within web pages; explore HTML5 semantic elements; build your own HTML template; create HTML lists, hyperlinks, and add images; build tables for even more HTML structure; create forms with in-depth form examples and HTML tag explanations; add iframes and more cool HTML elements; create your own mini HTML site using only HTML; and everything you want to know about CSS, JavaScript, JavaScript Document Object Model (DOM), JSON, AJAX, and jQuery .

The code files for this course are available at: https://github.com/PacktPublishing/HTML-CSS-and-JavaScript-for-Beginners---A-Web-Design-Course

Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Chapter 1 : Introduction to web development and web design
    1. Introduction to web development 00:05:59
    2. How to use this course 00:02:35
  2. Chapter 2 : Learn HTML Course Section
    1. Introduction to HTML 00:03:21
    2. Getting to Know HTML 00:07:04
    3. What is an Element 00:04:45
    4. HTML page structure 00:04:48
    5. HTML metadata 00:02:25
    6. HTML Doctype 00:02:13
    7. Try it make index page 00:06:16
    8. Element Formatting HTML 00:03:24
    9. HTML Headings 00:03:44
    10. Self Closing Tags 00:04:26
    11. HTML Exercise #2 00:01:55
    12. HTML Comments 00:02:14
    13. Preformatted Text 00:02:50
    14. HTML Entities 00:03:17
    15. HTML text formatting 00:03:52
    16. More HTML text formatting 00:03:43
    17. Practice text formatting 00:03:19
    18. Divs and Spans to organize content 00:03:50
    19. HTML5 Semantic Elements 00:03:46
    20. Exercise 3 HTML5 Semantic Elements 00:04:46
    21. Placeholder Content 00:02:05
    22. Hyperlinks Anchor Tag 00:11:04
    23. Try it Build a Page 00:04:29
    24. Adding Images to your Page 00:03:34
    25. Exercise 4 Images 00:02:53
    26. HTML lists 00:05:21
    27. Exercise 5 Adding Lists 00:02:38
    28. Exercise 6 rebuild the first website 00:05:05
    29. Exercise 7 Nested Lists 00:04:52
    30. HTML tables 00:08:21
    31. HTML tables with Style 00:02:05
    32. HTML Forms 00:07:13
    33. Create a Contact Form 00:07:12
    34. HTML Form options 00:03:57
    35. Form Submission 00:03:56
    36. More input types HTML5 00:11:21
    37. More with HTML5 Forms 00:06:31
    38. HTML form fieldset 00:04:06
    39. Exercise 9 Form Practice 00:08:16
    40. HTML iframes. 00:03:22
    41. Exercise #10 Build a Site 00:09:48
  3. Chapter 3 : CSS Section
    1. Introduction to CSS. 00:02:30
    2. What is CSS 00:08:56
    3. Basics of CSS 00:04:36
    4. CSS Inline Style 00:04:35
    5. CSS Style Tag Styling 00:03:08
    6. Creating and using CSS file 00:03:43
    7. CSS selection and classes 00:07:27
    8. CSS Colors. 00:07:43
    9. CSS Background Property 00:07:12
    10. CSS Display Property 00:05:12
    11. CSS for List items 00:02:41
    12. CSS Exercise #1 style a simple website 00:04:13
    13. Measures and Properties CSS 00:03:17
    14. CSS Divs and Spans 00:04:08
    15. Styling Text CSS 00:13:20
    16. CSS font Family 00:03:15
    17. Google Fonts CSS 00:06:21
    18. CSS Exercise #2 00:06:57
    19. CSS Floats Images 00:03:58
    20. CSS float elements 00:04:32
    21. CSS Box Model 00:09:40
    22. Exercise 3 CSS 00:04:07
    23. Exercise 3 Solution 00:10:00
    24. CSS Outline 00:03:55
    25. CSS position 00:09:47
    26. Exercise #4 Image grid 00:03:54
    27. CSS fun with Hyperlinks 00:06:02
    28. CSS Pseudo Classes 00:04:37
    29. CSS and Tables 00:06:38
    30. CSS Overflow and MaxWidth. 00:04:45
    31. CSS Element Alignments 00:11:28
    32. Website Project Part 1 00:06:49
    33. Website Project Part 2 00:09:19
    34. Website Project Part 3 00:01:56
  4. Chapter 4 : Learn JavaScript section
    1. Welcome to JavaScript 00:05:54
    2. Write JavaScript 00:10:48
    3. Update HTML element 00:11:29
    4. JavaScript Code 00:05:49
    5. JavaScript Variables 00:08:17
    6. JavaScript Variables in Action 00:08:19
    7. JavaScript Try it Exercise #1 00:01:57
    8. Operators and assignments 00:07:50
    9. JavaScript Functions 00:06:58
    10. JavaScript Exercise #2 Function 00:05:15
    11. r look at functions 00:04:18
    12. JavaScript Objects 00:07:31
    13. JavaScript #3 Exercise 3 Objects 00:01:56
    14. JavaScript Arrays 00:07:06
    15. Array Methods 00:07:41
    16. Condition Statements JavaScript 00:05:03
    17. Combine with Functions 00:03:53
    18. JavaScript Switch 00:04:29
    19. JavaScript Loops 00:07:09
    20. JavaScript String Methods 00:06:57
    21. ES6 JavaScript 00:04:08
    22. Document Object Model DOM 00:05:41
    23. Eventlisteners JavaScript 00:02:17
    24. JavaScript Exercise #4 Event Checker Exercise 00:07:31
  5. Chapter 5 : JavaScript Document Object Model DOM
    1. Introduction to JavaScript DOM 00:02:10
    2. What is the DOM 00:04:16
    3. JavaScript DOM Manipulation 00:08:20
    4. JavaScript DOM Selection 00:07:00
    5. Element Text Manipulation 00:05:48
    6. Change Classes DOM 00:06:11
    7. Change Styles DOM 00:06:09
    8. Element Attribute Manipulation 00:07:09
    9. Interactive DOM Events 00:03:14
    10. Select Multiple Elements 00:05:37
    11. KeyPress Events. 00:05:04
    12. JavaScript Mouse Events 00:02:43
    13. JavaScript DOM Create your own Elements 00:05:05
    14. Event listeners to New elements 00:03:42
    15. Create Dynamic List 00:05:13
    16. List Project Exercise Input add new Element. 00:03:39
    17. Project Bonus Adding Object Value 00:02:42
  6. Chapter 6 : JavaScript JSON and AJAX
    1. Introduction to JSON 00:03:51
    2. What is JSON 00:06:06
    3. JSON as Data 00:09:25
    4. Solution Create JSON 00:05:50
    5. JSON details 00:05:27
    6. Solution output JSON to HTML 00:03:03
    7. JavaScript Arrays of Objects. 00:07:14
    8. JavaScript Solution Array Objects 00:04:48
    9. JavaScript Loop Object Data 00:01:04
    10. Solution Loop Object Data. 00:04:43
    11. JavaScript add to Object. 00:03:13
    12. JavaScript JSON methods 00:03:57
    13. Local Storage Values 00:03:28
    14. Solution Local Storage 00:03:11
    15. JavaScript Fetch 00:04:41
    16. Solution JavaScript Fetch 00:03:28
    17. Catching Errors Shorthand 00:02:45
    18. JSON with multiple items 00:03:09
    19. Solution forEach JSON 00:02:56
    20. JSON Conclusion 00:02:07
  7. Chapter 7 : Learn jQuery
    1. jQuery Introduction to section 00:02:18
    2. Why jQuery and What is it. 00:05:06
    3. Selecting with jQuery 00:04:10
    4. jQuery Fun with Styling 00:05:44
    5. jQuery Content 00:03:56
    6. jQuery Attributes 00:05:55
    7. Image and Form Attributes 00:05:56
    8. jQuery Click Events 00:04:27
    9. Document Ready Event Listener 00:03:30
    10. jQuery Mouse Events 00:03:06
    11. Keyboard Events jQuery 00:06:23
    12. jQuery On Event listener 00:03:10
    13. jQuery Effects Hide Show 00:02:51
    14. jQuery Fade Effect 00:05:13
    15. jQuery Slide Effect 00:01:47
    16. jQuery Animate Effect 00:04:59
    17. jQuery AJAX. 00:03:29
    18. Load and CORS error 00:02:50
    19. AJAX and Form data 00:05:55
    20. Multiple Items in response output 00:03:52
    21. Select Element. 00:03:23
    22. Course jQuery Exercise 00:07:37