Course: Web development with HTML5 and CSS3

$289.00

$349.69 incl. vat

duration: 36 hours |

Language: English (US) |

access duration: 180 days |

Details

In this HTML5 and CSS3 training course you will learn how to develop using HTML5 and CSS3. In this course you will learn the basics and the advanced features.

Among subjects that covered are layout of HTML5 and CSS3, forms, API's and Media, images, mobile use and advanced funtions of HTML and CSS3.

Result

After completing this course you are familiar with the basics and advanced features in HTML5 and CSS3 and you can apply new techniques.

Prerequisites

There is no specific knowledge required.

Target audience

Web Developer

Content

Web development with HTML5 and CSS3

36 hours

Introduction to HTML5

start the course
select an editor that can edit an HTML5 Document
configure a development environment for HTML5
apply tools to validate an HTML5 Document
describe the markup language used to create an HTML5 document
describe how tags are used to create an HTML5 document
apply the !DOCTYPE declaration to an HTML5 document
define the structure of an HTML5 document
create the basic head section in an HTML5 document
create the basic body section in an HTML5 document
create the basic document structure for an HTML5 document
apply meta tags to an HTML5 document
use the new meta tags introduced in HTML5
create comments in HTML5
describe how the paragraph tag is used in HTML5
create paragraph and line break tags in an HTML5 document
create heading tags in an HTML5 document
describe best coding practices for HTML5
describe how to space and format code in an HTML5 document
describe how to create a hyperlink in HTML5
use a hyperlink in an HTML5 document
create an in-site hyperlink in an HTML5 document
create an e-mail link in an HTML5 document
specify when to use an Absolute versus a Relative link
apply font styling to an HTML5 document
use special characters in an HTML5 document
understand how HTML5 is used to generate a web page

HTML5 Layout

start the course
describe when to use block level and inline elements in HTML5
describe how to use the div tag in an HTML5 document
describe how to position objects in an HTML5 document
describe how to use logical divisions and spans in HTML5
create the basic page layout structure for an HTML5 document
specify the format for a basic page layout in an HTML5 document
describe how lists can be created in HTML5
create a list in an HTML5 document
specify how to configure a list in HTML5
describe how tables can be created in HTML5
create a table in an HTML5 document
specify how to configure tables in HTML5
apply color to an HTML5 document
create clickable hotspots on an image in HTML5
add images to an HTML5 document
configure the size of an image in HTML5
configure the way text will wrap around images in HTML5
describe how the article and section tags are used in HTML5
describe the difference between semantic and structural elements in HTML5
specify how the address and cite tags have changed in HTML5
describe how the details and summary tags are used in HTML5
describe how the header and footer tags are used in HTML5
describe how the figure and figcaption tags are used in HTML5
specify how, and when, the nav tag should be used in HTML5
add video to an HTML5 document
add Flash to an HTML5 document
create a border using CCS3 in an HTML5 document
create a rounded border using CCS3 in an HTML5 document
use the common and useful, page and data formatting elements to give your HTML5 page an intuitive layout

HTML5 and CSS3

start the course
describe the relation that CSS3 has with HTML5
recognize and describe the structure of the CSS3 syntax for HTML5
use inline CSS3 styles in an HTML5 document
add an attachment link to include a file in an HTML5 document
create a CSS3 style sheet file for HTML5
apply CSS3 syntax to add style to an HTML5 document
use inline CSS3 in an HTML5 document
add an external CSS3 style sheet to an HTML5 document
describe why using an external CSS3 style sheet is better than doing it within an HTML5 document
perform modifications to HTML5 tags using CSS3
apply formatting to an HTML5 table in order to alternate the row colors using CSS3
describe the block elements used in HTML5
create styled HTML5 lists using CSS3
use CSS3 to manipulate DIVs in an HTML5 document
created styled HTML5 list bullets using CSS3
apply CSS3 to small sections of the HTML5 web page by using SPAN tags
describe how ID and class attributes added to HTML5 tags can allow for fine grain CSS3 styling
create CSS styles that will apply to only an element with a given ID in an HTML5 document
create CSS styles that will apply to all elements with the given class in an HTML5 document
add style to a hyperlink in an HTML5 document using CSS3
add CSS3 style to a hyperlink's hover and visited states in a HTML5 document
use CSS3 to change the color of visited links in an HTML5 document
describe how to apply a style only to the child elements, also referred to as nested elements, of an element in an HTML5 document
describe how to change, add, or remove a style to a single element that already has a CSS3 style applied in an HTML5 document
use CSS3 to hide or display HTML5 objects
apply CSS styles to HTML pages

HTML5 Layout with CSS3

start the course
apply a direction to text in an HTML5 document
apply a rotation to text in an HTML5 document
apply a rotation to divs in an HTML5 document
add an alignment to text in an HTML5 document
specify the position for text to appear in an HTML5 document
specify the position for an object to appear in an HTML5 document
create overlapping divs to provide visual layering in an HTML5 document
describe how and when relative positioning should be used in an HTML5 document
apply overlapping text to an image in an HTML5 document
create a navigation bar by nesting divs in HTML5
describe how to use divs and CSS3 to add basic animation to an HTML5 document
create a clickable div that will act like an HTML5 button
apply the necessary CSS styles in order to place divs side by side in an HTML5 document
add the CSS necessary to center a div layout in an HTML5 document
use CSS3 to modify a hyperlink's appearance in an HTML5 document
apply vertical alignment to the content of an HTML5 div
describe how to create a basic navigation menu using HTML5 divs
describe how to use CSS3 to format a navigation menu in an HTML5 document
apply a background image to an HTML5 div menu
use CSS3 to change the mouse cursor when it is over an element in an HTML5 document
describe how to apply an animation to a div image on a mouse hover in HTML5
create a navigation menu using the HTML5 nav tag
create a flyout menu using CSS3 and HTML5 lists
apply a gradient fill to an HTML5 list
use the common CSS3 formatting strategies to provide an ordered and visually pleasing layout to your HTML5 page

HTML5 Forms

start the course
describe the purpose of the form tag in an HTML5 document
add the form section to an HTML5 document
describe form field attributes that can be used in HTML5
specify how the value and name form attributes are used in HTML5
create a password and textarea form field for data input with HTML5
create a radio button in HTML5
create a checkbox in HTML5
create a drop-down list in HTML5
use the color chooser attribute in HTML5
use the number field in HTML5
create a color input in HTML5
use the color picker in HTML5
add a number chooser field to an HTML5 document
add a range slider to an HTML5 document
add a numerical range to a range slider with HTML5
use the range slider in HTML5
add a calendar to an HTML5 document
configure a date input field in HTML5
describe how to submit HTML5 form data
describe how to submit a file to a server using HTML5
describe when to use the HTML5 novalidate form attribute
describe the use of placeholders in HTML5 forms
choose when to use required and placeholder attributes in an HTML5 document
use the autocomplete form attribute in HTML5
choose when a datalist would be the right container for an HTML5 document
add a datalist to an HTML5 form
configure email form validation in HTML5
describe the basics of regular expressions and their use in HTML5
apply regular expressions to form input fields in HTML5
specify which field on a form will get the initial focus in an HTML5 document
describe how the form input tag works in an HTML5 document
describe how the action attribute can affect how a web page will act when it is submitted in HTML5
describe how the target attribute can be used in HTML5
describe how, and when, to set the min and max attributes for an input element in HTML5
test your understanding of the various form field attributes

HTML5 APIs and Media

start the course
describe how to drag and drop files using the File API in HTML5
use geolocation data in an HTML5 document
select elements using querySelector from within an HTML5 document
select a group of elements using querySelectorAll from within an HTML5 document
use the query selector tools to find the first instance of an element within an HTML5 document
match multiple elements using selectors from within an HTML5 document
describe how to use session storage within an HTML5 document
create and use a local storage object within HTML5
select files using the File API in HTML5
describe the use and purpose of XML in HTML5
describe the basic features of AJAX in an HTML5 document
describe how to use the XMLHttpRequest API in HTML5
apply XMLHttpRequest API calls to load a server file into an HTML5 web page
use the XMLHttpRequest API to swap an HTML page in an HTML5 document
describe the browser best practices when using HTML5
describe how to check for browser support for HTML5
troubleshoot issues with HTML5 documents
describe how to play audio files in HTML5
describe how to play video files in HTML5
configure the source attribute for audio and video files in HTML5
describe how to use the Audio and Video APIs in HTML5
describe how to obtain time-related information in HTML5
use media events in an HTML5 document
configure preloading, looping, and mute settings on audio and video media in HTML5
describe how dynamic sourcing of audio and video content works in HTML5
describe how audio and video MIME types are set in HTML5
describe how information about the playback of media can be retrieved in HTML5
develop a robust, rich, and dynamic web page using HTML5 APIs and media

HTML5 and Advanced CSS3

start the course
apply a transform to rotate an object in an HTML5 document
distort an object using the transform matrix in an HTML5 document
describe how to apply a 3D transformation to an object in an HTML5 document
use a transform to position an object in HTML5
add scaling to an object using a transform in HTML5
apply a transform to skew an object in HTML5
use a transform to add a perspective to an object in an HTML5 document
describe how to use CSS3 to create an animation in HTML5
create an animated picture using CSS3 in an HTML5 document
describe how CSS3 animation keyframes are used in HTML5
cycle the color of a div using CSS3 animation in an HTML5 document
rotate objects using CSS3 animation in an HTML5 document
describe some of the advanced CSS3 animation techniques available in HTML5
use CSS3 to change a web site's background color in an HTML5 document
use CSS3 to change a web site's background image in an HTML5 document
describe how to use CSS3 styles to modify background images in an HTML5 document
apply CSS3 styles to create columns and flow text in an HTML5 document
describe how and when to use image alignment in HTML5
describe CSS3 pseudo selectors in HTML5
apply CSS3 pseudo selectors to an HTML5 document
use CSS3 drop shadows in an HTML5 document
apply CSS3 linear gradients in an HTML5 document
create radial gradients in CSS3 in an HTML5 document
create gradient text using CSS3 in an HTML5 document
add transparency to objects in HTML5 using CSS3
use CSS3 to change the range slider style in an HTML5 document
draw triangles using CSS3 in HTML5
demonstrate how to programmatically apply CSS3 transitions and animations, 2D and 3D transforms

HTML5 and JavaScript

start the course
describe what JavaScript is and how it is used in the browser to manipulate HTML5
navigate to a URL with a button
pop up a window using JavaScript
describe JavaScript alert, confirm, and prompt pop-ups
describe debugging techniques
describe JavaScript punctuation
describe external vs. internal JavaScript
include JavaScript code in an HTML5 document
use JavaScript in HTML tags
describe how to format JavaScript code for easy maintenance and readability in HTML5
add, use, and work with variables in JavaScript and HTML5
use math operators in JavaScript
use conditional statements in HTML5
use JavaScript for and while loops
control loops using break and continue
use labels with JavaScript statements
use substrings with JavaScript
describe JavaScript functions
pass values to JavaScript functions
pass HTML object information to JavaScript functions
Reading the content of HTML objects
Change the content of HTML objects
Access HTML classes
Change the class of HTML objects
Modify CSS3 styles using JavaScript
Access and change HTML tags
Create an Interactive and responsive HTML Page

HTML5 Graphics and Canvas

start the course
describe Scalable Vector Graphics (SVG) and its use in creating high quality images in HTML5
add an SVG drawing to an HTML5 page that draws a line
use SVG to draw a rectangle in an HTML5 document
describe how SVG can be used to make a rectangle with rounded corners in an HTML5 document
use SVG to draw circles and ellipses in an HTML5 document
use SVG to add polyline drawings in an HTML5 document
use SVG to add text to an HTML5 document
describe how to rotate SVG objects in HTML5
work with SVG to place text on a path in an HTML5 document
add transparency to an SVG object in an HTML5 document
describe the HTML5 Canvas and why it would be used
use the canvas in an HTML5 document
apply size constraints to a canvas to have it fit the size of the screen in an HTML5 document
describe how to move the canvas in an HTML5 document
describe how to rotate the canvas in an HTML5 document
use HTML5 to draw lines on the canvas
use HTML5 to render text on the canvas
draw rectangles on the canvas using HTML5
use HTML5 to draw arcs and curves on the canvas
describe how circles can be drawn to the canvas using HTML5
perform canvas operations to load and display a bitmap graphic in an HTML5 document
set the color of the canvas using HTML5
use HTML5 to place an image on the canvas
describe how gradients can be created on a canvas in an HTML5 document
use HTML5 to clear the canvas
work with the HTML5 canvas to track objects
describe how to track mouse coordinates in an HTML5 canvas
describe how to create basic animations using the HTML5 canvas
perform object rotation in HTML5 canvas
how to add graphic on an HTML page

Advanced HTML5

start the course
describe the various ways users can edit form elements in HTML5
describe how content from editable form fields can be manipulated and used in HTML5
use CSS3 and Sprites to animate a menu in an HTML5 document
apply box-sizing properties to an element to fit boxes in an HTML5 document
create a dropdown menu using CSS3 in an HTML5 document
describe how to detect the browser type in HTML5
describe how to detect HTML5 features that a browser supports
describe how to check a browser for video support in an HTML5 document
use Video Format Support detection in HTML5
use HTML5 to detect canvas support in a browser
describe how to detect canvas text support in HTML5
use HTML5 features to design web sites that are mobile friendly
describe how to detect a browser's screen resolution in HTML5
describe how to detect and change screen orientation for applicable devices in HTML5
use the date and time tags in an HTML5 document
apply highlighting to text using the HTML5 mark tag
use the keygen tag to generate a key in an HTML5 document
use the wbr tag to control when a line break will occur if a line break is needed in an HTML5 document
describe how to use the dialog tag in an HTML5 document
describe how web storage objects are created and used in HTML5
describe how to check for HTML5 File API support
use the File API to read a file in HTML5
use FileReader to display thumbnail images in an HTML5 document
implement file and storage APIs

Advanced Features of JavaScript, CSS3 and HTML5

start the course
use JavaScript to create an HTML5 document that will display the time
create a Countdown timer in JavaScript that will display in an HTML5 document
use JavaScript timers to delay an action from occurring in an HTML5 document
create a scrolling marquee on an HTML5 document
use confirm to get confirmation from a user before executing an action in HTML5
describe how user input can be captured from a prompt
describe how drag and drop can be used in an HTML5 document
access form data
validate form data
add HTML elements to a web page
modify form elements
use CSS3 to modify the form inputs of an HTML5 document
use CSS3 to add style to an HTML5 submit button
describe how to insert images into an HTML5 form field using CSS3
use CSS3 to change the style of an HTML5 form
describe event properties and why they are used in HTML5
describe the basics of the browser event model in HTML5
use an event object in an HTML5 document
create a second generation, or programmatically created, listener in HTML5
use the meter tag in an HTML5 document
use the progress tag in an HTML5 document
apply CSS3 styles to a progress bar to customize it in an HTML5 document

Course options

We offer several optional training products to enhance your learning experience. If you are planning to use our training course in preperation for an official exam then whe highly recommend using these optional training products to ensure an optimal learning experience. Sometimes there is only a practice exam or/and practice lab available.

Optional practice exam (trial exam)

To supplement this training course you may add a special practice exam. This practice exam comprises a number of trial exams which are very similar to the real exam, both in terms of form and content. This is the ultimate way to test whether you are ready for the exam.

Optional practice lab

To supplement this training course you may add a special practice lab. You perform the tasks on real hardware and/or software applicable to your Lab. The labs are fully hosted in our cloud. The only thing you need to use our practice labs is a web browser. In the LiveLab environment you will find exercises which you can start immediately. The lab enviromentconsist of complete networks containing for example, clients, servers,etc. This is the ultimate way to gain extensive hands-on experience.

WHY_ICTTRAININGEN

Via ons opleidingsconcept bespaar je tot 80% op trainingen

Start met leren wanneer je wilt. Je bepaalt zelf het gewenste tempo

Spar met medecursisten en profileer je als autoriteit in je vakgebied.

Ontvang na succesvolle afronding van je cursus het officiële certificaat van deelname van Icttrainingen.nl

Krijg inzicht in uitgebreide voortgangsinformatie van jezelf of je medewerkers

Kennis opdoen met interactieve e-learning en uitgebreide praktijkopdrachten door gecertificeerde docenten

Orderproces

Once we have processed your order and payment, we will give you access to your courses. If you still have any questions about our ordering process, please refer to the button below.

What is included?

Certificate of participation	Yes
Monitor Progress	Yes
Award Winning E-learning	Yes
Mobile ready	Yes
Sharing knowledge	Unlimited access to our IT professionals community
Study advice	Our consultants are here for you to advice about your study career and options
Study materials	Certified teachers with in depth knowledge about the subject.
Service	World's best service

Platform

Na bestelling van je training krijg je toegang tot ons innovatieve leerplatform. Hier vind je al je gekochte (of gevolgde) trainingen, kan je eventueel cursisten aanmaken en krijg je toegang tot uitgebreide voortgangsinformatie.

FAQ

Niet gevonden wat je zocht? Bekijk alle vragen of neem contact op.

Cursusnaam
Looptijd
Rentebedrag financiering
Totaal bedrag
Maandbedrag

Vendors

Professions