Design Web Design Front End Web Development

HTML 5 Visual Learning

A Comprehensive Example Set for Getting Up to Speed Fast
Rating: 3.3 out of 5 (5 ratings)
1,868 students
Created by Michael Filimowicz, PhD
English
English [Auto]
Web Design Fundamentals
Structuring Web-based Content
HTML 5

Requirements

  • No prerequisites

Description

HTML 5 Visual Learning strikes a balance between succinct explanation and complete visualizations of code so that the key concepts are learned through easy-to-follow examples. This course assumes no previous knowledge of HTML, web development or programming. In taking this course, you will learn how to structure web-based content. This course is based on my Mike Ludo (a pen name) web development books.

Who this course is for:

  • Beginners at self-learning front end web development skills.

Course content

1 section • 123 lectures • 2h 21m total length

  • About the Instructor
    00:37
  • A Note About the Videos
    00:36
  • Access the Code Files
    00:41
  • What This Course Assumes
    00:26
  • Files and Directories
    02:06
  • Using an FTP Client App
    02:24
  • The Other Tools
    05:40
  • Summary of Making .html Files
    00:35
  • Markup
    03:07
  • The Self-Closing Tags
    00:46
  • The Tree Structure (Parents and Children)
    01:18
  • Attributes and Values
    02:07
  • Tags vs Elements
    00:47
  • Structure, Style, Interaction
    02:27
  • Inline CSS
    01:54
  • Special Characters
    00:16
  • Semantic Tags
    00:50
  • Name Things Well
    00:20
  • Block and Inline Display Properties
    01:24
  • Bit.ly URL Shortener Note
    00:15
  • The Tags & Elements
    00:20
  • <!-- -->
    00:34
  • <!DOCTYPE html>
    00:36
  • <a>
    07:48
  • <abbr>
    00:28
  • <address>
    00:28
  • <area>
    03:19
  • <article>
    00:22
  • <aside>
    00:14
  • <audio>
    01:06
  • <b>
    00:54
  • <base>
    00:32
  • <bdi>
    00:29
  • <bdo>
    00:23
  • <blockquote>
    00:22
  • <body>
    00:28
  • <br>
    01:02
  • <button>
    03:17
  • <canvas>
    01:50
  • <caption>
    00:31
  • <cite>
    00:15
  • <code>
    00:16
  • <col> & <colgroup>
    01:45
  • <data>
    00:22
  • <datalist>
    00:34
  • <dd> , <dl> & <dt>
    00:19
  • <details> & <summary>
    00:29
  • <dfn>
    00:14
  • <dialogue>
    00:13
  • <div>
    00:19
  • <em>
    00:46
  • <embed>
    00:54
  • <fieldset> & <legend>
    00:24
  • <figcaption> & <figure>
    00:30
  • <footer>
    00:18
  • <form>
    01:37
  • <h1> - <h6> & <hgroup>
    00:27
  • <head>
    00:29
  • <header>
    00:13
  • <hr>
    00:19
  • <html>
    00:17
  • <i>
    00:22
  • <iframe>
    01:58
  • <img>
    01:35
  • <input>
    03:01
  • <ins> & <del>
    00:19
  • <kbd>
    00:11
  • <label>
    00:29
  • <li>, <ul> & <ol>
    02:00
  • <link>
    01:48
  • <main>
    00:22
  • <map>
    00:18
  • <mark>
    00:16
  • <meta>
    01:31
  • <meter>
    00:33
  • <nav>
    01:03
  • <noscript>
    00:16
  • <object> & <param>
    01:12
  • <optgroup> & <option>
    00:42
  • <output>
    00:29
  • <p>
    00:10
  • <picture>
    01:14
  • <pre>
    00:45
  • <progress>
    00:18
  • <q>
    00:23
  • <rp>, <rt>, <rtc> & <ruby>
    00:32
  • <s>
    00:17
  • <samp>
    00:18
  • <script>
    01:09
  • <section>
    00:12
  • <select>
    00:43
  • <small>
    00:09
  • <source>
    00:46
  • <span>
    00:26
  • <strong>
    00:05
  • <style>
    01:10
  • <sub>
    00:10
  • <sup>
    00:06
  • <svg>
    00:45
  • <table>, <tr>, <th>, <td>, <thead>, <tfoot>, & <tbody>
    01:21
  • <template>
    00:11
  • <textarea>
    01:50
  • <time>
    00:49
  • <title>
    01:02
  • <track>
    00:34
  • <u>
    00:33
  • <var>
    00:09
  • <video>
    01:05
  • <wbr>
    00:35
  • Modifying Website Templates
    09:02
  • Using a Web Editor Part 1 | Overview
    03:44
  • Using a Web Editor Part 2 | User Interface Tour
    04:30
  • Using a Web Editor Part 3 | Importing Fonts
    08:49
  • Using a Web Editor Part 4 | Styling Icons
    02:42
  • Using a Web Editor Part 5 | Working with Images
    03:26
  • Global Attributes
    03:48
  • Tags by Category
    00:16
  • Code Validation
    01:05
  • Developer Tools
    01:37
  • Where to Go Next
    00:13
  • List of All Bit.ly Links Used
    00:24
  • Online Resources
    00:17
  • Image Credits
    00:09

Instructor

Michael Filimowicz, PhD
Interdisciplinary Art and Design
Michael Filimowicz, PhD
  • 4.0 Instructor Rating
  • 20 Reviews
  • 3,177 Students
  • 3 Courses

Dr. Michael Filimowicz is Senior Lecturer in the School of Interactive Arts and Technology (SIAT) at Simon Fraser University. He also makes electronic music and videos as Myk Eff, produces performance visuals as VJ Loop Zone, and publishes web development books as Mike Ludo (given the generally unmarketable quality of long Polish last names!).

He has a background in computer mediated communications, audiovisual production, and new media art. His research develops new multimodal display technologies based on audiovisual colocation, exploring novel form factors across different application contexts including gaming, immersive exhibitions, telepresence and simulation-based training.