Responsive Web Design Creative License

Transcription

1 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. With around 4000 different mobile devices available on the market, and mobile devices out-selling desktop devices for the first time, mobile Internet users are a force to be reckoned with. What this means is that any designer has to consider the adaptability of a web site to various different devices before anything else, using a process we call responsive web design. The Responsive Web Design Creative License package assumes no prior knowledge of web design whatsoever, and brings participants up to the level of expert in not just web design, but responsive and adaptable web design. Description The most intense and in-depth Responsive Web Design training course of its kind in the UK. Immerse yourself in the technology you'll need to know to make websites for multiple screen sizes. The Responsive Web Design Creative License training package includes the entire curriculum for total immersion into Responsive Web Design. The package is a training program that features a combination of six training courses for a heavily discounted price. The package does not have a schedule of its own. Each class is scheduled separately and can be taken over a year so you can take the classes as quickly or as slowly as you desire. Courses include * HTML 101: Rookie (3 days) * HTML 201: Hot shot (2 days) * CSS 101: Rookie (3 days) * CSS 201: Hot shot (2 days) * Javascript 101: Rookie (3 days) * JQuery 201: Hot shot (2 days) * Responsive Web Design ( 1 day) 16 days in total to be taken across the year

2 Who is this course for? People new to Web design that desire a deeper understanding of HTML, CSS and Javascript / Jquery and the new standards of web design. The HTML5 section of the class is designed for people interested in designing, creating, and deploying HTML5 web applications. It is valuable to both beginners and advanced developers that already have experience in developing web applications. 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 * Basics of HTML and CSS, * Planning your Web Site, * Formatting, * Images and Styles, * Understanding Properties, * Working with Colors and Background Images, * The DIV Tag and * Layout and building Basic Forms * Know how to use HTML5 Markup * Know how to use the HTML5 JavaScript APIs * Understand current browser support for the various HTML5 features * Understand how to emulate certain HTML5 features on older browsersunderstand 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 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. You ll also be able to; work with the media query, add custom web fonts, apply text shadows, work with the REM unit, add CSS3 Gradients, round corners, apply a transparency, multicolumn layout, build CSS3 menus, working with CSS3 & jquery, rotating objects, adding transitions and 3D in CSS3. Outline <lh>the Language of the Web</lh> <li>basics of HTML and the Web

3 <li> Creating an HTML File <li>web Browers and Tags <li>formating and Testing Pages <li>understanding Attributes <li>working with Images <lh><br/>web Page Construction</lh> <li>the Rough Design Sketch <li>from a Sketch to an Outline <li>from Outline to Web Page <li>testing your New Pages <li>learning New Tags and Elements <li>working with Blockquote and Paragraph <li>nesting Elements <li>choosing Inline or Block for Text <lh><br/>serving Up the Page</lh> <li>finding Hosting Solutions <li>domain Name Basics <li>getting your Files to the Web <li>url Linking <li>http Protocol <li>absolute and Relative Paths <li>index and Default Pages <li>linking to Other Web Sites <li>liking t o a New Window <li>using Target <li>testing on Multiple Browsers <li>tips and Tricks for Publishing <lh><br/>images, Media, and More HTML</lh> <li>working with Images <li>standards and the ATL Tag <li>images for Links <li>formatting Options <li>working with Transparent Images <li>working with Page Colour and Background <li>document Type and the W3C Validator <li>using Meta Tags and Data <li>validating and Nesting Fixes <lh><br/>moving on to XHTML</lh> <li>learning About XHTML <li>the XHTML 1.0 Checklist <li>moving from HTML t o XHTML <li>validation and XHTML

4 <lh><br/>adding Some Style</lh> <li>using CSS and XHTML <li>designing and Building Rules <li>linking to External Style Sheets <li>understanding Inheritance <li>the Font Family Tree <li>overriding Inheritance <li>creating a Selector for the Class <li>taking Classes Further <li>validating CSS <lh><br/>more About CSS and Properties</lh> <li>text and Fonts <li>understanding Font-Family <li>adding Style t o Your Fonts <li>specifying Web Colours <li>tw o Minute Guide t Hex Codes <li>how to Find Web Colours <li>text Decorations <li>removing the Underline from Links <lh><br/>web Layout Basics</lh> <li>learning the Box Model <li>padding, Border, and Margins <li>adding a Background Image <li>adding Padding to the Left and Right <li>two Minute Guide toborders <li>border Fit and Finish <li>working with the id Attribute <li>using Multiple Style Sheets <lh><br/>more HTML and CSS Techniques</lh> <li>dividing a Page into Logical Sections <li>selecting Descendants <li>working with Colour <li>fixing the Line Height <li>adding the Tag for Style <li>styling Based on State <li>pseudo-classes <li>understanding the Power of Cascade <lh><br/>arranging Elements</lh> <li>working with Flow <li>working with Inline Elements

5 <li>putting it all Together <li>working with Width and Float <li>fixing the Two-Column Problem <li>fixing Overlap <li>liquid and Frozen Designs <li>how Fixed Positioning Works <li>two and Three Column Designs <lh><br/>adding Forms to your Page</lh> <li>how Forms Work <li>adding the Form Element <li>working with Input and Select <li>radi Buttons and Drop Downs <li>working with Get and Post <li>working with Tables and Forms <li>styling the Form and Table with CSS <lh><br/>html5 Overview</lh> <li>history of HTML5 <li>the HTML5 vision <li>whatwg and W3C specifications <li>what is part of HTML5? <li>html5 roadmap <lh><br/>using HTML5 Today</lh> <li>when can I use these features? <li>using HTML5 on mobile devices <li>moving away from Flash <li>building fast web applications <li>performance Analysis <li>developer Tools <li>using HTML5 in browsers that do not support it <li>detecting native availability of HTML5 features <li>emulation <lh><br/>markup, forms, and offline applications</lh> <li>html5 Markup <li>html5 page structure <li>html5 DOCTYPE <li>html5 markup <li>structural elements <li>semantic elements <li>deprecated elements <li>html5 and CSS

6 <lh><br/>html5 Forms</lh> <li>html5 form elements <li>building and using HTML5 forms <lh><br/>html5 Offline Applications</lh> <li>html5 offline applications <li>offline manifest files <li>applicationcache events <lh><br/>html5 Audio and Video</lh> <li>the audio and video elements <li>understanding audio and video <li>audio and videocontainers <li>audio and video codecs <lh><br/>overview of the HTML5 APIs</lh> <li>overview of the HTML5 APIs <li>common building blocks <li>programming HTML5 <lh><br/>html5 Canvas and SVG</lh> <li>overview <li>canvas vs. SVG <li>canvas coordinates <li>context <li>accessibility <li>pixel data <li>lab: Using the Canvas APIs <li>canvas basics <li>drawing operations <li>canvas transforms <lh><br/>html5 Communication APIs</lh> <li>cross-document messaging <li>overview <li>understanding the origin concept <li>lab: Using the PostMessage API <li>xmlhttprequest Level 2 <li>overview <li>cross-document XHR <li>progress events

7 <li>lab: Using XHR Level 2 <li>server-sent Events <li>overview <lh><br/>html5 Web Sockets</lh> <li>real-time Communication overview <li>web Sockets overview <li>web Sockets API <li>web Sockets Protocol <lh><br/>html5 Web Workers</lh> <li>web Workers overview <li>multi-core processor architecture <li>web Worker communication <lh><br/>html5 Geolocation</lh> <li>geolocation overview <li>user Privacy <li>location information sources <lh><br/>html5 Storage</lh> <li>overview <li>local Storage <li>session Storage <li>web SQL Database <lh><br/>history</lh> <li>from LiveScript to JavaScript <li>java vs JavaScript <li>object-oriented Programming (OOP) <li>other programming languages <lh><br/>what does JavaScript do?</lh> <li>rollovers <li>form Validation <li>mathematical Calculations <li>change CSS <li>working with HTML5 Canvas Tags

8 <lh><br/>understanding JavaScript</lh> <li>server-side vs. Client Side <li>basics of OOP <li>javascript Behaviour <li>dot Syntax <li>understanding Properties & Methods <li>document Object Model <li>unobtrusive Scripting <lh><br/>the Language</lh> <li>event Handlers <li>values & Variables <li>assignments <li>operators <li>comparisons <lh><br/>javascript Fundamentals</lh> <li>writing text <li>working with functions <li>internal, Head & External JS <li>commenting in JS <li>alert Windows <li>confirming user choice <li>if/else statements <li>prompting the User <li>redirects through a link <li>javascript enhanced links <li>working with Referrer pages <lh><br/>building a Web App</lh> <li>designing a Bingo Card <li>looping & Do/While Loops <li>passing values to functions <li>object Detection <li>working with Arrays <li>updating Arrays <li>using the random() method <li>working with functions that return values <li>multi-level Conditionals <li>error-handling <lh><br/>working with Images</lh>

9 <li>creating a Rollover <li>creating more effective rollovers <li>understanding the DOM <li>building Objects in OOP <lh><br/>form Handling</lh> <li>select & Go Navigation <li>accessibility & JavaScript <li>changing Menus Dynamically <li>making fields required <lh><br/>making your pages dynamic</lh> <li>placing the current date <li>working with a dynamic timer <li>updating the seconds dynamically <lh><br/>jquery Introduction</lh> <li>introduction to JQuery <li>downloading and implementing the latest version ofjquery <li>enabling JQuery <li>using the basic features <lh><br/>identifying page content</lh> <li>css selectors with JQuery <li>filtering content <li>applying attribute filters <li>traversing the DOM <li>statement chaining, <lh><br/>editing page content</lh> <li>creating and editing content viajquery <li>modifying html attributes <li>working directly with CSS <lh><br/>creating JQuery interaction</lh> <li>understanding event handlers <li>binding JQuery event handlers <li>event helper methods <li>jquery event objects

10 <lh><br/>jquery Animation and effects</lh> <li>hiding and showing content <li>fading content <li>moving content <li>building custom animations <lh><br/>the jquery UI plug-in</lh> <li>downloading/installing the JQuery UI <li>working with JQuery widgets <li>adding JQuery effects <li>creating custom UI themes <lh><br/>css Introduction</lh> <li>html Structure and Content, CSS Presentation <li>advantages of CSS <li>creating and Using Style-Sheets <li>css Rules: The Basic Syntax <li>case, Whitespace and Comments in CSS <li>the CSS Standards <li>the Scope Of CSS <li>browser Support for CSS <lh><br/>css Boxes and CSS Selectors</lh> <li>the CSS Box Model <li>css and Logical HTML Structure <li>styling Boxes: Borders, Margins and Padding <li>the IE Box Model and Quirks Mode <li>ie Box Model Workarounds <li>using IE6 Standards Mode <li>specifying CSS Distances <li>problems with Absolute Units: pixels and point sizes <li>using Proportional Units: em, ex and percentages <li>formatting Box Edges Differently <li>shorthand Syntax for Sets of Edges <li>using Margins and Padding Effectively <li>collapsing Vertical Margins on Paragraphs <li>using Negative Margins on Boxes <li>background Images on CSS Boxes <li>grouping Elements with HTML Classes <li>styling Multiple Elements Similarly (Selector Grouping) <li>block Boxes and Inline Boxes <li>block Box Behaviour

11 <li>inline Box Behaviour <lh><br/>text Formatting in CSS</lh> <li>text Formatting <li>typefaces, Alternatives and Defaults <li>text Size a Serious Usability Issue <li>font Characteristics <li>setting and Using Space Within Text <li>formatting Blocks of Text <li>using Arbitrary Inline Tags: <lh><br/>more CSS Selectors and Selection</lh> <li>using HTML Element IDs in CSS <li>using CSS Descendant Selectors <li>descendant Selector Examples <li>child, Sibling and Pseudo-Class Selectors <li>why You Need To Know Them <li>browser Support and CSS Hacks <li>distinguishing and Setting Link States <li>link, Visited, Hover, Active, Focus <li>modularising CSS Style-Sheets <li>simpler Management, Less Effort, More Control <li>embedded CSS Styles in HTML Documents <li>how and When to Use Them (Rarely). <li>distinguishing Print, Screen and other Output Formats <li>special Issues in CSS for Print <lh><br/>css Positioning</lh> <li>choosing the Right CSS <li>technique for Positioning Blocks <li>the Position Property, Floats, Margins (inc. Negative and Auto), etc <li>static Positioning and Normal Flow <li>absolute Positioning Outside Normal Flow <li>relative Positioning Not What You May Expect! <li>fixed Positioning Outside Normal Flow <li>relative Absolute Positioning <li>absolutely Positioned Blocks in Relatively Positioned Containers <li>floating Boxes with the CSS float property <li>page Layout Using Absolutely Positioned Blocks <lh><br/>more on CSS Page Layout</lh> <li>alternative Methods of CSS Positioning

12 <li>centring Blocks <li>styling Lists <li>redefining the Behaviour of Inline and Block Elements <li>hiding and Revealing Blocks <li>table Formatting in CSS <li>styling Table Cell Borders <li>page Layout with Table Display Properties <lh><br/>cascade, Precedence, Specificity and Inheritance in CSS</lh> <li>taking Control: Ensuring that CSS Rules Interact in the Way You Want <li>combining Styles: Different Types, Origins, Importance, Specificity and Order <li>examples: Combining Rules <li>cascading and Cascade Order <li>resolving Style Conflicts By Origin <li>resolving Style Conflicts By Importance <li>resolving Conflict By Selector Specificity <li>resolving Conflict By Order <li>non-css Presentational Hints <li>property Inheritance <lh><br/>css Layers and Translucency</lh> <li>different Forms of Layered Presentation in CSS <li>layering with the z-index Property <li>different Methods for Creating Translucency Effects <li>the CSS3 opacity Property <li>opacity Example <li>fixed Attachment Backgrounds in Layers <li>background-attachment Example <li>transparency and Semi-transparency with Alpha-Blended PNG <li>png Translucency Example and Sample Code <li>pseudo-transparency with JPG Positioned Backgrounds <li>jpg Pseudo Transparency Example <lh><br/>using CSS in the Real World</lh> <li>deploying CSS <li>css Formatting Versus HTML Formatting <li>achieving a Balance <li>standard Tags and Semantic Markup <li>usability <li>readable Pages <li>screen Size and Fluid Design <li>text Size, Including Internet Explorer Quirks <li>table Layout and CSS Positioning

13 <li>table Layout and CSS Positioning as Alternatives <li>combining Table Layout with CSS Positioning <li>css Browser Support <li>testing Websites <li>using Test Suites and Multiple Browsers <li>cross-platform Testing in Single-platform Environments <li>css Help and Advice <li>authorative Sources versus Web Myths and Gossip <li>free Lifetime Support <lh><br/>css3 on mobile devices</lh> <li>css3 media queries <li>different Sizes <li>orientation Change <lh><br/>fonts & Text</lh> <li>using Custom Fonts property <li>importing fonts <li>web Font formats <li>buying web fonts <li>typekit, fontsquirrel <li>using google font api <li>text shadows <li>font sizing with REM <li>enhanced Text Gradients <lh><br/>enhancing your boxes</lh> <li>box rounding <li>adding a Shadow to objects <li>opacity & Transparency <li>colouring with RGB and Alpha <li>adding a CSS3 Gradient <li>rotating objects <li>applying animations & transitions <lh><br/>backward compatibility tools</lh> <li>css3pie, <li>css3please & Generators <li>transformie, Modernizr <li>selectivizr

14 <lh><br/>useful CSS Tips</lh> <li>usage of CSS Sprites <li>pseudo Selectors <li>css minify <li>cheat Sheet for CSS3 <lh><br/>enhanced CSS3 Effects</lh> <li>speech bubbles using CSS3 <li>css3 Ribbons <li>using the CSS3 pseudo <li>pseudo background images <li>multi-column layouts CSS3 <li>css3 Patterns <li>css3 Gradient Effect <li>applying CSS3 to forms <li>resize Background Image <li>cool CSS3 Hover Effects <lh><br/>menus</lh> <li>hoverbox Image Gallery <li>advanced CSS Menu <li>sliding Photograph Gallery <li>css3 Navigation & Menus <li>css3 toggle-button without JavaScript <li>create ios back & forward buttons with CSS3 <li>3d in CSS3 <li>css3 3D Carousel <li>css3 3D Gradient Box <lh><br/>css3 with jquery</lh> <li>building a Clock <li>ajax tabs with jquery and CSS3