• Technical IT

    Solutions delivered throughout the UK
  • Business Applications

    Solutions delivered throughout the UK
  • Professional Best Practice

    Solutions delivered throughout the UK
  • Professional Development

    Solutions delivered throughout the UK

Web Fundamentals Jumpstart

Web Fundamentals Jumpstart
  • Price £997.00
  • Level Introduction
  • Duration 5 day(s)
All major credit cards accepted

Description

HTML (includes HTML5 Elements)
CSS Fundamentals with CSS3 properties

This class provides you with the concepts and skills to use HTML, Javascript and CSS effectively. You get hands-on practice working with basic through advanced techniques to get the most out of your experience. You will learn the basics of coding for web design, beginning with HTML and advancing to more complex XHTML and CSS fundamentals.

The CSS part of the class provides the web professional with the ability to control the rendering, e.g. fonts, colours, leading, margins, typefaces, and other aspects of style, of a Web document without compromising its structure using Cascading Style Sheets. Using common desktop publishing terminology, Cascading Style Sheets makes it easy for professional as well as untrained designers to make use of its features.

This class is a must for people new to web design.
The class is a package and doesnt have its own schedule but instead you would take the HTML 101 Rookie class fiorst and follow this up at a later date with the CSS rookie class

Prerequisites

People new to Web design that desire a deeper understanding of HTML and CSS, and the new standards of web design.

Assumed Knowledge

We will assume little or no prior knowledge of HTML and CSS in this course but you should have a basic working knowledge of either the Windows or Mac.

Skills

Upon successful completion of this course you’ll be able to; convert an existing page, styling for print, styling a press release, making an input form look good, styling an events calendar, creating an online greeting card, bringing hyperlinks to life, multicolumn layout, how to skin a menu, sneaking out of the box, positioning a better design and fixing your backgrounds.

  • Basics of HTML and CSS
  • Planning your Web Site
  • Formatting
  • Images and Styles
  • Understanding Properties
  • Working with Colours and Background Images
  • The DIV Tag
  • Layout and building Basic Forms
  • Understand the JavaScript language.
  • Understand the Document Object Model and how it is used in JavaScript.
  • How to detect and respond to user actions
  • Alter, show, hide and move objects on a web page
  • Check information inputted into a form
  • How to use CSS (Cascading Stylesheets)

Course Content

The Language of the Web

  • Basics of HTML and the Web
  • Creating an HTML File
  • Web Browsers and Tags
  • Formatting and Testing Pages
  • Understanding Attributes
  • Working with Images

Web Page Construction

  • The Rough Design Sketch
  • From a Sketch to an Outline
  • From Outline to Web Page
  • Testing your New Pages
  • Learning New Tags and Elements
  • Working with Blockquote and Paragraph
  • Nesting Elements
  • Choosing Inline or Block for Text

Serving Up the Page

  • Finding Hosting Solutions
  • Domain Name Basics
  • Getting your Files to the Web
  • URL Linking
  • HTTP Protocol
  • Absolute and Relative Paths
  • Index and Default Pages
  • Linking to Other Web Sites
  • Liking to a New Window
  • Using Target
  • Testing on Multiple Browsers
  • Tips and Tricks for Publishing

Images, Media, and More HTML

  • Working with Images
  • Standards and the ATL Tag
  • Images for Links
  • Formatting Options
  • Working with Transparent Images
  • Working with Page Color and Background
  • Document Type and the W3C Validator
  • Using Meta Tags and Data
  • Validating and Nesting Fixes

Moving on to XHTML

  • Learning About XHTML
  • The XHTML 1.0 Checklist
  • Moving from HTML to XHTML
  • Validation and XHTML

Adding Some Style

  • Using CSS and XHTML
  • Designing and Building Rules
  • Linking to External Style Sheets
  • Understanding Inheritance
  • The Font Family Tree
  • Overriding Inheritance
  • Creating a Selector for the Class
  • Taking Classes Further
  • Validating CSS

More About CSS and Properties

  • Text and Fonts
  • Understanding Font-Family
  • Adding Style to Your Fonts
  • Specifying Web Colours
  • Two Minute Guide to Hex Codes
  • How to Find Web Colours
  • Text Decorations
  • Removing the Underline from Links

Web Layout Basics

  • Learning the Box Model
  • Padding, Border, and Margins
  • Adding a Background Image
  • Adding Padding to the Left and Right
  • Two Minute Guide to Borders
  • Border Fit and Finish
  • Working with the id Attribute
  • Using Multiple Style Sheets

More HTML and CSS Techniques

  • Dividing a Page into Logical Sections
  • Selecting Descendants
  • Working with Colour
  • Fixing the Line Height
  • Adding the Tag for Style
  • Styling Based on State
  • Pseudo-Classes
  • Understanding the Power of Cascade

Arranging Elements

  • Working with Flow
  • Working with Inline Elements
  • Putting it all Together
  • Working with Width and Float
  • Fixing the Two-Column Problem
  • Fixing Overlap
  • Liquid and Frozen Designs
  • How Fixed Positioning Works
  • Two and Three Column Designs

Adding Forms to your Page

  • How Forms Work
  • Adding the Form Element
  • Working with Input and Select
  • Radio Buttons and Drop Downs
  • Working with Get and Post
  • Working with Tables and Forms
  • Styling the Form and Table with CSS

CSS Introduction

  • HTML Structure and Content, CSS Presentation
  • Advantages of CSS
  • Creating and Using Style-Sheets
  • CSS Rules: The Basic Syntax
  • Case, Whitespace and Comments in CSS
  • The CSS Standards
  • The Scope Of CSS
  • Browser Support for CSS

CSS Boxes and CSS Selectors

  • The CSS Box Model
  • CSS and Logical HTML Structure
  • Styling Boxes: Borders, Margins and Padding
  • The IE Box Model and Quirks Mode
  • IE Box Model Workarounds
  • Using IE6 Standards Mode
  • Specifying CSS Distances
  • Problems with Absolute Units: pixels and point sizes
  • Using Proportional Units: em, ex and percentages
  • Formatting Box Edges Differently
  • Shorthand Syntax for Sets of Edges
  • Using Margins and Padding Effectively
  • Collapsing Vertical Margins on Paragraphs
  • Using Negative Margins on Boxes
  • Background Images on CSS Boxes
  • Grouping Elements with HTML Classes
  • Styling Multiple Elements Similarly (Selector Grouping)
  • Block Boxes and Inline Boxes
  • Block Box Behaviour
  • inline Box Behaviour

Text Formatting in CSS

  • Text Formatting
  • Typefaces, Alternatives and Defaults
  • Text Size — a Serious Usability Issue
  • Font Characteristics
  • Setting and Using Space Within Text
  • Formatting Blocks of Text
  • Using Arbitrary Inline Tags:

More CSS Selectors and Selection

  • Using HTML Element IDs in CSS
  • Using CSS Descendant Selectors
  • Descendant Selector Examples
  • Child, Sibling and Pseudo-Class Selectors
  • Why You Need To Know Them
  • Browser Support and CSS Hacks
  • Distinguishing and Setting Link States
  • Link, Visited, Hover, Active, Focus
  • Modularising CSS Style-Sheets
  • Simpler Management, Less Effort, More Control
  • Embedded CSS Styles in HTML Documents
  • How and When to Use Them (Rarely).
  • Distinguishing Print, Screen and other Output Formats
  • Special Issues in CSS for Print

CSS Positioning

  • Choosing the Right CSS
  • Technique for Positioning Blocks
  • The Position Property, Floats, Margins (inc. Negative and Auto), etc
  • Static Positioning and Normal Flow
  • Absolute Positioning Outside Normal Flow
  • Relative Positioning — Not What You May Expect!
  • Fixed Positioning Outside Normal Flow
  • Relative Absolute Positioning
  • Absolutely Positioned Blocks in Relatively Positioned Containers
  • Floating Boxes with the CSS float property
  • Page Layout Using Absolutely Positioned Blocks

More on CSS Page Layout

  • Alternative Methods of CSS Positioning
  • Centring Blocks
  • Styling Lists
  • Redefining the Behaviour of Inline and Block Elements
  • Hiding and Revealing Blocks
  • Table Formatting in CSS
  • Styling Table Cell Borders
  • Page Layout with Table Display Properties

Cascade, Precedence, Specificity and Inheritance in CSS

  • Taking Control: Ensuring that CSS Rules Interact in the Way You Want
  • Combining Styles: Different Types, Origins, Importance, Specificity and Order
  • Examples: Combining Rules
  • Cascading and Cascade Order
  • Resolving Style Conflicts By Origin
  • Resolving Style Conflicts By Importance
  • Resolving Conflict By Selector Specificity
  • Resolving Conflict By Order
  • Non-CSS Presentational Hints
  • Property Inheritance

CSS Layers and Translucency

  • Different Forms of Layered Presentation in CSS
  • Layering with the z-index Property
  • Different Methods for Creating Translucency Effects
  • The CSS3 opacity Property
  • opacity Example
  • Fixed Attachment Backgrounds in Layers
  • background-attachment Example
  • Transparency and Semi-transparency with Alpha-Blended PNG
  • PNG Translucency Example and Sample Code
  • Pseudo-Transparency with JPG Positioned Backgrounds
  • JPG Pseudo Transparency Example

Using CSS in the Real World

  • Deploying CSS
  • CSS Formatting Versus HTML Formatting
  • Achieving a Balance
  • Standard Tags and Semantic Markup
  • Usability
  • Readable Pages
  • Screen Size and Fluid Design
  • Text Size, Including Internet Explorer Quirks
  • Table Layout and CSS Positioning
  • Table Layout and CSS Positioning as Alternatives
  • Combining Table Layout with CSS Positioning
  • CSS Browser Support
  • Testing Websites
  • Using Test Suites and Multiple Browsers
  • Cross-platform Testing in Single-platform Environments
  • CSS Help and Advice
  • Authorities Sources versus Web Myths and Gossip
  • Free Lifetime Support

Make Enquiry

Course Enquiry
  •  
  •  

Book Now

Course Enquiry
  •  
  •  

Find your local training centre