HTML5 Core Fundamentals for Aspiring Professional Developers

Get some unique industry tips that will help you design and develop professional looking websites.
5.0 (6 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
49 students enrolled
$19
$40
52% off
Take This Course
  • Lectures 109
  • Length 10.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 English

Course Description

Do you have a desire to build websites for your current or future career, your business, or just for fun? This course will show you a rich mixture of web design and web development using some of the industries best practices. What is truly unique is that the explanation is made very simple and is based on lessons taught at a college post-graduate program. The instructors have been teaching web development since 1995 and have a lot of experience in teaching people how to go from a "newbie" to a professional. This is the ultimate course taught by qualified faculty showing you how they mastered and built each file, with the most current technology.

This course includes:

  1. A companion handbook corresponding to each chapter with detailed best practices, tips and take-aways - an easy reference guide for your professional development.
  2. A Badge certifying and crediting your completing and understanding of the web development content in this course
  3. A donation to Literacy & Breakfast Club of Canada
  4. Over 8 hours of video content
  5. All code files and resources to use in your projects
  6. Quizzes testing your knowledge of the content
  7. Add these skills and projects to your portfolio!

What are the requirements?

  • While this course uses Adobe Dreamweaver, any web editor will work. At times we will use some of the features of Dreamweaver, we will always show the HTML/CSS and Javascript code that can be typed in.
  • There is no need for any previous development background.
  • All you need is a computer and access to this course online!

What am I going to get from this course?

  • Build a professional looking website.
  • Apply the new HTML5 tags to create a web page structure.
  • Create a unique look by adding new HTML5 image effects.
  • Apply CSS rules to create a professional looking website.
  • Incorporate Javascript to add interactivity to a website.
  • Create and manipulate SVG graphics with CSS transitions.
  • Create a responsive website with optimized layout for phones, tablets and desktops.
  • Build a form with new HTML5 tags.
  • Create animations with the canvas and DOM.

What is the target audience?

  • This web design and development course is designed to step the novice developer through the process of building a professional website. You will learn a number of development and design techniques that step you towards becoming a professional developer.
  • Aspiring web developers
  • Designers and professionals
  • Communications / Marketing or Project Managers who oversee electronic communication and would like a better understanding of development
  • People who would like to explore web development as a career
  • People looking to broaden thier skill set to include web
  • Individuals looking to sharpen their existing web development skills
  • Developers who would like to apply best practices to their work and projects
  • Streamline and speed up development using Dreamweaver (although Dreamweaver isn't a requirement for this course, you can use another development tool of your choice)

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welcome and Learning to Count
05:58

In this lecture, we will outline the tools and platform we will be using throughout this course.

96 pages

As promised in the introduction, we want to provide you with a free companion e-book that goes with this course. This book will give you more background information and explain some of the concepts in a little more depth. This is our way of saying thank you for registering for this course.

We also would like to encourage you to write a review for this course. By doing so, we will provide you access to the Building a Web Application for Business course. This is normally a $29 value but you can access it free when you write a review.

Again, thank you for joining us and enjoy your development. Don't hesitate to ask us questions if you're not sure of something. We are educators and we're here to help.

03:29

This lesson provides you with an overview of how computers count with Hexadecimal. This is very important to understand as that is how colour is defined on the web.

5 questions

You've just watched a lecture on counting with hexadecimal. Now it's time to apply that knowledge.

03:19

Browsers use a RGB (Red, Green Blue) colour model. In this lecture you will be shown how the hexadecimal values are used to define the colour. This is something you'll use throughout the entire course.

Color Quiz
5 questions
Section 2: Build HTML5 Website
Download the Entire Project Structure
Article
Introduction To HTML5 Tags & CSS Styles - Languages of the Web
07:25
Creating Website Folder Structure
01:15
Define Website & Setup Project
01:41
Create First HTML5 Page
Preview
01:51
Create & Link CSS Styles
03:15
Main Tag & CSS Rule
03:55
Header & Section Tags, Adding Images
05:55
Nav, Article & Aside Tags
Preview
05:49
CSS Rules for Nav, Article & Aside Tags
08:21
Styling Unordered List Tags for Nav
03:03
Styling Navigation Links With CSS Rules
06:18
Padding & Border CSS Rules
02:37
Linking Pages
06:51
HTML Code
2 pages
CSS Code
2 pages
5 questions

This quiz will ask you a number of questions on building your first HTML web site.

Section 3: CSS Transitions
Introduction to CSS Transition
Preview
01:59
Setup Project & Files
03:43
Create Structure & Add CSS Rules
08:55
Add Figure Tag & Images
05:47
Create CSS Classes
06:50
Add Transition Rules
04:36
Transitions
2 pages
Transitions Style Sheet
2 pages
5 questions

This quiz will ask you a few questions regarding the work you have done in building transitions.

Section 4: CSS Rules For Images - Masking Image & Text, Reflection
Introduction to Web Images, Which to use & Format
12:28
Displaying Images
04:13
Shape Mask on Image
Preview
06:44
Mask
1 page
Text Masking with Image
04:49
Text Mask
1 page
Reflection CSS Rule
09:49
Reflection
1 page
Optimizing Images
08:49
5 questions

These questions are based on general web images covered in the opening presentation.

Section 5: SVG Graphics, Styling with CSS
What is SVG?
Preview
07:21
Basic Shapes
Preview
06:49
SVG Inline in HTML5 page
08:01
Add CSS & Class Attribute to SVG Shapes
05:51
Writing CSS Style For Classes and IDs
04:43
Transform - Scale from Large to Small
05:09
Transform - Skew
02:34
Transform - Rotate
02:45
Transform Text Properties
03:34
5 questions

Test your knowledge of SVG graphics.

Section 6: Responsive Web Design - RWD
Introduction to RWD
Preview
07:47
Starting RWD Projects
02:26
Setup the HTML Tags and Structure
03:52
Layout of the Body of the HTML Page
09:07
HTML Footer
03:39
Create CSS Styles and Link to HTML Page
06:38
Link CSS Rules
06:00
Adding a Banner Image
07:52
Aside Tag CSS Rules
10:42
Media Query - Rules Specific for Phone Size
Preview
07:36
Media Query - Rules Specific for Tablet Size
05:20
Responsive HTML Code
1 page
RWD CSS
5 pages
5 questions

This quiz test your knowledge of RWD based on the lessons in this chapter!

Section 7: HTML5 Forms
Introduction to HTML5 Forms
Preview
04:00
Email, Phone & Range Inputs
05:21
Text Field Input
04:51
Color & Date Inputs
Preview
03:23
Radio Buttons, Checkboxes & Text Areas
04:16
Buttons, Required Field & Placeholder Text
03:17
Adding CSS Styles to Form & Table
03:53
Forms
3 pages
5 questions

Testing your knowledge of HTML forms, based on the lectures in this chapter.

Section 8: JavaScript - Web Language for Interactivity
Introduction to JavaScript
Preview
05:58
JS 01
1 page
Calling Functions
05:16
JS 02
1 page
Calling Function with Button
03:46
JS 03
1 page
Simple Evaluation - If Statements
06:02
JS 04
1 page
Create a Function to Determine Leap Year
14:30
JS 05
2 pages
Dynamic Text
06:17
JS 06
2 pages
Coin Change Program
17:03
JS 07
2 pages
Countdown to Midnight
09:17
JS 08
1 page
Validating a Form
12:43

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Phil Cowcill, Professor & Developer

Phil Cowcill has been working with educational technology since 1983. He started developing websites in 1994. In 1995, he started teaching full-time multimedia and web development at the post-graduate level. In 2011, Mr. Cowcill designed and delivered Canada's first Mobile Application Development program for a college. This program was also at the post graduate level.

He's very passionate about helping people learn. Most of his students over the years come with out having a programming background. He has found a way to explain difficult concepts to non technical people. This has provided people without a programming background to now successfully build web sites, interactive learning, games and native mobile applications for both Android and iOS.

Now that Mr. Cowcill has retired from full-time teaching, he's looking to share his experience and knowledge with a much larger "class". Mr. Cowcill is first and foremost an educator and is here to help upgrade your skill by helping you learn.

Instructor Biography

Krista Hildner, Designer & Developer at Development Made Simple, Teacher

Krista is a professional developer, professor and conference speaker. She travels throughout North America speaking on topics related to development, design and delivers workshops specializing in explaining complex concepts in a straightforward and simple way to people with a variety of backgrounds.

Her background is in Advertising and Communications with a focus toward digital and electronic communications and development of web and native applications for iOS and Android devices. She was hired to teach technology related courses at the post secondary and post graduate level in 2013, and has been strengthening her skills and building up lessons and techniques for teaching that she's anxious to share.

Krista's has a Diploma in Advertising, a Degree in Communications and a Post-Grad Certificate in Mobile Application Development.

Ready to start learning?
Take This Course