HTML5 & CSS3 Training Course
Learn HTML5 & CSS3 from HTML5 & CSS3 web designers in London and create practical projects for your portfolio
Location: Kings Cross, London
Upcoming Class: 28 May 2013
|28 May 2013||Tue, Wed, Thu, Fri||10:00 - 17:00||4||£850.00||Reserve|
|02 Jun 2013||Sun||10:00 - 17:00||4||£850.00||Reserve|
|22 Jul 2013||Mon, Tue, Wed, Thu||10:00 - 17:00||4||£850.00||Reserve|
|26 Aug 2013||Mon, Tue, Wed, Thu||10:00 - 17:00||4||£850.00||Reserve|
|28 Oct 2013||Mon, Tue, Wed, Thu||10:00 - 17:00||4||£850.00||Reserve|
|16 Dec 2013||Mon, Tue, Wed, Thu||10:00 - 17:00||4||£850.00||Reserve|
HTML5 & CSS3 course overviewThis HTML5 and CSS3 course explains how to use HTML5 and CSS3 to create interactive websites. After completing this training course you would be able to use HTML5 and CSS3 on your web pages. This course covers a range of topics such as video and audio support, HTML5 APIs, Canvas and SVG, HTML5 Forms, HTML5 Storage and lots more.
Few practical HTML5 and CSS3 based projects at the end of the course will ensure that you can apply HTML5 on your web projects.
This short HTML5 and CSS3 course is hands-on, instructor-led and classroom based. This training can be taken as a part-time evening course or even on the weekends. A list of all upcoming public HTML5 and CSS3 training course is given on training dragon website. Each course is restricted to a maximum of ten delegates to ensure an excellent training experience.
Prerequisites for HTML5 & CSS3 course
- A good knowledge of HTML and CSS is required. You can get a good knowledge of HTML and CSS by taking our web design course.
What will I get?
- Training from professional HTML5 and CSS3 web designers:
Training Dragon consultants have been implementing professional HTML5 & CSS3 solutions across a range of web sites for many years. Those consultants write and teach our HTML5 and CSS3 training courses, so their experience directly informs course content.
- Real-time Practice and Projects:
Our web design courses are designed to get you started in web design. We work on industry related projects in this HTML5 and CSS3 course. If you have a project or an idea that you wanted to turn into website then present that idea during the course and our trainers will help you to work on your own website.
- Course Material:
HTML5 and CSS3 electronic notes are included in this course.
- Course Completion Certificate:
After completing this training your will be receive an HTML5 and CSS3 course completion certificate.
- Support and Careers Advice:
After the course if you have any problems or questions regarding HTML5 and CSS3 do not hesitate to contact us. Training Dragon’s trainers are expert in their fields and if you need any help with you career choice, please speak to one of our trainers.
HTML5 & CSS3 Course Contents
Introduction to HTML5
- What is HTML5?
- History of HTML5
- Current HTML5 support
- W3C, WHATWG and HTMLWG
- Ensuring browser support
- Setting your own markup standards
- The Document Object Model (DOM)
- When can I use HTML5?
- HTML5 Showcase
- Using HTML5 on mobile devices
- HTML5 or Flash
- Developer Tools
- Detecting HTML5 features
- HTML5 vs. HTML4
- API overview
- Reviewing Features and Benefits
- HTML5 page structure
- HTML5 DOCTYPE
- Character set
- Script tag, and style sheet link
- HTML5 markup
- New structural tags
- New content tags
- New application-focused tags
- Deprecated elements
- Semantic elements
- HTML5 and CSS
- Marking Up Dates and Times With HTML5
- Marking Up Captions for Figures in HTML5
- Understanding the HTML 5 document header
- Structuring your document with <header>, <footer>, <nav>, <figure> and other new structure tags
- Tagging microdata
HTML5 FORMS 2.0
- HTML5 form elements
- Building and using HTML5 forms
- New elements,
- New attributes
- New input types
- Setting form autofocus
- Using placeholder data
- Marking required fields
- Working with number inputs
- Using date pickers
- Setting autofocus to a field
- Using the Placeholder attribute
- Capturing email addresses
- Capturing url addresses
- Capturing a telephone number
- Capturing numbers (spinner)
- Capturing numbers (slider)
- Using the Date, Month, Week, Time inputs
- Defining a Search Box
- Choosing a Color
- Using a DataList
- Creating Selection Groups
- Defining Command Buttons
- Setting field input to be required
HTML5 Selectors API
HTML5 Geolocation API
- Geolocation overview
- Third party API: Google Map API
HTML5 Audio and Video
- The audio element
- The video element
- Understanding audio and video
- Audio and video containers
- Audio and video codec’s
- Backwards Compatibility
- Using the HTML5 media tags
- Creating custom controls
- Accessible media
- Intro to canvas
- Introducing the canvas element & Creating Fallback Content
- The canvas coordinate system and sizing the canvas
- Drawing with Canvas
- Drawing with canvas, including filling, stroking and erasing rectangles
- Drawing lines and other paths in canvas, including circles
- Drawing text with canvas
- Shadows and other Advanced canvas
- Translate, rotate, scale
HTML5 Storage API
- Storage options
- Local Storage
- Session Storage
- Storage UML, properties and methods
- Using JSON methods to store complex data
- Difference between Local Storage and Session Storage
- How to use SVG
- Drawing primitives
- Using SMIL to animate SVG
- Creating complex SVG graphics
- SVG accessibility
Drag and Drop API
- Drag and Drop events
- Adding custom drag icons
- Understanding and working with the HTML5 DOM
Introducing to CSS3
- What is CSS3?
- The current status of CSS3
- An overview of CSS3 capabilities
- Can you use CSS3 now?
- Detecting support for CSS3
- Understanding vendor prefixes
- Overview of the CSS3 specification
- CSS Profiles
- The document tree
- New CSS3 selectors
- An overview of child and sibling selectors
- Using child and sibling selectors
- An overview of attribute selectors
- Using attribute selectors
- Pseudo-class UI selectors
- Negation pseudo-class selectors
- Target pseudo-class selectors
- Structural selectors
- Nth-child selector syntax
- First, last, and only structural selectors
- Using structural selectors to write more efficient code
Colours and Opacity in CSS3
- Color formats in CSS3
- Transparency in CSS3
- Setting opacity
- RGBA and HSL values and alpha channel opacity
- CSS3 gradients
- Creating linear gradients
- Creating radial gradients
- Working with web fonts
- How can I use any font in CSS3?
- @font-face syntax
- Writing @font-face declarations
- Using web fonts
- Adding shadows to text
- Creating multi-column text
CSS3 and Page Layout
- An overview of the flexible box model
- Controlling box orientation
- Setting element flexibility
- Distributing boxes
- Controlling box alignment
- Working with box-sizing
Borders in CSS3
- Using border-radius
- Custom rounded corners
- Drop shadows
- Box shadows
- Gradient borders
- Using images for borders
- Using outlines
The CSS3 Box Model
- Introduction to CSS3 Box Model
- Difference between CSS3 and CSS2 box models
Backgrounds in CSS3
- Resizing backgrounds
- Controlling background size
- Creating multiple background images on one element
- Using background-origin
- Clipping background content
CSS3 Transitions and Transforms
- An overview of CSS3 2D transforms
- Using 2D transforms
- Setting transform origins
- An overview of CSS3 transitions
- Animating CSS properties
- Using easing in animations
- An overview of 3D transforms
- Browser support
- Checking support
- Providing alternatives
- Enriching the experience layer
- Understanding media queries
- Strategies for targeting multiple devices
- Writing styles for target screen sizes
- Deploying styles through media queries
Projects in HTML5 and CSS3
Project 1 – Build a complete website using HTML5 & CSS3:
Create a website using HTML5 and CSS3. In this project we will create a website from scratch – this will provide a good practice to go through the main stages involved in developing a modern website using HTML5 and CSS3. Following are the stages involved in this project.
- WireFrame: Create a wireframe for the website template
- Design: Use a graphic design created in our graphic design course using Photoshop and Illustrator
- HTML5 header: wraps your page header;
- HTML5 footer: wraps your page footer;
- HTML5 section: groups content into sections (e.g. main area, sidebar etc);
- HTML5 nav: contains your navigation menu;
- CSS3: Create styling using CSS3
- jQuery: Use jQuery to add a small animation to the website.
Project 2 – Build a simple Geolocation application:
Create an application that dynamically detects user's current position and displays it on a map using Google Map API.
Project 3 – Build a Canvas Demo:
Create simple Canvas demo to draw different shapes.
Project 3.1 – Build a Canvas Game (optional):
Project 4 – Build a 3D cubeUsing amazing new properties of CSS3 (transforms, animations) we will build a simple 3D animation.
HTML5 & CSS3 Course Reviews
I found the course very informative,exciting and enjoyable, cant wait to use my new found skills in future projects.,Emiliano is a complete joy, very knowledgable and skilled and makes learning fun. I would not hestitate to recommend this course to former/furture colleague.,The knowledge gain will help be turn plain bland website that I have done in the pass in exciting, engaging sites.
Very good course in that it covers all the right ground to build upon. ,Trainer certainly knows the subject very well and can draw from experiences and help with opinions on the future of web trends. Very easy to work with, helps and encourages. Nothing is too much trouble and I like the way he keeps us on our toes.,Our teams production is moving from AS to HTML5 and this will help the our organisation keep up with current trends and meet users needs, so will certainly help my career.
Very pleased, time well spent. Never boring, fast paced & challenging, well presented, thoroughly enjoyable!,Top notch. Very comprehensive knowledge, nice presentation with a sense of humour, as above: never boring.,I'll put it to immediate use to improve our company website.
I am really impressed with the content given along this course. After the completion of this course I am more aware of the capabilities of HTML5 helping to enhance my knowledge and expertise as a front web developer.,The trainer is very professional. He explains very clear the content making easy the understanding and acknowledge of every section. ,My knowledge in HTML and CSS have been considerably improved. I believe now that I have a wider perspective to cope with the implementation of front-ends.
Really enjoyed the course. Covered a lot of areas in a limited amount of time but did so in an efficient way. CSS section was extremely interesting and certainly triggered lots of plans and ideas for me! I came on the course to get an understanding of the capabilities of the new standards and I would say that this aim has been achieved.,Very informative, certainly knows his stuff! Was very patient and approachable when I was having trouble with certain areas (java script) All around nice chap!,As a designer, it is important that I have full knowledge of the capabilities of programming languages. With this course I will be able to design websites and applications to the full extent of the web, as well as offer my hand when it comes to the coding elements too.
Very good - covered a lot of content, brief on each bit of content but enough to go away and explore the relevant bits further.,Good-obviously very knowledgable, very clear and patient!,It will allow me to improve the features and styling of the content we create - better products = better reputation (!= career progression!)
Very impressed-the course was well organised and the level it was pitched at was about right. There was a good mix of slides, practical sessions and discussions. Although the course was fast paced and covered a lot of material I feel that I have taken it all in and have reference information to take away and refer to later. ,Emiliano was very knowledgeable and helpful during the training. He was patient when explaining difficult concepts and even though there was a range of experience amongst delegates he managed this well.,I have just joined a new team in the office and attended the course to get me up to speed with the work they are doing. I think that many of the aspects taught in the course with benefit me in my career.
Very informative, a lot of good content. Well explained. Friendly. Highly educational.,Brilliant, clearly well experienced, answered all questions with good clear explanation(s).,Hugely, it filled a lot of gaps I wanted to fill for a long time. It was great to have someone to ask specifically rather than looking online or watching hours of video
The course was very thorough and the training materials were easy to understand and follow. It was extremely beneficial for me. ,The trainer was excellent, extremely helpful and obviously very passionate and knowledgable about the subject matter. ,It will give me a better understanding of the possibilities of the new tags and the challenges that my development team are up against.
My impression is very good as I could see all the aspects of HTML5 and CSS3 as well as plugins and additional elements. ,The trainer is an experienced web developer and he handles perfectly the matter.,It will help me massively as I can face the new web design requirements
You can find reviews from previous delegates on Training Dragon reviews & feedback section here.