Goals
- Discover the potential of new HTML5 / CSS3 standards
- Learn how to build multiplatform sites: smartphone, tablet, ….
Program
History of HTML
Versions
The basics of an HTML document
The Doctype
The html, head, body tags
Comments
Structures of tags and attributes
Differences between inline and block tags
Headings (h1, h2, h3, etc.)
Paragraphs
Bold and italics
Hypertext links
Lists (ordered and unordered)
Tables
Workshop: Structuring an html page
Images and image format
Essential attributes (src, alt, etc.)
Integrate sounds and videos
Other media
Workshop: Integrate multiple media on an html page
Presentation and definition
Attach a css to an html page
Selectors (tag, id, class)
Pseudo-classes
Properties and values
Comments
Workshop: Attach a css sheet to an html page
Text properties (font, size, alignment)
Hexadecimal, rgb, rgba and named colors Background
properties
Inner and outer margins (margin, padding)
Borders
Dimensions
Lists
Workshop: Styling an existing page
Absolute or relative positioning
Floating and fixed
block Flexible blocks
Grids
Workshop: Positioning different blocks on a page
The form tags
The action and method attributes
The different form fields
The different forms of the input fields
The attributes for the form fields (placeholder, required, etc.)
Validate a form
Workshop: Create a registration form
Animations and transitions
Duration of animations
Transition functions
Keyframes
Workshop: Create an animation
Transformations
Text and block shadows
Rounded borders
Columns
The box-sizing property
Responsive Web Design (RWD): definition, components
Ergonomic and functional constraints
Viewport: concept, meta, values
Relative units (%, em) vs. absolute (px)
Screen sizes, optimal resolution
Portrait and landscape modes
Expression of sizes in percentage (%), em
Minimum and maximum sizes
Blocks, content / container approach
Box principle, layout with CSS3
Font size: set a basis for sizes, conversions em
Avoid overflows
Workshop: Multiple examples of flexible grids
Flexible images: background images, HTML5 adaptation
Flexible margins and spaces
Adapted videos
Support of CSS properties by older browsers
Workshop: Avoid overflow of images / videos
Adaptation of the display according to the resolution
Types of media
Choice of conditional rules: orientation, device-width
Internal and external media queries
Management of menus and sliders
Workshop: Creation of pure css responsive site with media-queries
Overview of existing
Bootstrap
960 grid frameworks
Optimization of graphic resources
Workshop: Building an adaptive site with Bootstrap
Passing of the certification (if foreseen in the financing).
Duration
5 days
Price
£ 2164
Audience
All
Prerequisites
Fundamentals of website creation, HTML and CSS
Reference
SIT653-F
Sessions
Contact us for more informations about session date