Fast track to HTML & CSS 101 (Web Design)

Size: px

Start display at page:

Download "Fast track to HTML & CSS 101 (Web Design)"

Tyler Hunter
8 years ago
Views:

Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.

1 Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of web design. If you re looking to launch a career in this area, or you d simply like the capacity to build your own sites from the ground up, you ll need a solid education in both of these coding languages. This Fast Track 101 Yellow belt course will give you just this, beginning with basic HTML and advancing to more complex XHTML and CSS in just five days. Afterwards you ll be able to create your own professional-standard sites, take control of your own web presence, and be an asset to any company that requires the creation and maintenance of a small to medium site. Description 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. Who is this course for? 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. What you will learn

If you re looking to launch a career in this area, or you d simply like the capacity to build your own sites from the ground up, you ll need a solid education in both of these coding languages.

2 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) Outline The World Wide Web Client Side vs. Server Side The web technologies Evolution of the World Wide Web What is Web 2.0 Workings of HTTP The fundamentals of the web What is AJAX? The W3C Web Standards Web Accessibility Architecture Site Architecture File & Folder Management Site definition Naming conventions Defining assets Browsers What is a Browser? Browser Wars

* 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

3 Netscape to Chrome Browser Statistics A Modern Browser Cross-Browser compatibility issues Internet Explorer 6 issues Mobile Browsers The Syntax Tags Self-closing tags block and inline The <!DOCTYPE> The Different DOCTYPE s What is a DOCTYPE HTML5 DOCTYPE The DTD XML declaration issue XHTMLising your code Document Object Model HTML5 Default options The <HEAD> Adding Meta tags Keywords, Descriptions and Refresh The Character Set HTML Comments Style Tag Script Tag Document Structure Structural Elements Headings & Paragraphs Semantics Lists Nested Lists Data Types and Definitions Special Characters The title attribute Using the address tag cite, dfn, var, abbr code, kbd, samp and pre Quoting in HTML bold, strong, italic and emphasis Tables Table headers Accessibility in Tables

Keywords, Descriptions and Refresh The Character Set HTML Comments Style Tag Script Tag Document Structure Structural Elements Headings & Paragraphs Semantics Lists Nested Lists Data Types and

4 Nesting Tables Adding Captions Merging columns and rows Web Images GIF, JPEG and PNG What format do I choose? Image attributes Alternate text for Accessibility Figure Captioning Hyperlinks The anchor tag Named anchors Relative & absolute links Linking to an address Forms Forms basics GET vs. POST Text fields Setting Accessibility labels Text Area Check boxes Drop-down lists Radio buttons Radio Groups Upload a file Fieldset & accessibility Submit & Reset buttons Publishing Buying a Domain Buying hosting space File transfer Protocol Uploading files to a server Testing online Practical Exercises Building a Hello World page Building a small site* CSS Introduction HTML Structure and Content, CSS Presentation Advantages of CSS Implementing CSS

POST Text fields Setting Accessibility labels Text Area Check boxes Drop-down lists Radio buttons Radio Groups Upload a file Fieldset & accessibility Submit & Reset buttons Publishing

5 CSS Rules: The Basic Syntax Case, Whitespace and Comments in CSS The CSS Standards The Scope of CSS Browser Support for CSS CSS Hackarounds Writing CSS CSS Selectors CSS and HTML Structure The CSS Box Model The IE Box Model Absolute Units Proportional Units Shorthand Syntax Margins and Padding Negative Margins Background Images Classes and ID s Descendant Selectors Group Selectors Block Boxes and Inline Boxes Block Box Behaviour Inline Box Behaviour Text Text Formatting in CSS Text Formatting Typefaces, Alternatives and Defaults Text Size and usability issues Internet Explorer Quirks Font Characteristics Setting and Using Space Within Text Formatting Blocks of Text Links Undeerstanding Link States Styling Link states Styling Internal Links Styling external Links Styling links to documents Stylesheets Reset.css Modularising CSS Style-Sheets

and Inline Boxes Block Box Behaviour Inline Box Behaviour Text Text Formatting in CSS Text Formatting Typefaces, Alternatives and Defaults Text Size and usability issues Internet Explorer Quirks Font

6 Simpler Management, Less Effort, More Control Using Embedded Styles CSS Positioning Choosing the Right CSS Technique for Positioning Blocks The Position Property The Document Flow Static Positioning Relative Positioning Relative Positioning with specified values Absolute Positioning Fixed Positioning The CSS float property Clearing Floats Page Layout Using CSS in the Real World Deploying CSS Usability Readable Pages The Proliferation of Screens Deployment CSS 2.1 CSS3 Browser Support Testing Using Test Suites and Multiple Browsers Cross-platform Testing in Single-platform Environments CSS Help and Advice Authoritative Sources versus Web Myths and Gossip Practical Exercises Styling a simple page Styling a small site

CSS in the Real World Deploying CSS Usability Readable Pages The Proliferation of Screens Deployment CSS 2.

Responsive Web Design Creative License

Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.