OUR COURSES
HTML5 & CSS3: A Site Design Bundle
Duration 14 hr 28 mins
Languages en_US
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 CSS2. 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
Content
Download Project File
Welcome to HTML & CSS!
A Look At What We'll Build
Welcome to HTML & CSS!
A Look At What We'll Build
Programs I'll Be Using
In The Beginning…HTML Fundamentals
Understanding What CSS is All About
Viewing A Page's Background Code
In The Beginning…HTML Fundamentals
Understanding What CSS is All About
Viewing A Page's Background Code
Organizing Site Files
Creating A Page and Understanding Index Files
Setting Up An External Style Sheet
Creating A Page and Understanding Index Files
Setting Up An External Style Sheet
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
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
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
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
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
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
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
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
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
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
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
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
Where to Go from Here
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
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
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
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
First Thing's First: Getting Organized
Building the Logo Container
Setting Up the Main Navigation Menu
Creating A Call-To-Action Button
Building the Logo Container
Setting Up the Main Navigation Menu
Creating A Call-To-Action Button
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
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
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
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
Where to Go From Here
Download Project File
Welcome! Here's What This Course Is All About
Here's What We'll Create In This Course
Welcome! Here's What This Course Is All About
Here's What We'll Create In This Course
Determining The Design's Message
Choosing Your Design's Colour Palette
Tools For Selecting Typefaces
Choosing Imagery And Design Elements
Choosing Your Design's Colour Palette
Tools For Selecting Typefaces
Choosing Imagery And Design Elements
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
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 & 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
Setting Up The Hero Graphics
Getting The Feature Images Inserted
Placing The Organize & Share Images
Using A Graphic As A Button Label
Online Testing Tools
Running Virtual Operating Systems For Testing
Making Minor Adjustments For Browser Compatibility
Running Virtual Operating Systems For Testing
Making Minor Adjustments For Browser Compatibility
Where To Go From Here
Welcome
A Look At What We'll Build
Download Project File
A Look At What We'll Build
Download Project File
Key Aspects Of Responsive Design
Determining Device Resolutions To Target
Wireframing Responsive Layouts
Determining Device Resolutions To Target
Wireframing Responsive Layouts
The Concept Of Using Multiple CSS Files
Media Queries & Multiple Style Sheets
Building Media Queries Into A Single CSS File
Using Media Query Expressions
Media Queries & Multiple Style Sheets
Building Media Queries Into A Single CSS File
Using Media Query Expressions
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
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
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
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
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
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
Disabling Device Smart Zoom
Testing Your Responsive Layouts
Setting Up Retina Display Graphics
Testing Your Responsive Layouts
Setting Up Retina Display Graphics
Where To Go From Here