| Course Dates | Venue | Price | ||
|---|---|---|---|---|
| London Bridge | £429 + VAT save £70 | |||
| Online | £399 + VAT save £100 | |||
| London Bridge | £499 + VAT | |||
| Online | £499 + VAT | |||
| Online | £499 + VAT | |||
| London Bridge | £499 + VAT | |||
| Online | £499 + VAT | |||
| London Bridge | £499 + VAT | |||
| Online | £499 + VAT | |||
| London Bridge | £499 + VAT | |||
| Online | £499 + VAT | |||
| London Bridge | £499 + VAT |
Day one
Introduction
• Overview of the roles and responsibilities of:
• HTML
• CSS
• Javascript
• PHP/ASP
• From Wireframe to code - review of HTML Structural Elements
• To div or not to div
CSS Essentials
• Cascade and Inheritance
• Locations - where to hold the CSS and why:
• External, Internal, Inline, Imported
• CSS Syntax
• Core Selectors Theory and Practice:
• Tag (Type)
• Class
• ID
• Groups and Descendants
Working with Text
• Font size and family
• System Fonts and Server Fonts
• Text colour and background colour
• Alignment, line spacing and letter spacing
• Styling Links
Layout Fundamentals
• CSS Box Model
• Working with padding, margins and borders
• Longhand and shorthand syntax
• Changing the width of elements
• Understanding the difference between Block and Inline Levels
Image Essentials
• Understanding background images
• Creating tiled backgrounds
• Controlling background repeats
• Controlling background positions
• Using image headers
• Using fixed backgrounds
• Creating Custom Bullet Points
• Controlling Icons
• Working with Unicode
Questions and answers
Day two
Responsive Design
• Mobile first or Desktop first?
• Fixed units versus percentage values
• Applying responsive font size
• Responsive image and video techniques
• Using media queries to create breakpoints
• Using the browser mobile emulator for testing
Practical Layout Techniques
• Styling Data Tables and Forms
• Using Image Floats
• Creating columns with floats
• Understanding box-sizing
• Working with overflows
• Inserting content with :before and :after
• Fixing float issues with overflow hack
• Fixing float issues with clearfix hack
• Modern columns with Flexbox
• Layering content with absolute Positioning
Pseudo Selectors
• Hover effects
• Styling the first letter and first line
• Styling first, last, alternate and nth elements
• Styling by Attribute
• Styling direct descendants
• Using : not to omit elements
• Overview of various other pseudo elements
CSS Effects
• Rounded corners, Box Shadow and Text Shadow
• CSS Transitions
• CSS Animation
Questions and answers
"Explaining advanced html and css in the format of building a site. Its very innovative and helpful as i can go back and review."
