HTML5 & CSS3: A Site Design Bundle


  • HTML5 & CSS3: A Site Design Bundle, Singapore elarning online course
  • HTML5 & CSS3: A Site Design Bundle, Singapore elarning online course
  • HTML5 & CSS3: A Site Design Bundle, Singapore elarning online course
  • HTML5 & CSS3: A Site Design Bundle, Singapore elarning online course
  • HTML5 & CSS3: A Site Design Bundle, Singapore elarning online course
  • HTML5 & CSS3: A Site Design Bundle, Singapore elarning online course

Take This Course

Course Description

Ever wanted to learn how to build a website, or to brush up on your coding skills to enhance an existing site? This course will show you, in a step-by-step process, how to set up a web site from scratch and tips and tricks of the trade to change your site into one that is more attractive and user-friendly. From what tools you need, to building your site, 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 both HTML and CSS coding skills. Geoff’s casual tone, real world examples, and the follow-along video make this course as entertaining as it is informative.

Up your web design game and flaunt your newly crafted page in the World Wide Web!

- Learn about the purpose of HTML5 and CSS3
- Know how to apply HTML5 and CSS3 skills into your site
- Understand the step process when designing your site
- Know how HTML and CSS supports a site development


Course Objectives

1. Understand the basics introduction to HTML and CSS
2. Know how build a web layout from scratch
3. Able to work with text, graphics and additional pages
4. Know how to upload a site once finished designing
5. Able to change wireframes into actual designs
6. Know how to change codes for tablets and smart phones 
7. Able to create responsive web pages  


Curriculum

HTML & CSS Site Design: Introduction

Preview Available

+

Download Project File

Welcome to HTML & CSS!

A Look At What We'll Build

Let's Get Started!

+

Programs I'll Be Using

In The Beginning…HTML Fundamentals

Understanding What CSS is All About

Viewing A Page's Background Code

Gettin' Your Files Organized!

+

Organizing Site Files

Creating A Page and Understanding Index Files

Setting Up An External Style Sheet

Let's Build A Web Layout From Scratch!

Preview Available

+

Setting Up The Page Structure

Connecting the External Style Sheet and Testing

Inserting and Formatting the Site Header

Finishing Up The Basic Layout

Debugging for Internet Explorer

Understanding How the Layout Works

Using Divs for Page Layout

A More Economical Approach to Layout and CSS

Using Float And Clear

Centering the Layout

Nesting Layout Objects

Spacing Apart the Layout

Final Touches

Insertin' And Formattin' Text!

+

Inserting Text Into the Layout

Setting Up Paragraphs and Headings

Adjusting the Layout For Text, Part

Adjusting the Layout For Text, Part

Formatting HTML Headings with CSS

Formatting Paragraphs

Using Class Rules to Format Text

More Formatting with Class Rules

Working More Efficiently with CSS

Inserting and Formatting Lists

Using A List to Build The Main Navigation Menu

Setting Up the Footer Navigation

Now It's Time For Some Graphics!

+

Inserting an Image

Resizing Images with your Graphics Editor

Controlling Graphics with CSS

Inserting the FeatureBox Images

Adjusting the FeatureBox Layout

Setting Up the FeatureBox Titles

Illustrator, Photoshop, HTML, and CSS Workflow

Site Rollout: From A Single Page To A Multi-Page Site!

+

Getting Ready for Site Rollout

How to Not Roll Out A Website

Rollout Part 1: Setting Internal Hyperlinks

Rollout Part 2: Creating The Site's Pages

Previewing And Testing The Site

A Final Thought on Site Rollout

Inserting Additional Page Elements!

+

Adjusting the Site's Hyperlink Formatting

Inserting A Simple Slideshow

Inserting and Formatting Tables

Inserting A Google Map

Formatting A Customer Testimonial Page

Setting Up A Contact Us Page

Finalizing the Site

Organizing the CSS File

Going Live: Uploading the Completed Site!

+

Setting the Remote Site Info

Uploading the Local Site to the Remote Server

Testing the Live Site

Making Edits and Updating the Live Site

Testing And Debugging For Other Browsers

Wrapping Up HTML & CSS

+

Where to Go from Here

Website Wireframing with HTML & CSS: Introduction

+

Download Project File

Welcome! Understanding Layout Wireframing

Why Using Photoshop May Not be the Best Choice

Using HTML & CSS for Fast Wireframe Compositing

A Look At What We'll Build in this Course

Bonus Lesson: How to turn any web page into a wireframe

Getting Started

+

Setting Up the Rough Page Structure

Building the Structural CSS Rules, Part 1

Building the Structural CSS Rules, Part 2

Connecting Up the HTML to the CSS

Centering Layout Elements

Setting Up Inner Layout Containers

Inserting Additional Inner Containers

Spacing Apart the Layout

Wireframing The Header in Greater Detail

+

First Thing's First: Getting Organized

Building the Logo Container

Setting Up the Main Navigation Menu

Creating A Call-To-Action Button

Building the Rest of the Layout

+

Inserting the Hero Image

Getting Started with the Hero Content

Finishing Up the Hero Section

Inserting the Feature Headers

Building the Feature Boxes

Wireframing the Organize Section

Speeding Things Up for the Share Section

Finishing Up the Wireframing

Finishing Touches

+

Inserting A Placeholder Image

Adding A Logo Placeholder with Text

Inserting the Remaining Image Placeholders

Inserting a Background Placeholder

Adding Subtle Interactivity

Adding Button Interactivity

Finishing Touches

Sharing the Wireframe for Review

Wrapping Up

+

Where to Go From Here

Applying Design to Wireframes with HTML & CSS: Introduction

+

Download Project File

Welcome! Here's What This Course Is All About

Here's What We'll Create In This Course

From Wireframe To Design

+

Determining The Design's Message

Choosing Your Design's Colour Palette

Tools For Selecting Typefaces

Choosing Imagery And Design Elements

Getting The Design Underway

+

Getting Started By Styling The Header

Formatting Call-To-Action Buttons With CSS

Adding Additional Shadow Effects To The Buttons

Finishing Up The Button Formatting

Typographic Treatments With Google Font API

Beginning The Features Styling

Finishing The Features Section

Formatting The Organize Section

Wrapping Up The Layout's Design

Inserting & Formatting Graphics

+

Inserting & Adjusting The Logo

Setting Up The Hero Graphics

Getting The Feature Images Inserted

Placing The Organize & Share Images

Using A Graphic As A Button Label

Cross-Browser Testing

+

Online Testing Tools

Running Virtual Operating Systems For Testing

Making Minor Adjustments For Browser Compatibility

Wrapping Up

+

Where To Go From Here

Building Responsive Websites With HTML & CSS: Introduction

+

Welcome

A Look At What We'll Build

Download Project File

Responsive Design Fundamentals

+

Key Aspects Of Responsive Design

Determining Device Resolutions To Target

Wireframing Responsive Layouts

The Basics: Multiple Style Sheets & Media Queries

+

The Concept Of Using Multiple CSS Files

Media Queries & Multiple Style Sheets

Building Media Queries Into A Single CSS File

Using Media Query Expressions

Building HTML Structure & CSS For All Screens

+

Setting Up The HTML & CSS Files

Getting Started With The Header

Inserting The Main Nav Menu

Inserting The Search Field

Problems With Applying Floats

Integrating Google Fonts API

Building The Hero Structure

Formatting The Hero Section

Inserting & Formatting A Call To Action Button

Building The Features Section, Part One

Building The Features Section, Part Two

Inserting The Organize Section

Building The Share Section

Building The Call To Action Area

Inserting And Formatting The Footer

Finishing Touches For The High Resolution Layout

Building The Tablet Layout

+

Setting Up The Medium Resolution CSS & Testing The Media Query

Formatting The Medium Res Header

Formatting The Medium Res Hero Section

Formatting The Features Section

Formatting The Organize And Share Sections

Building The Get & Finishing Up The Medium Res Layout

Building The Smartphone Layout

+

Setting Up The Low Res CSS & Testing The Media Query

Formatting The Low Res Header

Resolving Problems Caused By Floats

Formatting The Low Res Hero Section

Formatting The Features Section

Formatting The Organize And Share Sections

Building The Get & Finishing Up The Low Res Layout

Advanced Techniques For Responsive Design

+

Disabling Device Smart Zoom

Testing Your Responsive Layouts

Setting Up Retina Display Graphics

Wrapping Up

+

Where To Go From Here

This site is best viewed using the latest versions of Google Chrome, Apple Safari, Mozilla FireFox, Microsoft Internet Explorer 11 and Edge which supports HTML5/Webkit technologies.

Payment

You are making payment for the following course :
 
Price ($) : 0.00
 
Redemption
Cashback balance ($) : 0.00
 
Coupon Code
 
GST 7% ($) : 6.93
Final amount to pay ($) : 105.93