Course: Web development with HTML5 and CSS3

$389.00
$470.69 incl. vat
ADD_TO_CART_INFO_FOR_BUSINESS

duration: 36 hours |

Language: English (US) |

access duration: 180 days |

In Onbeperkt Leren

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

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

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 immediatelyThe 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.

frequently asked quesions

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.

Life Long Learning

Follow multiple courses? Read more about our Life Long Learning concept

read more

Contact us

Need training advise? Contact us!


contact