The Complete HTML5 and CSS3 Bundle

5.0 Value Rating*

Struggling with the basics or advanced topics in HTML5 and CSS3? You’re in luck. Grab this bundle and learn everything it takes to master the languages that power the web. Learn from top tutors like Brad Hussey, Stone River eLearning, LearnToProgram and Richard Sneyd.

$49

$24.50
30
COURSES
1195
LESSONS
NEW
ENROLLED

LIFETIME ACCESS TO ALL THESE 30 COURSES
HTML5 & CSS3 Site Design
HTML5 and CSS3 Site Design

$10 Value

CSS Development with CSS3
CSS Development with CSS3                

$59 Value

Building Responsive Websites with HTML 5 & CSS3
Building Responsive Websites with HTML and CSS3

$10 Value

HTML and CSS for Beginners (with HTML5)
HTML and CSS for Beginners (with HTML5)

$49 Value

HTML5 and CSS3 Fundamentals
HTML5 and CSS3 Fundamentals                                                                                  

$10 Value

Build Websites from Scratch with HTML & CSS
Build Websites from Scratch with HTML and CSS                                                

$149 Value

Learn Web Designing & HTML5CSS3 Essentials in 4-Hours
Learn Web Designing and HTML5/CSS3 Essentials in 4-Hours

$10 Value

Mobile App Development with HTML5
Mobile App Development with HTML5                                                            

$99 Value

Learn HTML5, CSS and JavaScript Basics from Scratch
Learn HTML5, CSS and JavaScript Basics from Scratch

$10 Value

HTML & CSS - Learn to build sleek websites
HTML & CSS - Learn to build sleek websites

$54 Value

Create a Portfolio Website with HTML, CSS & Bootstrap
Create a Portfolio Website with HTML, CSS and Bootstrap

$39 Value

Getting Started with LESS - Beginner Crash Course
Getting Started with LESS - Beginner Crash Course

$24 Value

SASS - Beginner Crash Course
SASS - Beginner Crash Course                                                      

$24 Value

Interactive Web Design with CSS Animation & Transition
Interactive Web Design with CSS Animation and Transition

$34 Value

Fundamentals of CSS
Fundamentals of CSS                                                      

$18 Value

Working with HTML5 - For Web Developers and Designers
Working with HTML5 - For Web Developers and Designers

$125 Value

Basics of CSS
Basics of CSS                                                            

$9 Value

HTML5 course for Beginners Learn to Create websites
HTML5 course for Beginners Learn to Create websites

$9 Value

Building HTML5 Canvas projects from scratch
Building HTML5 Canvas projects from scratch

$9 Value

The Foundations of HTML CSS and JavaScript
The Foundations of HTML CSS and JavaScript

$25 Value

Fundamentals of CSS and CSS3
Fundamentals of CSS and CSS3                                                                                   

$149 Value

HTML Fundamentals
HTML Fundamentals                                                                                         

$50 Value

HTML5 & CSS3 - Build Responsive Websites with a Modern Flat Design
HTML5 and CSS3 - Build Responsive Websites with a Modern Flat Design

$50 Value

HTML5 & CSS3 - Applying Design to Wireframes
HTML5 and CSS3 - Applying Design to Wireframes                                                      

$29 Value

HTML5 & CSS3 Fundamentals
HTML5 and CSS3 Fundamentals                                                                                    

$50 Value

HTML5 & CSS3 - Website Wireframing
HTML5 and CSS3 - Website Wireframing                                                      

$50 Value

Sass for CSS - An Introduction
Sass for CSS - An Introduction                                                                                   

$29 Value

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

$10 Value

Build Your First Glass Web App Theme With HTML5 And CSS
Build Your First Glass Web App Theme With HTML5 And CSS

FREE

HTML5 & CSS3 - Building Responsive Websites
HTML5 and CSS3 - Building Responsive Websites

$50 Value

DETAILS OF THE 30 COURSES IN THE BUNDLE
HTML5 & CSS3 Site Design

HTML5 and CSS3 Site Design

Instructor: Stone River eLearning

OverviewDescriptionAbout

Build websites from scratch – the right way.

Need to learn how to build a website, or brush up on your coding skills to enhance an existing site? This course will show you, step-by-step, how to set up a web site from scratch and tips and tricks of the trade to make your site more attractive and user-friendly.

Need to learn how to build a website, or brush up on your coding skills to enhance an existing site? This course will show you, step-by-step, how to set up a web site from scratch and tips and tricks of the trade to make your site more attractive and user-friendly. From what tools you need to build your site and creating and formatting pages, to what to test and look for before your site goes live, award-winning trainer Geoff Blake gives detailed and valuable information that will help you to master HTML coding skills. Geoff’s casual tone, real world examples, and the follow-along video make this course as entertaining as it is informative.

Stone River eLearning

Stone River eLearning is owned and operated by Mark Trego and his support and development staff of outstanding eLearning enthusiasts from around the world. Mark originally hails from Bismarck, North Dakota in the U.S., but now resides in the little town of Sheldon, Iowa where he lives with his wife and 3 children on a working farm just outside of town.

Mark’s passions are entrepreneurship and online learning, so it was only natural that he gravitated towards what became the Stone River family of companies. Mark received his Master’s Degree in Business Administration/Entrepreneurship from Benedictine University in Chicago. His early career found him in finance, but he really found his passion as an education technology professional, instructional designer and teacher before starting Stone River eLearning in 2011.

7  Hours

61 Lessons

Lifetime Access

Course Curriculum

. Preview Course

Introduction
PreviewWelcome to HTML5 & CSS3! (1:26)
PreviewA Look At What We’ll Build (2:15)
Let’s Get Started!
PreviewPrograms I’ll Be Using (3:35)
PreviewIn The Beginning…HTML Fundamentals (11:20)
StartUnderstanding What CSS is All About (6:36)
StartViewing A Page’s Background Code (4:17)
Gettin’ Your Files Organized!
StartOrganizing Site Files (6:55)
StartCreating A Page and Understanding Index Files (5:43)
StartSetting Up An External Style Sheet (3:37)
Doin’ Nuthin’? Let’s Build A Web Layout From Scratch!
StartSetting Up The Page Structure (7:05)
StartConnecting the External Style Sheet and Testing (8:15)
StartInserting and Formatting the Site Header (7:37)
StartFinishing Up The Basic Layout (4:50)
StartDebugging for Internet Explorer (3:25)
StartUnderstanding How the Layout Works (5:51)
StartUsing Divs for Page Layout (7:15)
StartA More Economical Approach to Layout and CSS (7:52)
StartUsing Float And Clear (5:55)
StartCentering the Layout (9:02)
StartNesting Layout Objects (7:05)
StartSpacing Apart the Layout (9:13)
StartFinal Touches (4:47)
Insertin’ And Formattin’ Text!
StartInserting Text Into the Layout (4:27)
StartSetting Up Paragraphs and Headings (4:37)
StartAdjusting the Layout For Text, Part 1 (7:37)
StartAdjusting the Layout For Text, Part 2 (5:21)
StartFormatting HTML Headings with CSS (6:50)
StartFormatting Paragraphs (4:11)
StartUsing Class Rules to Format Text (5:24)
StartMore Formatting with Class Rules (9:08)
StartWorking More Efficiently with CSS (6:54)
StartInserting and Formatting Lists (6:42)
StartUsing A List to Build The Main Navigation Menu (10:17)
StartSetting Up the Footer Navigation (6:31)
Now It’s Time For Some Graphics!
StartInserting an Image (6:39)
StartResizing Images with your Graphics Editor (4:53)
StartControlling Graphics with CSS (7:08)
StartInserting the FeatureBox Images (7:12)
StartAdjusting the FeatureBox Layout (2:57)
StartSetting Up the FeatureBox Titles (6:20)
StartIllustrator, Photoshop, HTML, and CSS Workflow (7:29)
Site Rollout: From A Single Page To A Multi-Page Site!
StartGetting Ready for Site Rollout (3:48)
StartHow to Not Roll Out A Website (7:08)
StartRollout Part 1: Setting Internal Hyperlinks (4:38)
StartRollout Part 2: Creating The Site’s Pages (1:32)
StartPreviewing And Testing The Site (4:04)
StartA Final Thought on Site Rollout (5:27)
Inserting Additional Page Elements!
StartAdjusting the Site’s Hyperlink Formatting (7:10)
StartInserting A Simple Slideshow (8:30)
StartInserting and Formatting Tables (8:16)
StartInserting A Google Map (7:52)
StartFormatting A Customer Testimonial Page (7:08)
StartSetting Up A Contact Us Page (6:45)
StartFinalizing the Site (11:56)
StartOrganizing the CSS File (5:29)
Going Live: Uploading the Completed Site!
StartSetting the Remote Site Info (4:03)
StartUploading the Local Site to the Remote Server (2:25)
StartTesting the Live Site (2:05)
StartMaking Edits and Updating the Live Site (6:51)
StartTesting And Debugging For Other Browsers (9:54)
Wrapping Up HTML5 & CSS3
StartWhere to Go from Here (3:13)

CSS Development with CSS3

CSS Development with CSS3

Instructor: LearnToProgram, Inc.

OverviewDescriptionAbout

Create Flexible, Interesting, and Usable Designs for Desktop & Mobile Websites.

Anyone who has worked in web development for more than five minutes can tell you: the difference between an outstanding site and a terrible site is the quality of the CSS. With our CSS Tutorial for Beginners course, you can learn to make high-quality, graphically amazing and thoroughly impressive web sites.

Anyone who has worked in web development for more than five minutes can tell you: the difference between an outstanding site and a terrible site is the quality of the CSS. With our CSS Tutorial for Beginners course, you can learn to make high-quality, graphically amazing and thoroughly impressive web sites.

All it takes is a little creativity and a strong understanding of CSS design and code and your website will look exactly the way you want it to.

Zachary Kingston brings you this dynamic and comprehensive CSS course. This CSS Tutorial for Beginners is perfect for both beginners who don’t understand how to use CSS and experts who don’t understand why they cannot get their website to look exactly the way they want it to.

Watch over 4 hours of engaging video lectures, sharpen your skills with fun and creative lab exercises, and study the dozens of style sheet examples provided. With this CSS course, you will become fully competent in CSS and master of your website!

Take this ultimate CSS Development Course (With CSS3!) course now and start learning CSS.

LearnToProgram, Inc.

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram’s valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code” LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company’s most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

5  Hours

32 Lessons

Lifetime Access

Course Curriculum

Preview Course

Welcome to CSS
PreviewWhat is CSS? (5:38)
PreviewModifying Hello World (8:57)
StartCSS Selectors (14:02)
StartThe Three Ways to Deploy CSS (7:02)
StartIntroducing CSS3 (6:34)
StartChapter 1 Lab Exercise
Styling Specific Elements
PreviewStyling Text Elements (16:22)
PreviewStyling Tables and Lists (9:39)
StartStyling Backgrounds (9:13)
StartThe Sliding-Door Technique (Making a CSS Button) (11:56)
StartSprite Sheets and Images (8:08)
StartCreating a Drop-Down Menu with CSS (10:23)
StartChapter 2 Lab Exercise
The Box Model
PreviewIntroduction to the Box Model (10:01)
StartThe Content Area (10:27)
StartBorder and Online Styling (12:22)
StartWorking with Margins and Padding (11:08)
StartChapter 3 Lab Exercise
Animations with CSS3
StartCSS3 Transformations (24:31)
StartCSS3 Transitions (15:40)
StartCSS3 Animation (18:27)
StartChapter 4 Lab Exercise
Putting Elements Together
StartThe Display Property (9:47)
StartIn-Depth CSS Positioning (10:06)
StartFloating Elements (15:05)
StartChapter 5 Lab Exercise
CSS for Mobile
StartTesting Webpages on Mobile Devices (7:51)
StartElegant CSS for the Mobile World (22:22)
StartChapter 6 Lab Exercise
Final Project
StartCSS Final Project

Building Responsive Websites with HTML 5 & CSS3

Building Responsive Websites with HTML 5 and CSS3

Instructor: Stone River eLearning

OverviewDescriptionAbout

Build modern sites for any device using responsive design.

In this hands-on training course, award-winning veteran trainer Geoff Blake shows you, step-by-step, how to build beautifully designed, responsive websites that adjust and function perfectly on smartphones, tablets, and desktop displays.

In this hands-on training course, award-winning veteran trainer Geoff Blake shows you, step-by-step, how to build beautifully designed, responsive websites that adjust and function perfectly on smartphones, tablets, and desktop displays. You’ll begin with the fundamentals of responsive design, beginning with multiple style sheets, media queries and various expressions. Next comes the fun part: you’ll be guided through several in-depth chapters that walk you through the responsive design workflow, building HTML structure and CSS formatting for mobile and desktop displays; including tablets, desktop screens, and smartphones. Geoff shows you how to plan out your work, handle common issues that arise in a responsive layout, and how to handle various page components between device displays. Finally, the course closes with additional tricks, advanced techniques, and testing methods to ensure that your layout looks fantastic.

Stone River eLearning

Stone River eLearning is owned and operated by Mark Trego and his support and development staff of outstanding eLearning enthusiasts from around the world. Mark originally hails from Bismarck, North Dakota in the U.S., but now resides in the little town of Sheldon, Iowa where he lives with his wife and 3 children on a working farm just outside of town.

Mark’s passions are entrepreneurship and online learning, so it was only natural that he gravitated towards what became the Stone River family of companies. Mark received his Master’s Degree in Business Administration/Entrepreneurship from Benedictine University in Chicago. His early career found him in finance, but he really found his passion as an education technology professional, instructional designer and teacher before starting Stone River eLearning in 2011.

4  Hours

42 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction
PreviewWelcome (0:48)
PreviewA Look At What We’ll Build (1:36)
Responsive Design Fundamentals
PreviewKey Aspects Of Responsive Design (2:43)
PreviewDetermining Device Resolutions To Target (4:20)
StartWireframing Responsive Layouts (4:58)
The Basics: Multiple Style Sheets & Media Queries
StartThe Concept Of Using Multiple CSS Files (10:51)
StartMedia Queries & Multiple Style Sheets (8:59)
StartBuilding Media Queries Into A Single CSS File (7:40)
StartUsing Media Query Expressions (5:06)
Building HTML Structure & CSS For All Screens
StartSetting Up The HTML & CSS Files (4:21)
StartGetting Started With The Header (7:36)
StartInserting The Main Nav Menu (6:03)
StartInserting The Search Field (6:57)
StartProblems With Applying Floats (4:21)
StartIntegrating Google Fonts API (3:26)
StartBuilding The Hero Section Structure (4:27)
StartFormatting The Hero Section (9:06)
StartInserting & Formatting A Call To Action Button (9:53)
StartBuilding The Features Section, Part One (5:48)
StartBuilding The Features Section, Part Two (4:58)
StartInserting The Organize Section (8:20)
StartBuilding The Share Section (5:17)
StartBuilding The Call To Action Area (6:38)
StartInserting And Formatting The Footer (3:48)
StartFinishing Touches For The High Resolution Layout (4:08)
Building The Tablet Layout
StartSetting Up The Medium Resolution CSS & Testing The Media Query (7:03)
StartFormatting The Medium Res Header (4:10)
StartFormatting The Medium Res Hero Section (6:10)
StartFormatting The Features Section (2:14)
StartFormatting The Organize And Share Sections (5:19)
StartBuilding The Get Section & Finishing Up The Medium Res Layout (2:54)
Building The Smartphone Layout
StartSetting Up The Low Res CSS & Testing The Media Query (4:42)
StartFormatting The Low Res Header (2:53)
StartResolving Problems Caused By Floats (4:23)
StartFormatting The Low Res Hero Section (3:18)
StartFormatting The Features Section (1:46)
StartFormatting The Organize And Share Sections (2:59)
StartBuilding The Get Section & Finishing Up The Low Res Layout (3:07)
Advanced Techniques For Responsive Design
StartDisabling Device Smart Zoom (6:01)
StartTesting Your Responsive Layouts (4:29)
StartSetting Up Retina Display Graphics (6:23)
Wrapping Up
StartWhere To Go From Here (2:50)

HTML and CSS for Beginners (with HTML5)

HTML and CSS for Beginners (with HTML5)

Instructor: LearnToProgram, Inc.

OverviewDescriptionAbout

Learn HTML and CSS from Mark Lassoff – no experience required. Certification Available.

There isn’t a web site out there– whether it be WhiteHouse.gov, IBM.com or the site for your local high school– that isn’t written in HTML.

There isn’t a web site out there– whether it be WhiteHouse.gov, IBM.com or the site for your local high school– that isn’t written in HTML. If you do any level of web development– from editing pages on a WordPress site to designing original pages from scratch, understanding and being able to code in HTML and CSS can give you a level of control, and power over your designs that you’ve never experienced before. This course helps you learn HTML and CSS (versions 4.01 and XHTML) as well as prepares you for the future with coverage of HTML5.

In this course, designed, authored and hosted by master trainer Mark Lassoff, you will learn HTML and CSS, including everything you need to create a creative, quality and professional web site. Almost four hours of video instruction in punctuated lab exercises where you apply the very skills taught in the course. With an instructor available to answer your questions, and course with both wide coverage of HTML and CSS topics and deep discussion of those topics, there is no better or faster way to learn HTML and CSS for Beginners!

When you’ve completed the course, become a certified developer by passing LearnToProgram’s Certified HTML Developer exam. Certified developers are listed on the LearnToProgram web site and sent a printed certificate, digital badges and other materials relating to their certified status.

LearnToProgram, Inc.

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram’s valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code” LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company’s most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

6 Hours

50 Lessons

Lifetime Access

Course Curriculum

Preview Course

Welcome to HTML
PreviewWeb Development Technologies (5:19)
PreviewHello World! with HTML (6:26)
StartBasic Document Structure HTML 4.01/XHTML (8:30)
StartBasic Document Structure HTML5 (1:50)
StartUsing Comments in HTML (4:59)
StartHTML Head Elements (4:13)
StartChapter 1 Lab Exercise
Text Markup
PreviewText Markup (10:03)
PreviewDiv and Span Tags (5:16)
StartHTML5 Text Markup Tags (8:27)
StartSelecting Text Colour, Font and Font Size (20:16)
StartText Alignment, Decoration, Indentation and Text Transformation (5:38)
StartChapter 2 Lab Exercise
Working with Lists
PreviewOrdered Lists (3:16)
StartUnordered Lists (2:44)
StartCSS for Lists (4:45)
StartChapter 3 Lab Exercise
Creating HTML Links
StartCreating Internal and External Links (11:04)
StartCreating Anchors (7:38)
StartStyling Links with CSS Pseudo-Classes (3:05)
StartChapter 4 Lab Exercise
Working with Images and Media
StartDisplaying Images/Image Links/ Image Styling with CSS (8:18)
StartHTML5 Audio Embeds (5:04)
StartHTML5 Video Embeds (3:27)
StartChapter 5 Lab Exercise
HTML Tables
StartCreating Tables with HTML (6:36)
StartStyling Tables with CSS (12:23)
StartChapter 6 Lab Exercise
HTML Forms
StartCreating Text Form Elements (8:38)
StartCreating Radio Button and Checkbox Elements (8:58)
StartNew HTML Form Elements (9:39)
StartCreating Multi-Select Elements (6:09)
StartChapter 7 Lab Exercise
Understanding the CSS Box Model
StartUnderstanding the Content Box Model (2:19)
StartWorking with Margin and Padding and Borders (11:40)
CSS Based Page Layout
StartInline vs. Block Level Elements & Positioning Div’s (9:19)
StartFloat and Clear (13:18)
StartCreating a CSS Navigation Bar (9:52)
StartChapter 9 Lab Exercise

HTML5 and CSS3 Fundamentals

HTML5 and CSS3 Fundamentals

Instructor: Stone River eLearning

OverviewDescriptionAbout

Learn responsive website design for beginners with HTML5 and CSS3

When it comes to the world of technology, staying ahead of the curve is always a challenge. In the last year one aspect of this – the world wide web – has kicked up a gear with the introduction of HTML5, the newest version of the code that makes the web tick. If you learn HTML5 along with CSS3 (the next level of web design used on all modern websites), you’ll have a recipe for success; and this course will show you how.

When it comes to the world of technology, staying ahead of the curve is always a challenge. In the last year one aspect of this – the world wide web – has kicked up a gear with the introduction of HTML5, the newest version of the code that makes the web tick. If you learn HTML5 along with CSS3 (the next level of web design used on all modern websites), you’ll have a recipe for success; and this course will show you how.

Create a website from scratch with HMTL5 and CSS3

  • Build a complete functioning website section by section
  • Gain a solid knowledge base of HMTL5and CSS3 for future, more complex projects
  • Control your website’s appearance, functionality and navigability
  • Discover how HTML5 and CSS3 can be used in other areas of the web
  • Learn best practice techniques for building websites and web pages

Build Like a Pro with HMTL5 and CSS3 Design

The only way to effectively learn HTML5 and CSS3 is by diving right in and building websites from the ground up. That’s exactly what this course does. Designed for complete beginners, you’ll create a complete website section by section during 35 lectures and 5 hours of content.

You’ll start by becoming familiar with HTML tags and how they’re used, followed by the use of attributes and common settings. Once you’ve got a handle on basic HTML, you’ll move on to the fun stuff: CSS. You’ll use CSS for fonts, colours, lists, navigation menus, and more, adding a new element to your website with each section. Links, layouts, tables, forms and videos are all covered too.

If you know how to use a web browser and a text editor, you’re all set up for this course already. No extra software or tools are needed, and you can choose your preferred option of each to get going. By the time you finish, you’ll know everything you need to know to create beautiful, functional, easy to use websites of any kind.

About HTML5 and CSS3

HTML5

HTML or Hyper Text Mark-up Language is the language used for presenting websites and web content. HTML5 is the latest version, made official by the World Wide Web Consortium in 2014. Having a good grasp of HTML means you’ll be able to create, present and edit a whole variety of content on the web.

CSS3

CSS (Cascading Style Sheets) essentially ‘enhances’ HTML, giving developers and users more control over how pages and content is displayed. It is responsible for creating more visually engaging web pages, applications and interfaces. CSS3 is the latest version, and has many more extended features than previous versions – although it is backwards compatible.

Stone River eLearning

Stone River eLearning is owned and operated by Mark Trego and his support and development staff of outstanding eLearning enthusiasts from around the world. Mark originally hails from Bismarck, North Dakota in the U.S., but now resides in the little town of Sheldon, Iowa where he lives with his wife and 3 children on a working farm just outside of town.

Mark’s passions are entrepreneurship and online learning, so it was only natural that he gravitated towards what became the Stone River family of companies. Mark received his Master’s Degree in Business Administration/Entrepreneurship from Benedictine University in Chicago. His early career found him in finance, but he really found his passion as an education technology professional, instructional designer and teacher before starting Stone River eLearning in 2011.

5  Hours

36 Lessons

Lifetime Access

Course Curriculum

Preview Course

Course Intro
PreviewIntroduction (4:08)
Basic HTML
PreviewPage basics (11:32)
PreviewText Basics (8:23)
StartText Formatting (5:10)
StartLists (9:08)
PreviewImage Prep (9:39)
StartInserting Images (8:17)
StartWebsite Project (16:33)
CSS Basics
Startcss basics (9:32)
StartFont Styles (10:00)
StartColors (7:35)
StartList Styles (4:20)
StartAdvanced Selectors (9:48)
StartWebsite Project (8:02)
Links
StartLink Basics (6:39)
StartIn-Page links (2:38)
StartLink styles (4:14)
StartNavigation Menus (6:00)
StartWebsite Project (9:56)
Layout
StartBlock Spacing (12:14)
StartArranging the Page (8:46)
StartPositioning (7:32)
StartWebsite Project (20:16)
Tables
StartTables (6:51)
StartTable Styles (9:31)
StartWebsite Project (7:40)
Forms
StartForm Basics (5:40)
StartForm Elements (7:23)
StartHTML5 Form Elements (12:02)
StartForm Styles (8:18)
StartForm Website Project (11:36)
Video
StartVideo preparation
StartVideo HTML (8:32)
StartWebsite Project (7:14)
Wrap up
StartConclusion tips and resources (5:21)

Build Websites from Scratch with HTML & CSS

Build Websites from Scratch with HTML and CSS

Instructor: Brad Hussey

OverviewDescriptionAbout

Learn Web Development Essentials and Become a Web Developer From Scratch

HTML and CSS are the two most important languages for a new web developer to learn. They are also the easiest. If you’ve always wanted to build webpages, but were intimidated by the code, this course will help you learn your first two languages quickly and easily.

HTML and CSS are the two most important languages for a new web developer to learn. They are also the easiest. If you’ve always wanted to build webpages, but were intimidated by the code, this course will help you learn your first two languages quickly and easily.

Taking a step-by-step approach, this course will have you learning by doing, building several mini-websites from scratch.

Learn the Two Most Important Languages to Web Design Quickly and Easily.

  • HTML Foundations
  • Parent/Child Structure
  • CSS Foundations
  • ID Selectors
  • Coding and Styling
  • What Web Pages are Built Of

Every webpage that you see on the net is built using a language or code. There are many different programming languages that can make your website do various things, but the two most important to learn are HTML and CSS. In fact, even people who plan on allowing someone else to build their website should have a basic grasp of both languages. This way you can tweak things behind the scenes, or change some of your formatting without having to always rely on others.

Contents and Overview

This course of more than 77 lectures and 8 hours of content gives you a basic, yet thorough understanding of both HTML and CSS. The course focuses on having you begin writing code right away so you can learn through doing, and build your own completely functional HTML and CSS webpage at the end.

You’ll begin by learning what HTML and CSS are, so you can get an understanding of what it is that they do. During the course you’ll build several mini-websites that take what it is that you’ve learned and apply it to real world exercises to help cement the skills.

Everyone from aspiring web designers to bloggers, programmers to business owners can benefit from learning some HTML and CSS. Learn to begin building your own dynamic webpages or manage the page that you already have. If you plan on becoming a web programmer or a web designer yourself, HTML and CSS are the first two languages you’ll need to succeed. In fact HTML is required for anyone that wants to get into web development from any angle. Learning it simultaneously with CSS allows you to hit the ground running with page design.

Brad Hussey
A highly skilled professional, Brad Hussey is a passionate and experienced web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.
Brad’s determination and love for what he does has landed him in some pretty interesting places with some neat people. He’s had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.
Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

9  Hours

77 Lessons

Lifetime Access

Course Curriculum

Preview Course

Getting Started
PreviewWelcome & What We’re Learning (1:16)
PreviewWhat is HTML & CSS?
StartHTML Tags, Attributes & Elements
StartFile & Folder Naming Conventions
StartTypical Website File & Folder Structure
StartManaging Your Production Files
StartTools of the Trade
StartHTML Quiz
HTML Foundations: Part I
PreviewStarting Your First Web Page (1:14)
PreviewThe Doctype (1:31)
StartThe Basic Structure of an HTML Document (3:08)
StartPage Title (2:35)
StartHeadings (3:41)
StartParagraphs (2:24)
StartEmphasis & Strong Emphasis (2:48)
StartHTML Parent/Child Structure (1:45)
StartGet Your Hands Dirty! (6:35)
StartHTML Foundations Quiz I
HTML Foundations: Part II
StartHyperlinks (4:30)
StartLists (4:07)
StartImages (10:30)
StartAddress (2:40)
StartGet Your Hands Dirty! (6:02)
StartHTML Foundations Quiz II
HTML Foundations: Part III
StartTables (4:47)
StartForms (13:36)
StartHTML Special Characters
StartGet Your Hands Dirty! (7:01)
StartHTML Foundations Quiz III
HTML Foundations: Part IV
StartIDs & Classes (4:52)
StartSpan & Div (5:57)
StartHeader & Footer (1:46)
StartNav, Section & Article (6:11)
StartAside (2:53)
StartTime (3:21)
StartAbbreviations & Quotes (4:04)
StartGet Your Hands Dirty! (11:01)
StartHTML Foundations Quiz IV
CSS Foundations: Part I
StartThe Style Rule
StartInline styles (2:22)
StartInternal styles (4:22)
StartExternal styles (9:47)
StartCSS Selectors, Properties & Values
StartInheritance of Styles
StartPixels, Percentages, Points & Ems!
StartGet Your Hands Dirty!
StartCSS Foundations Quiz I
CSS Foundations: Part II
StartID Selectors (5:48)
StartClass Selectors (6:09)
StartDescendant Selectors (7:27)
StartGrouping Selectors (7:20)
StartGet Your Hands Dirty! (14:01)
StartGet Your Hands Dirty — Minor Update (2:19)
StartCSS Foundations Quiz II
CSS Foundations: Part III
StartThe Box Model
StartColours (or Colors) (3:25)
StartText Styling & Formatting (13:22)
StartSexy Typography
StartBorders (10:56)
StartBackground Images (9:15)
StartStyling Forms (18:33)
StartGet Your Hands Dirty! (19:15)
StartCSS Foundations Quiz III
CSS Foundations: Part IV
StartStyling Links (9:10)
StartBlock & Inline Elements
StartFloat & Clear (1:21)
StartCSS Positioning (8:09)
StartCSS Specificity
StartGet Your Hands Dirty! (Part1) (18:57)
StartGet Your Hands Dirty! (Part 2) (17:00)
StartCSS Foundations Quiz IV
Putting It All Together
StartFinal Website Walk Through (1:55)
StartAbout the Course Files (2:59)
StartHTML: Coding the Header & Hero (8:23)
StartHTML: Coding the General Content (3:06)
StartHTML: Coding the News & Events (5:43)
StartHTML: Coding the Footer (2:23)
StartCSS: Adding Normalize.css (1:54)
StartCSS: General Styles & Typography (14:31)
StartCSS: Styling the Header (6:09)
StartCSS: Styling the Hero (3:37)
StartCSS: Styling the General Content (2:42)
StartCSS: Styling the News & Events (5:56)
StartCSS: Styling the Footer (6:01)
StartThe Finished Product & Conclusion (1:15)
Start
StartWhere To Go From Here & Bonus Resources (3:20)

Learn Web Designing & HTML5CSS3 Essentials in 4-Hours

Learn Web Designing and HTML5/CSS3 Essentials in 4-Hours

Instructor: Brad Hussey

OverviewDescriptionAbout

Convert Photoshop Designs into Stunning HTML5 & CSS3 websites with confidence.

The Best Way to Learn HTML5 & CSS3
PSD to HTML5/CSS3 is a simple course that will teach you to take a Photoshop Mockup Design and hand-code it into a beautiful, semantic, valid HTML5 & CSS3 website.

The Best Way to Learn HTML5 & CSS3

PSD to HTML5/CSS3 is a simple course that will teach you to take a Photoshop Mockup Design and hand-code it into a beautiful, semantic, valid HTML5 & CSS3 website.

Start Speaking the Language Right Away

Just like learning a human language, the best way of learning is by speaking from day 1—this course is similar in the sense that we’ll begin speaking HTML5 & CSS3 right away!

I believe this is the best way to learn HTML5 and CSS3.

It’s simple. It’s easy. You can do it!

If you’ve always wanted to know how to build your own website, or have wanted a simple and comprehensive way to dive into PSD to HTML5 & CSS3, this course is definitely for you.

Real World Example

One of my students, who had no previous web design experience, took my course and ran with the skills he acquired. He built a brand new website for his Barbershop in Vancouver!

So, what are you waiting for?

Do you want to hand-code your first website in 4-hours? Let’s do this!

Brad Hussey
A highly skilled professional, Brad Hussey is a passionate and experienced web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.
Brad’s determination and love for what he does has landed him in some pretty interesting places with some neat people. He’s had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.
Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

5  Hours

24 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction
PreviewWelcome to PSD to HTML5 & CSS3
Preparation
PreviewWhat we are building
PreviewWhat you need to start
StartSetting up our Folder Structure
StartCode Chunks
The PSD
PreviewBecoming Familiar with the Layout
StartGathering Assets & Saving for Web (20:16)
StartPhotoshop Pop Quiz!
HTML
StartCoding an HTML5 Skeleton (13:51)
StartCoding the “Header”
StartCoding the “Content Section” (13:45)
StartCoding the “Footer” (6:53)
StartHTML5 Pop Quiz!
CSS
StartAdding a Stylesheet to your Website (3:20)
StartNormalize vs. Reset: What is the difference? (4:07)
StartGlobal Styles & Typography (20:15)
StartLayout: Styling the Navigation Bar
StartLayout: Styling the Header
StartLayout: Styling the “Content Section” — Part I
StartLayout: Styling the “Content Section” — Part II
StartLayout: Styling the Footer
StartCSS3 Pop Quiz!
Validation
StartValidating your HTML5 (3:33)
StartValidating your CSS3
StartValidation Pop Quiz!
Conclusion
StartReview (2:03)
Brand New Bonus Lectures!
StartHow to Buy Domain & Hosting for your Website (13:37)
StartHow to Code a CSS Sticky Footer
StartNew Lecture

Mobile App Development with HTML5

Mobile App Development with HTML5

Instructor: LearnToProgram, Inc.

OverviewDescriptionAbout

Learn to Develop Mobile Applications with HTML5, Javascript and the PhoneGap Library

Are you looking to create mobile apps that work across multiple platforms? If so, we’ve got you covered! Get ready to use PhoneGap to leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.

Are you looking to create mobile apps that work across multiple platforms? If so, we’ve got you covered! Get ready to use PhoneGap to leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.

This program comprehensively covers HTML5 mobile app development from top to bottom. By the end of this program, you’ll be able to…

• Set up your app development studio with tools of the trade.
• Test your app on both mobile and virtual devices
• Write appropriate HTML5 for mobile development
• Use CSS3 to create stunning mobile user interfaces
• Understand the “10 Foot Experience” (Mobile apps on your TV)
• Use web services (like Google APIs™)
• Parse XML and JSON content
• Store data on the device
• Create apps that work offline
• Integrate audio and video and control media playback
• Use geolocation services and Google Maps™
• Work with the device accelerometer hardware
• Use jQuery Mobile controls and styling
• Use a device’s internal storage system
• Work with device contacts
• Work with device notifications
• Understand in-app purchasing
• Place your finished app in the app store

Code along with master instructor Mark Lassoff as he walks you through everything you need to know about mobile app development with HTML5. Through dozens of code examples and multiple labs designed to reinforce your new skills, you’ll master the concepts you need to know in order to become a successful app developer in no time!

LearnToProgram, Inc.

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram’s valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code” LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company’s most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

5:50  Hours

46 Lessons

Lifetime Access

Course Curriculum

Preview Course

Development Environments
PreviewHow to use This Course (1:47)
PreviewHow to Complete Lab Exercises (1:18)
PreviewBecome an Amazon Appstore Developer (2:24)
PreviewCourse Intro (1:08)
StartTools of the Trade (9:38)
StartHello World– First App (20:24)
StartTesting on a Device (2:34)
StartThe “Apps” World– App Stores and Developers Opportunities (3:26)
HTML5 for Mobile
PreviewIntro to HTML5 for Mobile (1:25)
StartDocument Structure (15:03)
StartMulti Screen Applications (20:27)
StartObtaining Data from the User (7:01)
StartDisplaying Images (6:28)
StartLab Exercise 2
CSS3 for Mobile
PreviewIntro to CSS3 For Mobile (3:03)
StartStyling Text Elements (15:30)
StartBasic Page Layout (17:13)
StartBuilding Supporting Multiple Mobile Screen Sizes (6:57)
StartTelevision Based Android: The 10 Foot Experience (1:43)
StartLab Exercise 3
Service Oriented Architecture for Mobile
StartIntro to Service Oriented Architecture for Mobile (1:07)
StartReceiving Text from the Server (10:56)
StartSending Queries and Parameterized Queries to the Server (6:38)
StartParsing XML Data from the Server (10:39)
StartParsing JSON Data from the Server (14:51)
StartLab Exercise 4
Storing Data
StartIntro to Storing Data (0:49)
StartStoring Data “Permanently” with Store.js (14:08)
StartStoring on the Server (12:18)
Start”Offline” Apps (6:38)
StartLab Exercise 5
Audio and Video
StartIntro to Audio and Video (0:50)
StartPlaying Audio and Video (7:09)
StartControlling Audio and Video Output with Javascript (8:51)
StartBuilding a complete MP3 Player (7:59)
StartUsing the on-board Camera (12:23)
StartLab Exercise 6
Geolocation
StartIntro to Geolocation (0:49)
StartWhere Am I? (14:27)
StartDisplaying a Map (10:09)
StartWorking with Compass (9:40)
StartLab Exercise 7
Working with Accelerometer
StartIntro to Accelerometer (0:47)
StartObtaining Accelerometer Readings (6:56)
StartUsing the Accelerometer for Input (7:55)
StartLab Exercise 8
Interfaces with jQuery Mobile
StartIntro to Interfaces with jQuery Mobile (0:49)
StartjQuery Mobile Basics (5:48)
StartPages (10:10)
StartTool Bars (7:25)
StartButtons (4:40)
Interfaces with jQuery Mobile Part II
StartIntro to Interfaces with jQuery Mobile Part II (0:50)
StartForms (15:57)
StartListViews (8:18)
StartjQuery Events (5:46)
StartLab Exercise 9 and 10
Other Important PhoneGap API’s
StartPhoneGap API’s Intro (0:45)
StartFile API (14:14)
StartDevice API (3:50)
StartContacts API (13:07)
StartNotifications API (4:34)
Preparing for Distribution
StartIntro (1:02)
StartThe Config.xml (3:32)
StartDistribution (4:32)
StartApp Market Strategies (2:47)

Learn HTML5, CSS and JavaScript Basics from Scratch

Learn HTML5, CSS and JavaScript Basics from Scratch

Instructor: Richard Sneyd

OverviewDescriptionAbout

Everything You Need to Know to Start Creating your own Websites, Web Apps and Games with HTML5, JavaScript & CSS

HTML5 is the latest evolution of web technology, encompassing decades of research and development. It has matured to the point that it can be used to create stunning, responsive and truly interactive websites, apps and games.

HTML5 is the latest evolution of web technology, encompassing decades of research and development. It has matured to the point that it can be used to create stunning, responsive and truly interactive websites, apps and games. Plus, anything written in HTML5 is inherently cross-platform, so becoming proficient in the use of HTML5 is immeasurably valuable to you as a web, app, or game developer.

This HTML5 introductory course teaches you all the fundamentals of working with the three cardinal technologies of the modern web: HTMLCSS and JavaScript. By the end of the course, you will:

  • Understand and be able to use all of the most important and frequently used HTML tags.
  • Have a working knowledge of CSS.
  • Be able to use JavaScript to create dynamic content, interactivity and functionality on your web pages and sites.
  • Be able to implement form validation using JavaScript

There really is no quicker way to learn these 3 core technologies of the web (which constitute HTML5), so why wait, sign up and start learning today — you won’t regret it!

Richard Sneyd

Richard Sneyd (1st Class B.A Hons.) is founder and CEO of CyberMyth Games, and administrator of CMG Academy, the no. 1 source of professional quality online training for digital art, development and design courses. In the performance of his duties within the company, he must wear many hats, including that of a programmer, designer, digital 2D & 3D artist, sound designer, scriptwriter, texture artist, leader, marketer and business man.

He is also a fully registered, qualified, and highly experienced lecturer. His speciality subjects include 3D Modelling & Animation, Computer Game Programming, 2D Image Processing, Game Design, Desktop Audio, Psychology, Consumer Behavior, Human Resources & Business Management.

Richard is enthusiastic about his work, with students and colleagues noting that he is a highly dedicated and accomplished teacher. All of his courses are characterized by a steady, incremental flow of information, and a lucid teaching style which is easy to understand and follow for all.

4  Hours

27 Lessons

Lifetime Access

Course Curriculum

Preview Course

Course Intro
PreviewWhat Will I Learn? (3:15)
Introduction to Basic HTML
PreviewDownloading the Required Software (1:33)
PreviewBasic HTML5 Concepts (12:53)
StartCommonly Used Tags and Elements (14:56)
StartCommonly Used Tags Part 2 (13:10)
StartHTML Basic Concepts
Intro to Basic CSS
PreviewGetting Started with Aptana (5:35)
PreviewWorking with CSS Selectors and Rules (12:23)
StartStyling with Classes (13:08)
StartExternal Style Sheets (6:44)
StartInline Styles (4:30)
StartBasic CSS Concepts
Introduction to Basic JavaScript
PreviewIntro to JavaScript (9:26)
StartUser Defined Functions (8:07)
PreviewVariables (5:09)
StartArithmetic Operators (6:04)
StartDynamic Data Type (13:13)
StartStrings (4:32)
StartJavaScript Objects (8:46)
StartConditional Logic (If Statements) (7:23)
StartAlert Boxes (2:10)
StartForm Validation (13:14)
StartExternal Scripts (3:25)
StartHTML5 Canvas (12:51)
StartJavaScript Basics
Website Project
StartLet’s Build our First Website (8:39)
StartWebsite Project Part 2 (13:54)
StartWebsite Project Part 3 (9:29)
StartWebsite Project Part 4 (6:59)
StartWebsite Project Part 5 (10:16)
Conclusion
StartCongratulations! Now, What’s Next?

HTML & CSS - Learn to build sleek websites

HTML & CSS - Learn to build sleek websites

Instructor: Sandy Ludosky

OverviewDescriptionAbout

Level up your coding skills and create beautiful, responsive and accessible websites. Easy, fun and effective

Level UP your coding skills. The course level is from beginner to intermediate. You will learn to create a beautiful webpage with very easy steps and instructions.

Level UP your coding skills.

The course level is from beginner to intermediate.

You will learn to create a beautiful webpage with very easy steps and instructions.

  • You are a beginner: the 2 hands-on HTML & CSS tutorials teach the 101 of web development.
  • You are intermediate: you will learn the foundation for more advanced web development

By the end of the course, you will have a better understanding of HTML, CSS (Cascading Stylesheet), web development and responsive design.

As a student in this course, you will learn to:

  • create a fully functional website with HTML and CSS
  • add graphics and images
  • work efficiently with CSS
  • make the webpage responsive with media queries

Video lessons include:

  • 2 Hands-on HTML& CSS tutorials (start here if you are a complete beginner)
  • Guide to Web Hosting (coming soon)
  • 1 Final Project

Some Bonus include

  • Using CSS3 Animation
  • Adding CSS transition
  • integrating a Image Hover effect
  • Adding a Favicon (coming soon)

I am fast-lightening responder – if you have any question about the course, you can reach out to me in a private message or by posting your question on the discussion board.

I will make sure you have the best learning experience

Sandy Ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

3:50  Hours

44 Lessons

Lifetime Access

Course Curriculum

Preview Course

Welcome!
StartWelcome! (0:56)
PreviewCourse Guide (PDF) + downloadable Working Files
PreviewProject Files
HTML tutorial
PreviewHTML5 Cheatsheet | PDF
PreviewCreate your first HTML document | Headings (4:00)
PreviewTypographie & Formatting (3:03)
StartNavigation & Links (5:18)
StartHTML5 Semantic (3:54)
StartMeta Tags | Head section (8:00)
CSS Fundamentals
StartCSS Cheatsheet | PDF
StartIntro to CSS (Cascading Stylesheet) (4:13)
StartFormatting (8:37)
StartWorking with colors (7:40)
StartStyling the Navigation Bar (6:25)
StartPseudo-class (3:24)
StartClass & ID (4:32)
StartCSS Float (2-column Layout) (2:50)
StartCSS Clear Property (1:53)
StartThe Box Model (4:01)
StartMargin & Padding (7:21)
StartReverse Layout (1:33)
Responsive Design | Media Queries
StartMedia Queries | Tablet (7:48)
StartMedia Queries | Small Devices (8:15)
Alternate Layout
StartMedia Queries – I (6:56)
StartMedia Queries – II (4:26)
StartAdding Media (3:14)
StartEmbed a youtube video link (2:21)
Project – “Bon Voyage! Travel with Us!” – Part I
StartProject overview (3:51)
StartNavigation (9:55)
StartBanner (4:22)
StartAbout Us (9:42)
StartDestinations (11:03)
StartContact Us (9:56)
StartFooter (4:16)
StartGoogle Font & Font Awesome (5:30)
StartNavigation | Position Fixed (2:24)
StartNavigation | CSS z-index property (1:26)
Project – “Bon Voyage! Travel with Us!” – Part II (Media Queries)
StartTablet & Ipad (3:10)
StartMobile version 1 (9:48)
StartMobile version 2 (10:29)
Project – Bonus
StartNavigations links hover effects (5:04)
StartCSS3 Animation (2:20)
StartImages Hover effect (5:06)
StartSocial Media Icons transition effect (6:02)

Create a Portfolio Website with HTML, CSS & Bootstrap

Create a Portfolio Website with HTML, CSS and Bootstrap

Instructor: Sandy Ludosky

OverviewDescriptionAbout

Level up your web development skills, by creating your portfolio , with this project-based video tutorial

Create your online portfolio with this project-based tutorial. And, Learn about responsive design & fast web development. Bootstrap 3 is a lightweight and responsive framework for a better and faster mobile-friendly web development.

Create your online portfolio with this project-based tutorial. And, Learn about responsive design & fast web development.

Bootstrap 3 is a lightweight and responsive framework for a better and faster mobile-friendly web development.

You will learn to =

  • Effectively use the grid system to build a responsive and flexible multi-column layout
  • Showcase your artwork/portfolio items with a simple image hover effect
  • Use the FLAT UI colors palette
  • Use the inspector tool to customize the Boostrap CSS

PLUS, you will discover other resources like:

  • The Font Awesome icons designed by Bootstrap
  • The Google Fonts
  • The online favicon generator
  • W3C validation service to build an error-free webpage

– By the end of the course, you will have a better understanding of the responsive grid and the bootstrap documentation.

– By the end of the course, you will have a nice responsive one-page site that you can use as a personal page or a professional portfolio.

– By the end of the course, you will be well-versed with most of the Bootstrap built-in CSS and components. You will be ready to design sleek, mobile-ready websites with HTML and CSS

Lessons include topics like:

  • How to use the 12-column Grid System
  • Adding and customizing links and buttons
  • Using Font Awesome to easily include scalable social media icons
  • Using the pseudo-class :hover to create cool hover effects
  • HTML & CSS Cheatsheets (downloadable)
  • Master Bootstrap Cheatsheet (downloadable)

The video lessons will walk you through every process step-by-step.

Sandy Ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

1:50  Hours

19 Lessons

Lifetime Access

Course Curriculum

Preview Course

Welcome!
PreviewIntro (0:53)
PreviewGuide & Instructions | PDF 0:00
Header
PreviewNavigation Bar (9:17)
StartHeader & Banner (11:03)
Portfolio & Works Section
StartLayout & The Grid System
StartAdding Images
StartImage Hover Effect | Pseudo-class, CSS transition
Contact Us & Footer
StartResponsive Contact Form (15:18)
StartSocial Media Icons | Font Awesome (7:47)
StartThe Footer | Html entities (5:57)
Responsive template | Media Queries
StartResponsive-friendy | Ipad (7:40)
StartResponsive-friendy | IPhone (9:48)
BONUS Video Lessons
StartNavigation bar | Scrollspy.js (5:02)
StartUsing Google Font (4:27)
StartAdding a Favicon (3:14)
StartSuccessfully validate your webpage with W3C validator (2:21)
Supplementary Resources
StartHTML Tag references | PDF
StartCSS cheatsheets | PDF
StartBootstrap Master Cheatsheet

Getting Started with LESS - Beginner Crash Course

Getting Started with LESS - Beginner Crash Course

Instructor: Sandy Ludosky

OverviewDescriptionAbout

Learn to write better and more maintainable CSS with LESS

What is LESS ? Less is a CSS is a superset of CSS and a pre-processor programming language, often referred as “Dynamic CSS”.

LESS syntax is modelled after traditional CSS
LESS compiles into standard CSS3

What is LESS ?

Less is a CSS is a superset of CSS and a pre-processor programming language, often referred as “Dynamic CSS”.

  • LESS syntax is modelled after traditional CSS
  • LESS compiles into standard CSS3
  • LESS allows you to extend your CSS with great features such as :
    • Variables for faster maintenance
    • Mixins as re-usable objects
    • Nesting for a cleaner stylesheet structure
    • Math calculations with the Operators.
  • Less code and more work done !

Why use LESS ?

While CSS is a great language, it has its limitations.

For example, if you have a color code used multiple times in your stylesheet, you need to edit this one multiple times to update your design. Very tedious process!

LESS is great for the following reasons. :

  • Allows to cut down one code and save time
  • Reduce repetition (DRY) and mistakes
  • It makes logical sense to break out CSS into multiple files with the feature

Every web developer or front-end UI engineer should use LESS over traditional CSS

=> What you will learn:

In the first section, you will :

  • learn how to define Variables for faster maintenance.
  • learn how to declare Mixins as reusable objects
  • learn about Nesting for a cleaner stylesheet structure.
  • learn how to perform mathematical calculations with the Operators

On a more advanced level, we will discuss about:

  • Built-in functions
  • Parametized and Guarded mixins
  • The @import directive to include external stylesheets in one single document.

In a last chapter, you will apply what you have learned with a hand-on project.

=> The objectives of this course is to help you

  • create smarter and cleanerer stylesheets,
  • cut down on code,
  • keep your code DRY (Don’t Repeat Yourself) and organized.

=> By the end of the course,

  1. you will understand how to use the LESS features and compile the less stylesheets into standard CSS
  2. you will understand how to easily integrate mixins libraries as well as external resources such as Font Awesome and Google Font into your project.
  3. You will also be able to install and use the application SimpLESS to compile your less files into beautiful CSS.
    1. SimpLESS is a GUI application for Less and Sass compilation.
    2. SimpLESS is simple to learn for first-time users and it is compatible with both PC and MAC.

In Getting Started with LESS, learn to take your CSS to the next level and write better styling code. With several demonstrations and examples. you will see the power of the pre-processor language.

Sandy Ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

1:50  Hours

21 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction
StartWelcome! (1:08)
PreviewCourse Instructions
LESS Basics
PreviewIntroduction (0:39)
PreviewCourse Materials & Online Resources
StartVariables (8:10)
StartNested Rules (10:13)
StartMixins (10:52)
StartOperators (6:03)
LESS Advanced
StartIntro Advanced Less features (0:47)
StartParametized mixins with default (13:01)
StartGuarded mixins (6:10)
StartBuilt-in Functions (2:36)
[email protected] Directive (7:22)
Project Demo
StartIntroduction (1:08)
StartProject Overview (2:10)
StartInstructions
StartThe Grid (10:14)
StartHeader (5:47)
StartBody – Main Section (8:47)
StartFooter (2:16)
StartMore (3:50)

SASS - Beginner Crash Course

SASS - Beginner Crash Course

Instructor: Sandy Ludosky

OverviewDescriptionAbout

Take your CSS to the next level & Speed up your web development process with Sass

What is SASS? Sass (Syntactically awesome stylesheets) is a CSS preprocessor.

Sass allows to write more maintainable and more concised CSS
Sass allows to use great CSS features with superpowers.

What is SASS?

Sass (Syntactically awesome stylesheets) is a CSS preprocessor.

  • Sass allows to write more maintainable and more concised CSS
  • Sass allows to use great CSS features with superpowers.
  • Some features include:
    • Writing and defining Variables
    • Clear inheritance with Nested Rules
    • Using Mixins as re-usable objects
    • Doing maths with the operators (+, -, *, /) and functions
  • And, it is actively supported by a large community of developers to stay ahead.

Why use SASS ?

While CSS is a great language, it has some limitations.

For example, if you have a color code used multiple times in your stylesheet, you need to edit this one multiple times to update your design. Very tedious process!

Sass is the most reliable, stable, and powerful professional grade CSS extension language. It has been chosen as the premier CSS extension language.

Sass is great for the following reasons. :

  • Less code and repetition – allows to cut down one code and save time
  • The stylesheet are formatted nicely with a more dynamic code
  • It makes logical sense to break out CSS into multiple files with the feature

Every web developer or front-end UI engineer should use a pre-processor language over traditional CSS

In SASS – Beginner Crash Course, you will discover the power of Sass and learn to take your CSS to the next level. With several demonstrations and examples. you will see the power of the pre-processor language.

=> The objectives of this course is to help you

  • create smarter and cleaner stylesheets,
  • cut down on code,
  • keep your code DRY (Don’t Repeat Yourself) and organized.

As part of this tutorial, we will use the online application Sassmeister as a playground to compile the Sass syntax into beautiful and standard CSS.

=> Topics include :

  • Define Variables for faster maintenance.
  • Declare Mixins as reusable objects
  • Nesting for a cleaner stylesheet structure.
  • Perform mathematical calculations with the Operators and Functions

On a more advanced level, we will speak about:

  • Parametized Mixins with default
  • Inheritance and Extend
  • Placeholder
  • The @import directive

In this tutorial, you will easily and surely get started with CSS programming and learn to write better CSS.

Sandy Ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

1  Hour

13 Lessons

Lifetime Access

Course Curriculum

Preview Course

Welcome!
PreviewStudent’s Guide & Course Instructions
SASS Basics
PreviewIntro Basic (0:56)
StartCourse Materials & Online Resources
StartVariables (5:31)
StartNesting (2:31)
StartMixins (10:02)
StartOperators (4:22)
SASS Advanced
StartIntro Advanced Sass (0:46)
StartParametized Mixins with default (6:46)
StartExtend (5:49)
StartPlaceholder (1:28)
StartBuilt-in Functions (6:19)
[email protected] (5:05)

Interactive Web Design with CSS Animation & Transition

Interactive Web Design with CSS Animation and Transition

Instructor: Sandy Ludosky

OverviewDescriptionAbout

Bring life to your webpage and impress your users with CSS transition

With the CSS3 transition properties, it is possible and easy to add interactivity and enhance the user experience of your webpage by using CSS only. CSS3 transitions allows you to change property values smoothly over a given duration.

With the CSS3 transition properties, it is possible and easy to add interactivity and enhance the user experience of your webpage by using CSS only. CSS3 transitions allows you to change property values smoothly over a given duration.

In this course, we will explore the different options of animation techniques that you can use to bring elegant animations and life to a webpage.

The course covers a range, from simple to complex, of demonstrations and examples that you can use in your own work or project to impress your audience.

The course also includes a challenge assignment as well as a final project to apply what you have learned and put all of it in practice.

Topics include:

  • The CSS transition fundamentals
  • The transition properties
    • transition-duration
    • transition-delay
    • transition-timing-function
  • Browser support and performance with the CSS vendor prefixes
  • A challenge assignment
  • Project : a portfolio page

You will learn how to:

  • Create smooth transition to animate property changes
  • Use the shorthand
  • Use the transition-timing-function to control the speed of the curve
  • Animate color changes
  • Fade elements in and out
  • Create multiple transition effects
By the end of the class, your will be able to use the concepts and examples presented to impress your audience with fancy animation effects.
if you are developer, you will know how to create nice animation effect with CSS.
if you are a designer, you will take your CSS skills to the next level and learn to add interactivity to a web page without jQuery
Join me in Interactive Web Design with CSS Animation & Transition to learn how to create an enhanced user experience and take your web design skills to the next level with CSS transition.

Sandy Ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

1  Hour

24 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction
StartWelcome! (1:10)
PreviewCourse Introduction
PreviewCourse requirements (1:08)
PreviewWhat you need to get started
StartExercice Files (1:07)
CSS Transition Fundamentals
StartThe transition property (2:48)
StartBrowser support and Vendor Prefixes (2:48)
StartCSS syntax | Transition properties & Vendor prefixes 0:00
CSS Transition demonstrations
StartDemos overview (0:16)
StartBlue to red (3:50)
StartSquare to rectangle (3:31)
StartSquare to circle (3:16)
StartAnimatable properties
Challenge – Squeeze page
StartChallenge overview (0:27)
StartChallenge instructions
StartAnimating color changes (2:59)
StartFading elements in and out (4:19)
Project : portfolio
StartProject overview (0:57)
StartCourse Materials
StartNavigation Bar : smooth transition effect (2:55)
StartHeader – Creating a Mouseover Fade Effect (2:05)
StartAbout Section – Image Hover Effect (5:13)
StartThe Gallery – Multiple Transition Effects (7:06)
StartConclusion (0:30)

Fundamentals of CSS

Fundamentals of CSS

Instructor: Daniel Stern

OverviewDescriptionAbout

Build a Foundation with CSS You Can Use For Life!

More content is accessed on the web today than ever before. None of that content would be very appealing to customers with CSS – Cascading Stylesheets.

More content is accessed on the web today than ever before. None of that content would be very appealing to customers with CSS – Cascading Stylesheets.

CSS allows us to add professional styles to our web projects. It also helps users determine which information is important to them, and find it quickly.

In this course, we’ll be learning about the context of CSS – when and why it was created, and how it’s changed since then. We’ll look at an overview of CSS, including its main uses, how it is added to website, and its primary features.

In the following two chapters, we’ll learn and apply concrete examples of coloring, resizing, styling and repositioning HTML elements.

By the end of this course, you will be equipped with knowledge that, combined with further learning and hard work, can make you a respectable candidate for most CSS developer positions. You can also continue your education with more advanced CSS topics.

Who this course is for:

  • Beginner developers with no experience whatsoever, OR
  • Developers experienced in other languages (Java, PHP, etc) but not CSS and who want to move into web development

Daniel Stern

Known in development circles as “the Code Whisperer,” Daniel Stern has been believed to possess a supernatural connection to computers ever since he talked the supercomputer Deep Blue off the roof of a twelve-story St. Petersburg apartment building, following its shameful loss to Gary Kasparov.

He can often be found singing softly to his tablet, or gently caressing his aluminum keyboard in his arms.

Daniel has been working as a front end and full stack developer in the tech industry since 2011. He’s developed single-page applications for banks like CIBC, charities like the Ontario Institute for Cancer Research, and at ad agencies like McLaren McCann, TraffikGroup and Olson. Throughout his labors, he’s worked on computer programming in his spare time because, well, he’s obsessed with it.

In addition to being featured in both CSS Weekly and JavaScript weekly, Daniel is well-known throughout the open-source community for maintaining several open-source tools, most notably the Angular.js and LESS-based tool, Range .css and the Angular .js audio tool, ngAudio.

In addition to being trusted by the open source community to develop top-quality, functional code, Daniel has also been invited to speak at numerous conferences including Full Stack Conference 2014 in London, England.

Daniel is an active learner and very passionate about the following technologies,

– Node.js
– Angular.js
– TypeScript
– MongoDB
– Brackets, the Open Source Code Editor
– Esprima
– LESS
– Grunt
– Yeoman
– Many, many, many more

2:35  Hours

28 Lessons

Lifetime Access

Course Curriculum

Preview Course

CSS in Content
StartCourse overview (6:45)
StartWhat Was CSS Originally Intended To Do? (7:06)
StartDEMO: The Most Basic CSS Usage (1:48)
StartChapter Summary (2:24)
Overview of CSS
StartWhat is CSS? (3:43)
StartWhere Can You Find CSS? (2:40)
StartWhat CSS can and can’t do (2:20)
StartOptional Demo – Serving an HTML Application (5:19)
StartHow Do we Add CSS to a Website? (4:08)
StartDemo – Adding CSS to website (6:28)
StartCSS Selectors (2:37)
StartDemo – Using CSS Selectors (4:55)
StartModule Summary (1:12)
Styling HTML Elements with CSS
StartWhy do We Style CSS Elements? (2:46)
StartCSS and Fonts (3:11)
StartDEMO: Styling Text with CSS (6:55)
StartStyling HTML Elements with CSS (6:11)
StartDEMO: Sizing HTML Elements with CSS (8:06)
StartColorizing HTML Elements with CSS (4:46)
StartDEMO: Colorizing HTML Elements with CSS (7:06)
StartSummary of this Chapter (0:51)
Arranging Element with CSS
StartIntroduction (1:01)
StartAdding Margin with CSS (1:27)
StartAdvanced Positioning with CSS (3:48)
StartDEMO: Positioning Elements Absolutely and Relatively (7:01)
StartPositioning HTML Elements with Float (1:36)
StartDEMO: Positioning HTML Elements with Float (6:46)
StartSummary of this Course (4:17)

Working with HTML5 - For Web Developers and Designers

Working with HTML5 - For Web Developers and Designers

Instructor: SkillBakery Studios

OverviewDescriptionAbout

Explore HTML 5 in detail with all its major features

What you’ll learn

Once you complete this course you will be able to take full advantage of HTML5 and its features using which you can develop mobile applications, offline applications and not mention cool web sites and web applications

This course covers the various features that’s being offered by HTML5

In this course we will be covering

1. What is HTML5 and Why we need it

2. Features of HTML5 which includes

  • New Structural Tags
  • New Content Tags
  • New App-Focused Tag
  • Deprecated Tags

3. Understanding HTML5 Documents

4. How to structure HTML5 Documents

5. Working with HTML5 Forms

6. Various API Supports including

  • Canvas
  • Drag and Drop
  • Offline Applications
  • Video

7. Associated Technologies including

  • Geolocation
  • Web Storage
  • Web SQL
  • Web Sockets
Who this course is for:
  • Web Developers
  • Web Designers
  • Aspiring Web Designers
  • Aspiring Web Developers
  • Front-End Designers

SkillBakery Studios

SkillBakery is one of the fastest growing online education company.

Our vision is to provide high quality education which is affordable and accessible to everyone

We believe that every one has their own way of learning and grasping things and that’s why we provide self-paced HD quality contents,so you can learn what you love at your convinience

We currently offer courses in web development and will soon be publishing new courses in other categories as well

We are committed to bring courses on new topics and we try to release one new course every month

So keep visiting us, you will surely find something for yourself here.

2:53  Hours

54 Lessons

Lifetime Access

Course Curriculum

Preview Course

Introduction
StartIntroduction (1:13)
StartA bit of HTML History (3:19)
StartWhy we need HTML5 (1:00)
Features of HTML5
StartHTML5 – A comparison with previous version (2:50)
StartNew Structural Tags (3:34)
StartNew Content Tags (2:07)
StartNew App-Focused Tags (6:24)
StartDeprecated Tags in HTML5 (2:19)
StartAPI Overview (2:03)
Working with HTML5 Documents
StartUnderstanding Content Models (4:18)
StartUnderstanding Outline Algorithm (4:15)
StartUnderstanding Doctype and Character Encoding (1:59)
Structuring HTML5 Documents
StartUnderstanding Basic Page Structure (2:12)
StartStructuring HTML5 Page (4:32)
Forms in HTML5
StartHTML5 Forms – Introduction (0:55)
StartNew Input Types in HTML5 (4:51)
StartNew Input Attributes in HTML5 (4:51)
StartForm Validation in HTML5 (6:33)
HTML5 API Support
StartIntroduction (0:18)
StartCanvas Overview (2:53)
StartMaking use of Canvas Drawing Methods (7:05)
StartDrag and Drop Overview (1:43)
StartDetecting Drag and Drop Support (1:59)
StartCreating a drop zone (2:41)
StartReceiving drops without a drop zone (3:41)
StartDrag Drop Image Example
StartOffline web application overview (2:01)
StartOffline Event Progression (1:38)
StartIntroduction to Cache Manifest (2:50)
StartOffline Application Demo – Cache Manifest in Action (3:58)
StartVideo Overview (2:43)
StartVideo Encoding – Using Handbrake (2:49)
StartIncluding a video in html5 web page (3:26)
Associated Technologies – Geolocation
StartGeolocation API – Introduction (1:01)
StartHow Geolocation works (3:39)
StartGeolocation – Location Options (1:15)
StartDetecting Geolocation support (2:57)
StartGetting the coordinates (2:03)
StartHandling Errors (4:55)
StartContinuous Tracking using Geolocation API (2:37)
StartWorking with Google Maps and Geolocation API (5:25)
Associated Technologies – Web Storage
StartWeb Storage – Introduction (3:20)
StartUnderstanding architecture of Web/Local storage (2:53)
StartUnderstanding the Storage() interface (3:56)
StartExploring Session Storage (3:25)
Associated Technologies – Web SQL
StartWebSQL Storage (1:36)
StartUnderstanding Web SQL API (0:45)
StartCreating Database (6:08)
StartInserting and reading rows of data (2:23)
StartDisplaying records from WebSQL database (2:07)
StartEditing and Deleting records in WebSQL database (3:18)
Associated Technologies – Web Sockets
StartWorking with Web Sockets (5:41)
Conclusion
StartConclusion and Code Download (0:45)

Basics of CSS

Basics of CSS

Instructor: Laurence Svekis

OverviewDescriptionAbout

Learn the fundamentals of applying styling to HTML code, CSS syntax and how to use it. Simple guide to getting started

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of elements within an HTML page.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of elements within an HTML page.

This course is designed to help you learn how to use CSS within your web pages. From an instructor with over 15 years of web development experience.

Make you webpages look…. BETTER!

Let me introduce you to using CSS. I show you how to add CSS to your websites. What CSS can do and the amazing transformation that can be done.

Learning the CSS fundamentals will help you develop the core skills to apply styling to your HTML content.

We teach you

  • What CSS is
  • How to add CSS to your websites
  • Add colors to fonts and backgrounds
  • Learn about the Box Model
  • How Padding, Borders, and margins work
  • Update your height and width
  • Working with text and select fonts
  • Working with lists
  • How to active your hyperlink styles
  • Basics of displaying content with CSS
  • All about CSS positioning
  • and much more

APPLY WHAT YOU’VE LEARNED

At the end of the course we show you how to bring together what you’ve learned to transform some HTML code into a fully styled website.

Create your own website from scratch

All the source code is included, in addition to top resource links and everything you need to have to get started with CSS.

Lets start learning CSS.

Who is the target audience?
  • web developers
  • web designers
  • anyone who wants to learn about apply styling to HTML content

Laurence Svekis

I’m here to help you learnachieve your dreams, come join me on this amazing adventure today

Google Developers Expert – GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

“I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998. I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides.”

“Learning, understanding with a strong passion for education. The internet has provided us with new opportunities to expand and share knowledge.”

Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online. Technology connects us all in many ways. It opens up doors to those who embrace it and learn how to make those connections real.

“My courses are designed to help you achieve your goals, learn and update skills”

Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications. Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.

Understanding technology provides a means to better connect with users. It also opens so many doors. Knowledge is the key to success and I want to help you experience what technology has to offer. I’m passionate about web technologies, and look forward to sharing my knowledge and experience with you!”

1:48  Hours

21 Lessons

Lifetime Access

Course Curriculum

Preview Course

First Section
Preview1 CSS Basics course introduction (2:23)
Start2 Learn how to use CSS and what it is (4:47)
Start3 CSS Basics how to add styling to html (10:59)
Start4 CSS Basics syntax (10:32)
Start5 CSS Basics Backgrounds (7:18)
Start6 CSS Basics Box model Borders (7:25)
Start7 CSS Basics Padding (4:40)
Start8 CSS Basics working with margins (6:23)
Start9 CSS Basics Height Width Overflow (5:25)
Start10 Source Code
Start11 CSS Basics working with text (6:15)
Start12 CSS Basics updating and selecting fonts (3:56)
Start13 CSS Basics turning UL into OL (2:42)
Start14 CSS Basics hyperlinks hover active links (5:16)
Start15 CSS Basics display properties (4:41)
Start16 Source Code adding fonts
Start17 CSS Basics positioning (3:54)
Start18 CSS Basics applying it to web pages (7:19)
Start19 CSS Basics setup navigation bar on website (5:57)
Start20 CSS Basics tweaks and updates to CSS for website (7:16)
Start21 CSS source Code for course

HTML5 course for Beginners Learn to Create websites

HTML5 course for Beginners Learn to Create websites

Instructor: Laurence Svekis

OverviewDescriptionAbout

Learn to make your own website from scratch everything included Easy to follow Complete guide to web design

This course is HTML5 focused, will teach you HTML5

HTML5 is the latest evolution of the standard that defines HTML. This course will teach you everything you need to know in order to create websites using HTML5.

This course is HTML5 focused, will teach you HTML5

HTML5 is the latest evolution of the standard that defines HTML. This course will teach you everything you need to know in order to create websites using HTML5. Modern web design course with New HTML5 elements, attributes, and behaviors.

Learn HTML5 which allows more diverse and powerful Web sites and applications.

All Resources, Source Files, Top Links and additional reading material is included, so that you can get started quickly creating website using HTML. I’ve developed hundreds of websites and I’m going to share what I have learned over the past 15 years developing websites within this course.

This is a perfect course for beginners who want learn more about HTML5.

Topics covered in this course include:

  • Create a default HTML5 template to use and reuse to create unlimited websites (source code included)
  • How to create a mockup for your website design
  • All about content sectioning and proper website design structure
  • adding a navigation bar to your web project
  • Inline text semantics
  • HTML5 elements that a new and powerful
  • How to add audio video and other media
  • Introduction to using Canvas to draw within HTML5
  • More options for forms that are now more mobile compatible
  • example contact form for your website
  • Interactive HTML5 elements
  • Progress bars and more
  • Tables and element attributes

We complete the course showing you how to add CSS in order to style your website creating a full 4 page website from scratch with the code discussed within the course.

Who is the target audience?
  • anyone who wants to learn more about HTML5 and whats new with HTML5
  • learn about HTML5
  • webmasters and web developers and web designers
  • web content developers
  • learn about resources to create websites

Laurence Svekis

I’m here to help you learnachieve your dreams, come join me on this amazing adventure today

Google Developers Expert – GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

“I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998. I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides.”

“Learning, understanding with a strong passion for education. The internet has provided us with new opportunities to expand and share knowledge.”

Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online. Technology connects us all in many ways. It opens up doors to those who embrace it and learn how to make those connections real.

“My courses are designed to help you achieve your goals, learn and update skills”

Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications. Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.

Understanding technology provides a means to better connect with users. It also opens so many doors. Knowledge is the key to success and I want to help you experience what technology has to offer. I’m passionate about web technologies, and look forward to sharing my knowledge and experience with you!”

3:37  Hours

41 Lessons

Lifetime Access

Course Curriculum

Preview Course

First Section
Preview1 HTML5 course introduction (2:52)
Start2 Course how to (1:58)
Start3 Course Resources and introduction (8:37)
Start4 HTML5 webpage Basics (6:41)
Start5 HTML5 Default template for web projects (11:50)
Start6 Default template Source Code
Start7 HTML5 Introduction
Start8 HTML5 creating a webpage Mockup wireframe (5:12)
Start9 HTML5 Content sectioning (7:45)
Start10 HTML5 How to structure Text content (7:05)
Start11 Update of Navigation bar CSS intro (5:42)
Start12 HTML5 Inline text semantics (7:29)
Start13 New HTML5 Elements inline (2:26)
Start14 HTML5 How to add Audio Video Meida files and player (2:57)
Start15 How to Use HTML5 Canvas to draw (8:22)
Start16 Source-Code-Index-page
Start17 HTML5-additional-learning-and-Resoruces
Start18 Introduction to HTML forms (7:25)
Start19 New form field types in HTML5 (11:10)
Start20 Form attributes and more HTML5 elements (8:23)
Start21 New form options in HTML5 (6:54)
Start22 Form-options-source-code
Start23 HTML5 Interactive elements (5:27)
Start24 HTML5 new progress bars and more (3:47)
Start25 HTML5 Attributes (6:58)
Start26 HTML tables (5:09)
Start27 HTML-index-source-2
Start28 HTML5-more-information
Start29 Get ready for CSS setup website HTML (4:32)
Start30 CSS for Beginners center your content fluid or static (5:35)
Start31 HTML5 website setup heading section (8:38)
Start32 HTML5 Change your UL to a Navigation bar (11:30)
Start33 pseudo selectors Nav bar (2:45)
Start34 CSS floating sections of your website (8:25)
Start35 Main content styling (3:20)
Start36 Completed Website CSS (5:21)
Start37 Website tweaks and pages (3:29)
Start38 Make it responsive Media screen size (9:10)
Start39 Where to practice HTML online (2:07)
Start40 CSS-source
Start41 Project-Source-Files

Building HTML5 Canvas projects from scratch

Building HTML5 Canvas projects from scratch

Instructor: Laurence Svekis

OverviewDescriptionAbout

Learn to create several useful code projects using html5 canvas JavaScript. Learn by example as we build these projects

Best way to learn is by real examples of code, showing you how the code works together to create amazing applications from scratch.

Best way to learn is by real examples of code, showing you how the code works together to create amazing applications from scratch.

Canvas drawing is done using JavaScript, this course focuses on JavaScript-based around HTML5 canvas interactions. Also covers some basic AJAX, PHP, JQUERY, Bootstrap.

HTML5 canvas provides an amazing opportunity to create some really cool effects on web pages. This course will show you how to build projects from scratch, using HTML5 and JavaScript. How to use JavaScript applying it to the canvas to create animation and user-generated content on the fly.

I have over 15+ years of web development experience, and have worked on hundreds of web applications just like these. One of the best ways to learn is by example, so I’ve created some projects that really demonstrate core applications that can be created using html5.

This course is designed to help you learn and develop skills for working on real-world concepts using JavaScript and HTML5. Starting from scratch, step by step explanations of what code to use and where. We demonstrate how the code gets used, in addition to the process of building something from concept to launch.

All of the source files are included, top resources and links are shared throughout the course. Code samples are explained step by step, and you are encouraged to work along with the course material.

Project one canvas animation tutorial – designed to demonstrate animation in HTML5 canvas

  • Covers basic concepts of how to animate in canvas
  • JavaScript to use that helps with animation
  • how to draw paths on canvas using JavaScript
  • how to create arcs and circles
  • Added object effects in JavaScript – random colors and shadows
  • how to apply logic to create a continuous animation

Project two create user generated images – learn how to draw on the HTML5 canvas and output those images.

  • basics of scoping a project from scratch
  • setup html5 field types and buttons
  • link to bootstrap and jquery
  • apply event listeners for user interaction
  • get mouse cursor position and calculate actions
  • event triggered functions
  • pass base64 image data to webpage
  • use AJAX to send image data to the server
  • use PHP to generate png files from the HTML5 canvas drawing

In addition, I provide regular support to students. Also course upgrades and new projects will be added regularly.

The code in these projects is included!!! for you to be able to get a jump start on creating your own projects using Canvas.

Who is the target audience?
  • anyone who wants to learn more about using HTML5 canvas
  • anyone who wants to enhance their skills with canvas
  • build real world projects using javascript and canvas
  • learn how to make amazing projects from scratch
  • web developers and application developers

Laurence Svekis

I’m here to help you learnachieve your dreams, come join me on this amazing adventure today

Google Developers Expert – GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

“I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998. I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides.”

“Learning, understanding with a strong passion for education. The internet has provided us with new opportunities to expand and share knowledge.”

Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how to bring amazing things to life online. Technology connects us all in many ways. It opens up doors to those who embrace it and learn how to make those connections real.

“My courses are designed to help you achieve your goals, learn and update skills”

Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications. Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.

Understanding technology provides a means to better connect with users. It also opens so many doors. Knowledge is the key to success and I want to help you experience what technology has to offer. I’m passionate about web technologies, and look forward to sharing my knowledge and experience with you!”

1:46  Hours

26 Lessons

Lifetime Access

Course Curriculum

Preview Course

First Section
Preview1 HTML5 Canvas Projects Course intro (4:00)
Start2 How to use this course (2:11)
Start3 Basic Canvas Setup for project (2:30)
Start4 Setting project variables (4:36)
Start5 How to draw the ball (2:43)
Start6 requestAnimationFrame and clear frame for animation (3:12)
Start7 create boundaries for ball change directions (6:45)
Start8 random color for the ball (2:32)
Start9 Adding cool effects to the project (5:33)
Start10 Source Code Bouncing Ball
Start11 Setup HTML5 Form type and Canvas (7:18)
Start12 Setup project variables for drawing on canvas (4:21)
Start13 Create addEventListeners and add functions for interaction (5:21)
Start14 How to get the mouse position on canvas (8:37)
Start15 Drawing on the canvas paths and lines (4:49)
Start16 Using dynamic colors and marker widths to draw on canvas (4:56)
Start17 Clear canvas start again (4:09)
Start18 Save to base64 image code create new image from canvas content (5:19)
Start19 Project Tweaks slider (3:02)
Start20 Add jquery to send AJAX (2:12)
Start21 Using AJAX to send image data and PHP to create images on the fly (5:51)
Start22 Creating images on the fly storing them to the server (4:45)
Start23 Code overview and summary (7:54)
Start24 SourceCodeProject2
Start24 Source Code
Start25 Cursor style Tweak (2:05)

The Foundations of HTML CSS and JavaScript

The Foundations of HTML CSS and JavaScript

Instructor: Total Training

OverviewDescriptionAbout

This course teaches you about closures, prototypes, JSON, the DOM, selectors, inheritance in CSS and in Javascript, and first class functions

This is not a course on JavaScript frameworks – it’s about solid, fundamental HTML, CSS, and JavaScript! You’ll be surprised by how much more you can get done on your web pages once you learn these technologies the right way.

This is not a course on JavaScript frameworks – it’s about solid, fundamental HTML, CSS, and JavaScript! You’ll be surprised by how much more you can get done on your web pages once you learn these technologies the right way.

What Will I Learn?
  • Understand HTML – its structure, and the commonly used tags
  • Utilize CSS, including inheritance, selectors, the box model – the very topics that make CSS hard to use
  • Master the fundamentals of JavaScript
  • Use closures, dynamic prototyping, JSON, and the Document-Object-Model with confidence
  • Gain an understanding of HTML, its structure, and the tags that are commonly used
  • Learn how to use CSS, its selectors, inheritance, and the box model
Who is This Course For?
  • Yep! Folks who are absolutely new to web programming, and wish to learn HTML and CSS from scratch
  • Yep! Folks who are seeking to learn JavaScript the right way – including folks who may done some JavaScript programming, but are not quite confident using advanced features such as closures or dynamic prototyping
  • Yep! Java, C#, Python or C++ programmers who are looking to master JavaScript
  • Nope! This class is not right for you if you are looking to learn JavaScript frameworks such as jQuery, Angular or Node.js
What are the Requirements?
  • Any modern browser and a simple text editor are all that will be needed for the code examples
  • Some prior programming experience will definitely help in the advanced JavaScript portions – if you are entirely new to programming, the second half of the JavaScript section will seem very challenging

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

13:11  Hours

94 Lessons

Lifetime Access

Course Curriculum

Preview Course

CHAPTER 01: WELCOME TO HTML, CSS, AND JAVASCRIPT!
PreviewIntroduction (2:18)
CHAPTER 02: HTML
StartIntroducing HTML and CSS (9:07)
StartIntroduction to HTML (12:25)
StartIntroduction to CSS (6:34)
PreviewThe A Tag (8:09)
StartPaths (5:30)
StartQuotes (6:24)
StartLists: Ordered and Unordered (7:43)
StartOther Miscellaneous HTML Tags (2:23)
StartURL and Domain Names (10:52)
StartThe img Tag (10:30)
StartThe HTML Standard (3:08)
CHAPTER 03: CSS
StartCascading Stylesheets reintroduced (8:15)
StartInheritance in CSS (7:19)
StartCSS Selectors (9:50)
StartFonts (9:59)
StartColors (3:30)
StartThe Box Model (11:45)
StartThe element (7:47)
StartWhat is the exact style applied? (8:12)
StartThe Element (2:47)
StartHTML States and Pseudo-classes (2:50)
StartNormal Rendering Flow of The Browser (15:00)
StartThe CSS float and clear properties (9:42)
StartExperimenting with the position attribute (12:23)
StartFluid and Fixed Layouts (8:58)
StartThe CSS display property (7:58)
StartChrome Developer Tools (15:45)
CHAPTER 04: JAVASCRIPT BASICS
StartIntroducing JavaScript (15:36)
StartExample 1: Executing JavaScript code (4:13)
StartExample 2: Basic programming constructs (7:30)
StartExample 3: Separating HTML and JS files (10:16)
StartExample 4: Using the console.log statement (6:21)
StartExample 5: Local and global variables (16:08)
StartExample 6: Undeclared variables in JS are global (7:46)
StartExample 7: Local variables hide global variables of the same name (5:42)
StartExample 8: JavaScript is ephemeral, reloading a page resets everything (4:19)
StartExample 9: Creating and using arrays (14:39)
StartExample 10: Copying an array (13:56)
StartExample 11: Adding an element to an array (5:58)
StartExample 12: Deleting elements from an array (8:08)
StartExample 13: Arrays can contain different types (0:57)
StartExample 14: Non-existent array elements are undefined (6:32)
StartFirst class functions (6:31)
CHAPTER 05: OBJECTS IN JAVASCRIPT
StartIntroduction to JavaScript objects (10:58)
StartExample 15: Creating an object using JSON (8:12)
StartExample 16: Creating an object using a constructor (15:51)
StartExample 17: Adding properties to objects dynamically (11:58)
StartExample 18: Removing properties from objects dynamically (3:05)
StartExample 19: Object properties can be functions (7:33)
StartExample 20: Object constructors can have property functions (2:46)
StartExample 21: Two ways of accessing object properties (6:40)
StartExample 22: Iterating over all properties in an object (4:54)
StartExample 23: Calling a constructor without new (10:02)
StartExample 24: Understanding the typeof operator (6:12)
StartExample 25: Paternity tests using instanceof (5:36)
StartExample 26: Faking public and private properties (10:24)
CHAPTER 06: FIRST CLASS FUNCTIONS – IN DETAIL
StartExample 27: Functions as arguments to functions (12:35)
StartExample 28: Functions that return functions (8:38)
StartExample 29: Arguments pass by value to functions (7:31)
StartExample 30: Arguments pass by reference (15:42)
CHAPTER 07: JAVASCRIPT QUIRKS
StartIntroduction to JavaScript Quirks (6:13)
StartExample 31: Understanding undefined (11:28)
StartExample 32: Understanding null (13:58)
StartExample 33: Understanding NaN (8:58)
StartExample 34: Strings and numbers and conversions between them (10:40)
StartExample 35: Strange comparison operators (10:51)
StartExample 36: Truthy and falsy (6:58)
StartExample 37: Simple string operations (14:09)
CHAPTER 08: FUNCTIONS YET AGAIN
StartExample 38: Declared Functions, Function Literals and Hoisting (15:46)
StartExample 39: Named and Anonymous Function Literals (7:23)
StartExample 40: Nested Functions (15:05)
StartExample 41: Nested functions can be declared (6:54)
CHAPTER 09: CLOSURES
StartIntroduction to closures (18:42)
StartExample 42: Closure variables win over local variables (8:51)
StartExample 43: Closures with declared functions and function literals (2:27)
StartExample 44: Referencing environment with function parameters (5:43)
StartExample 45: Closure variables cooler than global variables (13:38)
CHAPTER 10: PROTOTYPES, DYNAMIC PROTOTYPING, AND INHERITANCE
StartIntroduction to prototypes (6:41)
StartExample 46: Prototypical Inheritance In Action (8:09)
StartExample 47: Dynamic Prototyping (4:19)
StartExample 48: Inheritance hierarchy using chained prototypes (5:40)
StartExample 49: Overriding properties using prototypes (6:53)
StartExample 50: The base object as the ultimate prototype (4:32)
StartExample 51: Overriding properties of built-in objects (2:54)
CHAPTER 11: THE DOCUMENT OBJECT MODEL AND EVENT HANDLING
StartIntroduction to the Document Object Model (12:30)
StartExample 52: Modifying the HTML of a page using the DOM (4:06)
StartExample 53: Event Handling (5:45)
StartExample 54: Adding Multiple Event Handlers on the Same Event (3:38)
StartExample 55: Setting Arbitrary HTML Attributes (4:28)
StartExample 56: The window object (4:47)
CHAPTER 12: JSON
StartIntroduction To JSON (14:31)
StartExample 57: Simple JSON Use Cases (3:01)
StartExample 58: Creating meaningful objects with JSON (3:10)
RESOURCES
StartSupplemental Materials

Fundamentals of CSS and CSS3

Fundamentals of CSS and CSS3

Instructor: Total Training

OverviewDescriptionAbout

Improve consistency and simplify maintenance

If you have ever wanted to become a web developer, then you know you need to know both CSS and CSS3. That’s what this CSS & CSS3 Fundamentals course is all about. You’ll learn everything you need without having to read hundreds of pages of text. No eBook here, just great video content!

If you have ever wanted to become a web developer, then you know you need to know both CSS and CSS3. That’s what this CSS & CSS3 Fundamentals course is all about. You’ll learn everything you need without having to read hundreds of pages of text. No eBook here, just great video content!

How the Course is Taught

This intensive and robust course is taught via a step-by-step tutorial system. You will start with tutorials for beginners who are new to CSS and CSS3 programming, and then move through progressively more difficult skills, including everything you need to know to build a fully functional, modern and sleek website.

Why Take this Course?

You should take this course because it is comprehensive, easy to follow, fun and exciting! Web development is a huge industry, and if you really want to become an app developer, it starts with CSS and CSS3!

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

13:35  Hours

73 Lessons

Lifetime Access

Course Curriculum

Preview Course

INTRODUCTION TO THE COURSE
Preview0101 What Is CSS (7:29)
Start0102 Understanding CSS (10:06)
Start0103 How CSS and HTML Work Together (20:14)
CSS AND CSS3 BASICS
Start0201 Selectors (Part 1 of 4) (10:39)
Start0202 Selectors (Part 2 of 4) (11:31)
Start0203 Selectors (Part 3 of 4) (11:00)
Start0204 Selectors (Part 4 of 4) (8:37)
Preview0205 Styling Links (Hyperlinks) (13:16)
Start0206 Widths and Heights (12:43)
Start0207 Positioning (10:57)
Start0208 Centering a Container (10:11)
Start0209 Display Types (12:27)
Start0210 Hiding an Element (4:40)
Start0211 Margins and Padding (13:43)
Start0212 Overflow (8:31)
Start0213 Element Stack Order (z-index) (7:31)
Start0214 Cursors (7:30)
Start0215 Box Sizing (7:41)
Start0216 Color (10:45)
Start0217 Font Basics (13:43)
Start0218 Floats (17:26)
Start0219 Clearfix (6:45)
Start0220 Forcing Uppercase, Lowercase and Capitalisation (5:38)
Start0221 Text Alignment (6:30)
Start008 Clearfix (For Clearing Floats) (13:17)
Start0222 Text Indenting (11:16)
Start0223 Backgrounds (12:28)
Start0224 Multiple Background Images (8:59)
Start0225 Background Size (5:56)
Start0226 Borders (11:01)
Start0227 Border Images (9:42)
YOUR FIRST CSS PROJECTS
Start0301 Build a Website (Part 1 of 3) (11:19)
Start0302 Build a Website (Part 2 of 3) (14:13)
Start0303 Build a Website (Part 3 of3) (14:10)
Start0305 Pure CSS Drop-Down Menu (14:34)
Start0304 Dropdown List Menu (Part 1 of 2) (9:41)
Start0306 Dropdown List Menu (Part 2 of 2) (11:49)
INTERMEDIATE CSS AND CSS3
Start0401 Horizontal Menu (Part 1 of 2) (12:42)
Start0402 Horizontal Menu (Part 2 of 2) (13:38)
Start0403 Vertical Menu (12:01)
Start0404 Creating a Button (11:06)
Start0405 Display Property (8:09)
Start0406 Floating Elements (17:01)
Start0407 Styling Headers (8:56)
Start0409 Styling Unordered Lists (9:13)
ADVANCED CSS AND CSS3
Start0501 Opacity (6:17)
Start0502 Sprites (14:33)
Start0503 Dashed Link Underline (6:55)
Start0504 Rounded Borders (11:47)
Start0505 Element Shadows (7:22)
Start0506 Text Shadows (10:37)
Start0507 Before and After Pseudo Elements (13:48)
Start0508 Image Overlay Effect (Part 1 of 2) (9:31)
Start0509 Image Overlay Effect (Part 2 of 2) (11:34)
2D TRANSFORMATIONS
Start0601 2D Transformations (Part 1 of 4) (3:29)
Start0602 2D Transformations (Part 2 of 4) (11:28)
Start0603 2D Transformations (Part 3 of 4) (9:28)
Start0604 2D Transformations (Part 4 of 4) (5:35)
FUN ADVANCED TOPICS
Start0701 Styling Tables (Part 1 of 2) (13:30)
Start0702 Styling Tables (Part 2 of 2) (10:44)
Start0703 Styling Form Elements (Part 1 of 2) (11:37)
Start0704 Styling Form Elements (Part 2 of 2) (6:59)
Start0705 Slide Out Navigation Part 1 (12:50)
Start0706 Slide Out Navigation Part 2 (5:51)
Start0707 Buttons (18:31)
Start0708 Quick & Easy CSS Triangles (3:30)
Start0709 Progress Bar (12:52)
Start0710 Creating a 3D Cube with CSS3 (18:53)
Start0711 Create a CSS3 Avatar – Profile Picture Effect (3:49)
Start0712 CSS Speech Bubble Comment Effect (13:20)
Start0713 CSS Headline Background Effect (12:23)
Start0714 Pure CSS Video Play Button (11:34)
Start0715 CSS Icon Fonts (10:43)

HTML Fundamentals

HTML Fundamentals

Instructor: Total Training

OverviewDescriptionAbout

Demystify the language of the Web

With this HTML Fundamentals course, you will learn the basics, then create real projects that use the skills you just learned so you can understand how HTML works in the real world. You will also get access to all lesson source codes so you can deconstruct each lesson — another valuable learning and time saving tool.

With this HTML Fundamentals course, you will learn the basics, then create real projects that use the skills you just learned so you can understand how HTML works in the real world. You will also get access to all lesson source codes so you can deconstruct each lesson — another valuable learning and time saving tool.

What About HTML5? To understand HTML5 you must have knowledge of HTML and how it works! HTML5 modifies HTML to allow you to create more modern websites. This course includes tips and tricks for HTML5 throughout the lessons.

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

3  Hours

33 Lessons

Lifetime Access

Course Curriculum

Preview Course

CHAPTER 1: INTRODUCTION TO THE COURSE
PreviewWhat Is HTML? (2:55)
StartWhat is HTML5? (2:59)
StartGetting the Browser (0:41)
StartGetting the Editor (0:48)
StartSetting Up the Editor (1:19)
CHAPTER 2: THE BASICS OF HTML
StartStructure – Hello World (4:36)
StartThe DOM (2:09)
StartCustomizing the Editor (1:32)
PreviewSelf Closing Tags – Environment (1:21)
StartValidation (6:10)
StartComments (2:21)
CHAPTER 3: BLOCK LEVEL ELEMENTS
StartBlock Level Elements (8:41)
CHAPTER 4: LINE BREAK AND SPACING
StartLine Break and Spacing (4:49)
CHAPTER 5: INLINE ELEMENTS
StartSpan – Text Modifiers (2:36)
StartAnchors (10:25)
StartLinking to the Top of the Page (4:46)
StartImages (5:09)
CHAPTER 6: TABLES AND FORMS
StartTables (4:49)
StartForm Basics (9:53)
StartPlaceholder vs. Value (2:31)
StartRadio Buttons, Checkboxes, Select Elements and Text Areas (8:21)
StartNew HTML5 Inputs (8:52)
StartHTML5 Input Attributes (15:43)
StartAction Attribute (3:39)
StartGET vs. POST (3:12)
StartSubmit Buttons (4:05)
StartCreate a Hotel Booking Form (18:45)
CHAPTER 7: SEMANTIC HTML5 ELEMENTS
StartNew Elements in HTML5 (3:39)
StartHTML5 Semantic Elements (3:13)
StartSemantic Elements in Practice (4:31)
StartMeter and Progress Elements (3:09)
CHAPTER 8: MULTIMEDIA
StartAudio (4:14)
StartVideo (3:27)
Project Files
StartProject Files – HTML Fundamentals

HTML5 & CSS3 - Build Responsive Websites with a Modern Flat Design

HTML5 and CSS3 - Build Responsive Websites with a Modern Flat Design

Instructor: Total Training

OverviewDescriptionAbout

Build a great looking flat design website

With this HTML5 & CSS3 – Build Responsive Websites with a Modern Flat Design course, you will learn to build a great looking flat design website using a simple but well-coded template.

With this HTML5 & CSS3 – Build Responsive Websites with a Modern Flat Design course, you will learn to build a great looking flat design website using a simple but well-coded template.

Learn by using a real responsive design template with a great looking flat design. You will be walked through every step of using this template, and by the end of the course you will be able to transfer these skills to any template on the market.

Everything you need to work with the template is included in the course!

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

2:06  Hours

13 Lessons

Lifetime Access

Course Curriculum

Preview Course

CHAPTER 1: INTRODUCTION AND WHAT YOU WILL LEARN
PreviewIntroduction and What You Will Learn (6:48)
CHAPTER 2: WORKING WITH THE DESIGN ELEMENTS
StartLooking at the Design (10:20)
PreviewFoundation Front-End Framework (13:55)
StartCustom Stylsheets (4:01)
StartHeaders (3:21)
StartContainers (5:46)
StartLogo and Navigation (15:41)
StartButtons (4:04)
CHAPTER 3: COMPLETING OUR WEBSITE
StartTop Feature Section (12:22)
StartFeatures Section (13:23)
StartRecent Works Section (19:52)
StartFancy Lists (10:06)
StartSecondary Buttons and Finishing Up (4:12)
Project Files Included
StartProject Files – Build a Responsive Website with a Modern Flat Design

HTML5 & CSS3 - Applying Design to Wireframes

HTML5 and CSS3 - Applying Design to Wireframes

Instructor: Total Training

OverviewDescriptionAbout

Apply functional and attractive design principles to your wireframe

This HTML5 & CSS3 Applying Design to Wireframes course teaches you how to apply functional and attractive design principles to your wireframe. Featuring advice on typography, graphics, and color schemes, award-winning trainer Geoff Blake will lead you through the full process of making your site look amazing in every web browser.

This HTML5 & CSS3 Applying Design to Wireframes course teaches you how to apply functional and attractive design principles to your wireframe. Featuring advice on typography, graphics, and color schemes, award-winning trainer Geoff Blake will lead you through the full process of making your site look amazing in every web browser.

Lessons include how to select a color palette, where to source free images, and what resources to use to integrate beautiful typography into your design. You’ll discover Google Fonts, and how to integrate them into your CSS. When you’re finished adding fonts and images, Geoff will walk you through the various options for testing out your site. From wireframe to fully realized design, this course is a must for aspiring web developers.

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

2:35  Hours

25 Lessons

Lifetime Access

Course Curriculum

Preview Course

CHAPTER 1: INTRODUCTION
PreviewWelcome! Here’s What This Course Is All About (1:55)
StartHere’s What We’ll Create In This Course (1:25)
CHAPTER 2: FROM WIREFRAME TO DESIGN
StartDetermining The Design’s Message (5:16)
PreviewChoosing Your Design’s Colour Palette (6:38)
StartTools For Selecting Typefaces (5:18)
StartChoosing Imagery And Design Elements (4:45)
CHAPTER 3: GETTING THE DESIGN UNDERWAY
StartGetting Started By Styling The Header (5:14)
StartFormatting Call-To-Action Buttons With CSS (8:41)
StartAdding Additional Shadow Effects To The Buttons (3:10)
StartFinishing Up The Button Formatting (5:40)
StartTypographic Treatments With Google Font API (7:41)
StartBeginning The Features Section Styling (5:28)
StartFinishing The Features Section (4:07)
StartFormatting The Organize Section (4:47)
StartWrapping Up The Layout’s Design (5:56)
CHAPTER 4: INSERTING & FORMATTING GRAPHICS
StartInserting & Adjusting The Logo (2:48)
StartSetting Up The Hero Section Graphics (4:52)
StartGetting The Feature Section Images Inserted (3:03)
StartPlacing The Organize & Share Images (2:52)
StartUsing A Graphic As A Button Label (3:53)
CHAPTER 5: CROSS-BROWSER TESTING
StartOnline Testing Tools (8:06)
StartRunning Virtual Operating Systems For Testing (9:16)
StartMaking Minor Adjustments For Browser Compatibility (5:24)
CHAPTER 6: WRAPPING UP
StartWhere To Go From Here (0:29)
Project Files
StartProject Files – Apply Design to Wireframes with HTML5 CSS3

HTML5 & CSS3 Fundamentals

HTML5 and CSS3 Fundamentals

Instructor: Total Training

OverviewDescriptionAbout

Build a complete website from scratch

When it comes to the world of technology, staying ahead of the curve is always a challenge. If you learn HTML5 along with CSS3 (the next level of web design used on all modern websites), you’ll have a recipe for success; and this HTML5 & CSS3 Fundamentals course will show you how.

When it comes to the world of technology, staying ahead of the curve is always a challenge. If you learn HTML5 along with CSS3 (the next level of web design used on all modern websites), you’ll have a recipe for success; and this HTML5 & CSS3 Fundamentals course will show you how.

Create a website from scratch with HMTL5 and CSS3

  • Build a complete functioning website section by section
  • Gain a solid knowledge base of HMTL5and CSS3 for future, more complex projects
  • Control your website’s appearance, functionality and navigability
  • Discover how HTML5 and CSS3 can be used in other areas of the web
  • Learn best practice techniques for building websites and web pages

Build Like a Pro with HMTL5 and CSS3 Design

You’ll start by becoming familiar with HTML tags and how they’re used, followed by the use of attributes and common settings. Once you’ve got a handle on basic HTML, you’ll move on to the fun stuff: CSS. You’ll use CSS for fonts, colours, lists, navigation menus, and more, adding a new element to your website with each section. Links, layouts, tables, forms and videos are all covered too.

If you know how to use a web browser and a text editor, you’re all set up for this course already. No extra software or tools are needed, and you can choose your preferred option of each to get going. By the time you finish, you’ll know everything you need to know to create beautiful, functional, easy to use websites of any kind.

About HTML5 and CSS3

HTML5

HTML or Hyper Text Mark-up Language is the language used for presenting websites and web content. HTML5 is the latest version, made official by the World Wide Web Consortium in 2014. Having a good grasp of HTML means you’ll be able to create, present and edit a whole variety of content on the web.

CSS3

CSS (Cascading Style Sheets) essentially ’enhances’ HTML, giving developers and users more control over how pages and content is displayed. It is responsible for creating more visually engaging web pages, applications and interfaces. CSS3 is the latest version, and has many more extended features than previous versions – although it is backwards compatible.

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

3  Hours

34 Lessons

Lifetime Access

Course Curriculum

Preview Course

CHAPTER 1: COURSE INTRO
PreviewCourse Introduction (4:06)
CHAPTER 2: BASIC HTML
StartPage basics (11:30)
StartText Basics (8:21)
StartText Formatting (5:08)
StartLists (9:06)
StartImage Prep (9:39)
StartInserting Images (8:15)
PreviewWebsiteProject (16:23)
CHAPTER 3: CSS BASICS
StartCSS Basics (9:30)
StartFont Styles (9:58)
StartColors (7:33)
StartList Styles (4:17)
StartAdvanced Selectors (9:46)
StartWebsiteProject (8:00)
CHAPTER 4: LINKS
StartLink Basics (6:37)
StartIn-Page links (2:37)
StartLink styles (4:12)
StartNavigation Menus (5:58)
StartWebsiteProject (9:54)
CHAPTER 5: LAYOUT
StartBlock Spacing (12:12)
StartArranging the Page (8:44)
StartPositioning (7:30)
StartWebsiteProject (20:14)
CHAPTER 6: TABLES
StartTables (6:48)
StartTable Styles (9:29)
StartWebsiteProject (7:38)
CHAPTER 7: TABLES
StartForm Basics (5:38)
StartForm Elements (7:21)
StartHTML5 Form Elements (12:00)
StartForm Styles (8:16)
StartWebsiteProject (11:34)
CHAPTER 8: VIDEO
StartVideo preparation (4:17)
StartVideo HTML (8:30)
StartWebsiteProject (7:12)
CHAPTER 9: WRAP UP
StartConclusion tips and resources (5:19)
Project Files Included
StartProject Files – HTML5 CSS3 Fundamentals

HTML5 & CSS3 - Website Wireframing

HTML5 and CSS3 - Website Wireframing

Instructor: Total Training

OverviewDescriptionAbout

Size and structure before detailed design.

Whether you’re an HTML veteran or just a beginner, this HTML5 & CSS3 – Website Wireframing course is for you. Award-winning trainer Geoff Blake will walk you through the process of creating a website wireframe in just under three hours!

Whether you’re an HTML veteran or just a beginner, this HTML5 & CSS3 – Website Wireframing course is for you. Award-winning trainer Geoff Blake will walk you through the process of creating a website wireframe in just under three hours!

This training course guides you through the process of creating the basic sections of your site, arranging and aligning text and images, and adding interactive features. Once you’re finished creating the wireframe, you’ll learn how to put it online to share with coworkers and clients.

After taking this course, you’ll be able to build attractive and professional website prototypes in about an hour. The best part? Unlike a simple mockup in Photoshop®, you can actually turn this wireframe into a fully-functioning website! Build your professional skills with this robust, yet easy to follow course.

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

3  Hours

34 Lessons

Lifetime Access

Course Curriculum

Preview Course

1.Introduction
PreviewWelcome Understanding Layout Wireframing (4:02)
StartWhy Using Photoshop May Not Be The Best Choice (3:07)
StartUsing HTML & CSS For Fast Wireframe Compositing (2:53)
StartA Look At What We’ll Build In This Course (1:23)
StartBonus Lesson_How To Turn Any Web Page Into A Wireframe (1:24)
2.Getting Started
StartSetting Up The Rough Page Structure (4:45)
PreviewBuilding The Structural CSS Rules, Part 1 (7:43)
StartBuilding The Structural CSS Rules, Part 2 (2:52)
StartConnecting Up The HTML To The CSS (5:20)
StartCentering Layout Elements (5:36)
StartSetting Up Inner Layout Containers (7:19)
StartInserting Additional Inner Containers (3:35)
StartSpacing Apart The Layout (9:15)
3.Wireframing The Header in Greater Detail
StartFirst Thing’s First_Getting Organized (4:37)
StartBuilding The Logo Container (3:55)
StartSetting Up The Main Navigation Menu (5:53)
StartCreating A Call-To-Action Button (5:59)
4.Building the Rest of the Layout
StartInserting The Hero Image (4:41)
StartGetting Started With The Hero Content (4:02)
StartFinishing Up The Hero Section (5:36)
StartInserting The Feature Headers (3:34)
StartBuilding The Feature Boxes (5:58)
StartWireframing The Organize Section (5:41)
StartSpeeding Things Up For The Share Section (4:26)
StartFinishing Up The Wireframing (6:23)
5.Finishing Touches
StartInserting A Placeholder Image (3:48)
StartAdding A Logo Placeholder With Text (3:50)
StartInserting The Remaining Image Placeholders (3:23)
StartInserting A Background Placeholder (5:09)
StartAdding Subtle Interactivity (6:01)
StartAdding Button Interactivity (11:42)
StartFinishing Touches (4:57)
StartSharing The Wireframe For Review (6:04)
6.Wrapping Up
StartWhere To Go From Here (0:20)
Project Files Included
StartProject Files – HTML5 CSS3 Website Wireframing

Sass for CSS - An Introduction

Sass for CSS - An Introduction

Instructor: Total Training

OverviewDescriptionAbout

Learn the most powerful CSS Extension Language in the world

Who is this course for?

This Sass for CSS – An Introduction course is intended for web designers, web developers, and anyone else who already has a working knowledge of CSS. It does not cover Sass installation or configuration of a text editor, but instead jumps straight ahead to working with practical, real world examples of Sass in action.

Who is this course for?

This Sass for CSS – An Introduction course is intended for web designers, web developers, and anyone else who already has a working knowledge of CSS. It does not cover Sass installation or configuration of a text editor, but instead jumps straight ahead to working with practical, real world examples of Sass in action. Therefore this course is not suitable for students who have limited or no knowledge of CSS.

Extend CSS with this preprocessor!

Every current web designer will most likely have mastered CSS long ago. But believe it or not, some have not yet realized the enormous benefits Sass can add to CSS – for one thing, it opens up a whole range of features not available in CSS. Couple that with the fact that it makes CSS concise and readable, and it’s a sure fire way to make CSS better as well as more fun!

By the time you’ve completed this course, you will have a solid knowledge of Sass, which you will be able to implement immediately. And better yet, you will have rediscovered what made CSS fun in the first place!

About Sass

Sass (Syntactically Awesome Stylesheets) is a stylesheet scripting language, first emerging in 2007 and now used all over the web. Industry approved, compatible with all versions of CSS, and with more features and abilities than another CSS extension language, it’s the most stable and powerful language of its kind in the world. By mastering Sass, you’ll be able to create effortless and beautiful websites with a sleek, professional look.

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

1:09  Hours

9 Lessons

Lifetime Access

Course Curriculum

Preview Course

CHAPTER 1: INTRODUCTION TO SASS
PreviewIntroduction (0:57)
StartCompiling (5:38)
CHAPTER 2: SASS BASICS – LEARN SASS THROUGH A PROJECT
StartProject Overview (1:37)
PreviewDirectory Structure (4:55)
StartVariables (7:51)
StartInheritance (7:15)
StartNesting (2:33)
StartFunctions (4:55)
StartMixins (5:33)

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Instructor: Daniel Walter Scott

OverviewDescriptionAbout

The best course for learning the basics of HTML5 and CSS3 from scratch. Including 5 projects, perfect for beginners.

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together…

  • a simple but elegant restaurant website.
  • a bike repair website.
  • a responsive portfolio website.
  • a Bootstrap website.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery.

You will…

  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.
  • Learn how to create forms and to choose great fonts for your website.
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.
  • Setup a domain name with hosting so that your website is live on the internet for others to see.

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.

If that all sounds a little too fancy – don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step.

Who am I?

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?

Sign up for the course and let’s learn how to build responsive websites.

Daniel Walter Scott

Sharing is who I am, and teaching is where I am at my best, because I’ve been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I’ve spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I’ve shown you into a bright future.

I have a wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) – but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.

I’m a certified Adobe instructor (ACI) in Ireland. I’m also an Adobe Certified Expert (ACE) and have completed the Adobe Certified Associate training (ACA). And I don’t just do Adobe. Remember, media is a very broad term – digital blew out the borders, so we are all constantly learning.

I’ve been teaching for 14+ years. I come from being a media designer and content creator – so I understand exactly where you’re at now. I’ve been there. I love this stuff. Print, digital publishing, web and video. I can see how it all connects. And I can see how we can share those connections.

I built Bring Your Own Laptop in Ireland, New Zealand, Australia & online. I have a great team working with me to keep BYOL at the top of Adobe and digital media training. I understand business, I have one – so I know how important it is to get it right and make it work for you.

Daniel Walter Scott

16:42  Hours

126 Lessons

Lifetime Access

Course Curriculum

Preview Course

Getting Started
PreviewIntroduction to Responsive Web Design Essentials Course (2:44)
StartHow is this web design course structured (1:41)
StartWhat to download for the web design course (2:57)
Introduction to HTML & CSS
StartCreating & testing our first HTML web page (5:55)
StartWhat is HTML5 & CSS3 in web design (8:24)
PreviewWhat is the head vs body vs html tag in a web design page (9:01)
StartWhat is the title and description for in the head of a web page (5:54)
StartWhat code editor should I be using VS Code Sublime Dreamweaver Atom Brackets (3:39)
StartHow to add structure to your website using Div Tags (6:26)
StartWhat is a CSS Class how do we color a background with it (9:05)
StartHow to nested divs inside of each other in HTML & CSS (5:03)
StartClass Project 01 – Div Tags (5:24)
StartHow to create a separate cascading style sheet in HTML & CSS (9:07)
Project 1 – Restaurant Website
StartHow to create an index html & style css (12:16)
StartTest your website live using a Visual Studio Code extension (8:47)
StartHow to check your code for errors in HTML using VS Code (11:01)
StartWhat is HTML5 tag header nav section article main footer (5:47)
StartHow to add html5 structure elements to your html website (16:02)
StartHow to color the background of a webpage using the body html tag (5:10)
StartHow to add an images to a website using HTML what is alt (4:38)
StartHow to center an image img in HTML using CSS (1:14)
StartHow to change the font style size & color of h1 p in HTML CSS (14:11)
StartHow to make a clickable link in html & change the color (8:45)
StartHow to add a stretching background image to a website (5:38)
StartHow make a div tag transparent using HTML & CSS in VS Code (2:36)
StartHow to create a simple website text navigation in HTML & CSS (6:43)
PreviewHow to css style more than one class tag at a time compound classes (7:02)
StartClass Project 02 – Footer (2:05)
StartClass Project 02 – Footer COMPLETE (4:48)
StartHow to add a simple email button to a website using mailto in HTML (3:49)
StartHow to add Google Maps to your website using embed codes (11:25)
StartHow to put your website live on the internet with your own domain (16:50)
StartHow to connect Visual Studio VS Code via sftp to host bluehost (11:50)
Project 2: Bike Repair Website
StartSetting up our new web design project & discussing our topics (3:46)
StartWhat is a CSS reset zeroing eric meyers vs normalize (15:22)
StartWhat is a min-height compared to height for a div tag (7:01)
StartGetting div tags onto one line using Flexbox in HTML & CSS (5:23)
StartAdd even space between div tags using flexbox with no outside margins (4:42)
StartHow to have 2 div tags of different sizes in the same row html css flexbox (7:12)
StartHow to vertically center content in a html div tag using flexbox css (7:20)
StartClass Project 3 – Flexbox Header (2:51)
StartClass Project 3 – Flexbox Header COMPLETE (5:38)
StartHow to make a full background gradient on a website CSS (10:19)
StartHow to change the default font type color size on a website using HTML & CSS (4:19)
StartHow to choose & install google fonts on your HTML CSS website (12:44)
StartWhat is the difference between PX & EM & REM font sizes (14:56)
StartLine height space between paragraphs aka space after (4:33)
StartWhen would you use an svg image instead of jpg or png in web design (7:04)
StartHow to export svg png jpg from XD Photoshop Illustrator for website design (11:00)
StartBlock level images verses background images in HTML & CSS (8:32)
StartFinishing up our cards (9:10)
StartHow to add icons to your website using font awesome VS Code (16:31)
StartHow to make an entire DIV container box a clickable link (9:55)
StartHow to use box-sizing border-box from Flexbox in VS Code & web design (6:19)
StartHow to make a colored button in VS Code using HTML CSS (7:45)
StartWhy cant I add margin or padding to the top bottom of my a tag Inline vs block (11:08)
StartHow to add rounded corners to a button or div tag in HTML & CSS (4:17)
StartHow to add a css drop shadow to a website button div tags and text fonts heading (6:24)
StartHow to backup your website while you’re building (5:00)
StartReusing a button class in the navigation (3:10)
StartClass Project 04 – Custom Button (2:58)
StartClass Project 04 – Custom Button COMPLETE (5:45)
StartHow to add a horizontal rule using HTML5 & CSS3 in VS Code (3:51)
StartHow to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox (12:14)
StartHow to change hover color & animate my button in HTML & CSS (3:33)
StartHow to target specific tags in HTML to apply css to using Pseudo Classes (9:31)
StartHow to create a simple dropdown navigation menu button HTML CSS (20:04)
StartAdding our CSS dropdown menu to the roar bikes website (14:50)
StartUseful shortcuts tips tricks to speed workflow in VS Code (13:28)
StartHow to add a large background image to a website design (9:24)
StartHow to connect link 2 pages in HTML web design (10:42)
StartHow to make a simple php form work on your HTML website (17:49)
StartAdding placeholder text and labels to website form text fields in HTML (5:46)
StartHow to add a large multi line text box in a HTML form (2:18)
StartHow to add check mark tick box to a HTML form (3:04)
StartHow to add a radio button round button with dot in middle to HTML form website (6:07)
StartHow to you make a drop down form menu for a website in HTML (5:48)
StartHow to style form text boxes & check boxes in a website HTML (12:55)
Project 3: Responsive Portfolio Website
StartWhat does responsive website design mean (4:17)
StartHow to change a website layout size color at different sizes using media queries (11:28)
StartHow to test your website on a tablet or mobile phone from Visual Studio Code (6:00)
StartHow to change the layout of a responsive website for mobile vs desktop (16:02)
StartHow to turn things on and off for mobile tablet & desktop responsive websites (6:03)
StartWhat is pixel density responsive images pixel ratio dppx in webdesign (14:47)
StartHow to export responsive images for website from XD Photoshop Illustrator (5:11)
StartHow to add responsive images to website using 100% width in HTML & CSS (6:08)
StartHow to use srcset to change images in HTML for responsive website (10:15)
StartHow to add a css style to the first line of a p tag on a website (11:18)
StartHow to make the header footer full width but the inside centered (5:36)
StartClass Project 05 – Header design (3:12)
StartClass Project 05 – Header design COMPLETE (6:25)
StartHow to use a span tag or span class in HTML to change text (10:32)
StartHow to pin the navigation to the top of a website fixed nav (3:17)
StartHow to make a simple responsive mobile menu using CSS only (8:20)
StartWhat is Javascript vs Jquery in website web design (6:35)
StartHow to make a burger menu 3 line mobile navigation for a website (15:11)
StartHow to switch a menu nav from desktop to mobile phone (21:45)
Project 4: Bootstrap Yogurt Website
StartOverview of what Bootstrap 4 is in website design (7:57)
StartHow to install Bootstrap 4 on a website using Visual Studio Code (6:27)
StartQuick overview of how the Bootstrap Grid Layout works in VS Code (10:49)
StartQuick overview of how Bootstrap Components works in VS Code (9:22)
StartQuick overview of how Bootstrap CSS Styles works in VS Code (8:20)
StartHow to customize the default Bootstrap 4 css styles (13:51)
StartHow to use Bootstrap Layout Grid Experiment 1 (10:20)
StartHow to make 100% header & uneven widths in Bootstrap 4 (7:16)
StartHow to create uneven col widths in Bootstrap 4 (7:27)
StartHow to add padding & margins using Bootstrap 4 in VS Code (12:03)
StartHow to change layout of Bootstrap depending on mobile or desktop (15:46)
StartHow to turn things on & off on your website using Bootstrap 4 (5:30)
StartHow to re-create the Bootstrap media queries in your own CSS (4:40)
StartHow to use Google Chrome Inspect – Removing Overriding Bootstrap styles (12:40)
StartHow to add shadows to text & boxes in Bootstrap 4 (7:06)
StartHow to change the default Bootstrap 4 buttons size & color (6:16)
StartHow to make images responsive stretchy in Bootstrap 4 (9:34)
StartHow to center text & div tags in a Bootstrap 4 website (4:16)
StartHow to customize the website navbar in bootstrap 4 (7:29)
StartAdd your own logo to the bootstrap 4 website navigation menu (3:57)
StartHow to change the default styles for Bootstrap 4 nav (12:12)
StartHow to add a sticky fixed bootstrap 4 navigation to your website design (4:41)
StartAdding a full col image in bootstrap 4 & color the background of col (7:56)
StartHow to add a border & rounded corners to a box in Bootstrap (4:20)
StartHow to edit Bootstrap carousel off for mobile timing fade (5:13)
StartHow to put Bootstrap cards on one line using card groups decks & columns (3:29)
StartHow to add a drop shadow to a box or card in Bootstrap 4 (2:25)
StartHow to make a div tag a giant clickable link in Bootstrap 4 (4:02)
What Next
StartWhat next in our web design essentials course (6:33)

Build Your First Glass Web App Theme With HTML5 And CSS

Build Your First Glass Web App Theme With HTML5 And CSS

Instructor: Hini Majesty

OverviewDescriptionAbout

A complete step by step code along series to help you deisgn the most prettiest glass footer with HTML5 and CSS3

My story is simple and as you can tell from the promo video, i gave up so many times when i started in web design. I gave up only because i was learning a lot of HTML and CSS but i was creating very poor designs and this was discouraging.

My story is simple and as you can tell from the promo video, i gave up so many times when i started in web design. I gave up only because i was learning a lot of HTML and CSS but i was creating very poor designs and this was discouraging. The only way i overcame this was when i took a course that taught me how to create a website with HTML5 and CSS3 and most of what i did was to pause the video and type exactly what the instructor had typed. I barely understood anything but the final look of the site and the pressure i got from friends and relatives wanting me to create websites for them after i had shown them what i had done, forced me to learn without ceasing until i could put everything together to become a good web designer/developer. With that experience, i decided to get you up and running with this course by teaching you only the essential parts of HTML5 and CSS3 needed for what we would be building in this project.

The things we would learn are in the following order:

1. After introducing you to the course and giving you a feel of how the glass footer looks like, we would talk about how we can install the necessary text editors.

2. We would learn to install and use some essential sublime Text plugins that would help us to code faster and easier.

3. We would learn the basics of HTML5

4. Also we would learn the basics of CSS3

5. Next we would learn how to create the basic file structure for creating the glass project.

6. We would then code the HTML part of the glass footer with the knowledge you have gained from the basics of HTML and we would do same for the CSS3 part of the project too.

7. We would fix bugs that we encountered and that would mark the end of the glass footer.

8. In the bonus lecture you would get to know the source of the glass footer and also get my contacts.

upon completion of this course you would have adequate skills necessary to begin building very nice looking HTML5 and CSS3 websites on your own.

You would also be able to build the same project for clients and make money.

It would take you just 2 and half hours to complete the course while having a lifetime access to the course. After the course you would have all the skills necessary to build the nicest glass looking footer ever. Trust me, your clients would really be amazed at how well you are good with your designs and your work.

Who this course is for:

  • This course is for the beginner to the pro. It is for every level since all that you need to understand the course would be taught in a very simple and easy to understand way.
  • The aspiring web programmer and designer
  • Anyone with the interest to build websites from scratch using HTML5 and CSS3

Hini Majesty

Majesty works as a freelance software developer who specialized in web development. As an experienced network marketer working with GNLD, i have always focused my web development towards building financial Apps. As of this wirting, i have taught several groups computer programming mainly the web languages even though i program in C++ and Java. I have developed quiet a number of web sites and many database driven web apps using HTML,CSS,JQUERY,JAVASCRIPT, PHP, MYSQL and other language extensions like JSON and PDO. I also do volunteer work for my church where i developed and update the churches website and database.

2:50  Hours

25 Lessons

Lifetime Access

Course Curriculum

Preview Course

Course Introduction and Installation of Text editors and Plugins
PreviewIntroduction (1:58)
StartText editors (2:24)
StartSublime Text plugins (7:37)
PreviewSublime Text Sidebar and projects. (2:33)
Basics Of HTML5
StartHTML5 BASICS (9:34)
PreviewThe HTML UL Tag (1:18)
StartHTML and stylesheet (5:46)
Basics Of CSS3
StartCSS selectors (8:24)
StartCss basics (10:43)
PreviewCSS and Anchor style. (1:59)
StartText and Box shadow (4:59)
StartCSS Positioning (5:41)
StartCreating a custom font using css. (4:03)
StartReset CSS (2:05)
Let the Glass Footer Begin
StartFile setup for the glass footer project (3:18)
StartCoding the HTML section of the glass footer. (9:41)
StartIdentifying the coded HTML uniquely using ids and classes. (4:49)
StartAdding the helper classes. (3:57)
StartStyling the footer element (12:11)
StartStyling the footer menu tab and the other tabs on the page (9:07)
StartStyling the other tabs (14:19)
StartAnimating the notifications icon. (3:57)
StartStyling the logout tab. (8:56)
StartFixing the bugs (3:21)
Bonus Lecture
StartBonus Lecture (3:13)

HTML5 & CSS3 - Building Responsive Websites

HTML5 and CSS3 - Building Responsive Websites

Instructor: Total Training

OverviewDescriptionAbout

Build one layout for multiple displays

With HTML5 & CSS3 – Building Responsive Websites, you’ll start with the fundamentals of responsive design, beginning with multiple style sheets, media queries and various expressions.

With HTML5 & CSS3 – Building Responsive Websites, you’ll start with the fundamentals of responsive design, beginning with multiple style sheets, media queries and various expressions.

Next comes the fun part: you’ll be guided through several in-depth chapters that walk you through the responsive design workflow, building HTML structure and CSS formatting for mobile and desktop displays; including tablets, desktop screens, and smartphones.

Veteran instructor Geoff Blake shows you how to plan out your work, handle common issues that arise in a responsive layout, and how to handle various page components between device displays.

Finally, the course closes with additional tricks, advanced techniques, and testing methods to ensure that your layout looks fantastic.

Total Training

Total Training is a pioneer in innovative online training for leading creative design, digital video, office productivity software programs, and more.

Ranging from casual hobbyists to the most seasoned professionals, our users quickly learn new applications and broaden their knowledge of programs currently used. Narrated in an entertaining format by industry experts and leading authors, our video-based training titles are critical tools for anyone wanting to learn tips, techniques, and best practices from the most respected names in the business.

We currently offer affordable subscriptions to our All-Access Library, which contains hundreds of courses, thousands of clips, and project files so users can follow along.

HISTORY

Total Training was founded in 1996 to provide the highest quality instruction to users of creative software. Recognizing that printed instruction was tedious, and classroom training was hard to find and often prohibitively expensive, Brian Maffitt, Total Training CEO and President collaborated to create the first video series, Total AE. The response was overwhelming.

3:49  Hours

42 Lessons

Lifetime Access

Course Curriculum

Preview Course

1.Introduction
PreviewWelcome (0:48)
StartA Look At What We’ll Build (1:35)
2.Responsive Design Fundamentals
StartKey Aspects Of Responsive Design (2:43)
PreviewDetermining Device Resolutions To Target (4:20)
StartWireframing Responsive Layouts (4:58)
3.The Basics: Multiple Style Sheets & Media Queries
StartThe Concept Of Using Multiple CSS Files (10:49)
StartMedia Queries & Multiple Style Sheets (8:57)
StartBuilding Media Queries Into A Single CSS File (7:38)
StartUsing Media Query Expressions (5:04)
4.Building HTML Structure & CSS For All Screens
StartSetting Up The HTML & CSS Files (4:18)
StartGetting Started With The Header (7:36)
StartInserting The Main Nav Menu (6:01)
StartInserting The Search Field (6:55)
StartProblems With Applying Floats (4:19)
StartIntegrating Google Fonts API (3:24)
StartBuilding The Hero Section Structure (4:25)
StartFormatting The Hero Section (9:04)
StartInserting & Formatting A Call To Action Button (9:50)
StartBuilding The Features Section, Part One (5:46)
StartBuilding The Features Section, Part Two (4:56)
StartInserting The Organize Section (8:18)
StartBuilding The Share Section (5:15)
StartBuilding The Call To Action Area (6:36)
StartInserting And Formatting The Footer (3:47)
StartFinishing Touches For The High Resolution Layout (4:06)
5.Building The Tablet Layout
StartSetting Up The Medium Resolution CSS & Testing The Media Query (7:01)
StartFormatting The Medium Res Header (4:08)
StartFormatting The Medium Res Hero Section (6:08)
StartFormatting The Features Section (2:13)
StartFormatting The Organize And Share Sections (5:17)
StartBuilding The Get Section & Finishing Up The Medium Res Layout (2:53)
6.Building The Smartphone Layout
StartSetting Up The Low Res CSS & Testing The Media Query (4:40)
StartFormatting The Low Res Header (2:52)
StartResolving Problems Caused By Floats (4:21)
StartFormatting The Low Res Hero Section (3:17)
StartFormatting The Features Section (1:46)
StartFormatting The Organize And Share Sections (2:58)
StartBuilding The Get Section & Finishing Up The Low Res Layout (3:06)
7.Advanced Techniques For Responsive Design
StartDisabling Device Smart Zoom (5:59)
StartTesting Your Responsive Layouts (4:27)
StartSetting Up Retina Display Graphics (6:21)
8.Wrapping Up
StartWhere To Go From Here (0:28)
Project Files Included
StartProject Files – HTML5 CSS3 Building Responsive Websites

$49

$24.50