Publication date : 03/21/2025
Course : HTML5 & CSS3, mastering Web page creation
Practical course - 3d
- 21h00 - Ref. HTM
|
Download in PDF format
Share this course by email
 | Designing and developing websites in HTML5 and CSS3 |
| Defining your site's content with HTML5 |
| Improve the look of your site with CSS3 |
| Make sure your site looks good on different screen sizes thanks to responsive design |
Intended audience
Developers, web project managers and anyone creating and maintaining websites using a CMS (Content Management System).
Prerequisites
Basic knowledge of HTML and CSS.
Practical details
Hands-on work
Discussions, experience sharing, demonstrations, tutorials and case studies.
Teaching methods
Active pedagogy based on examples, demonstrations, experience sharing, case studies and assessment of learning throughout the course.
Course schedule
1 Introduction
- The differences between HTML and CSS.
- The benefits of HTML5 and CSS3.
- Development tools.
Hands-on work
Implementation of our development tools.
2 Main HTML tags
- Structure of an HTML document : <doctype>, <html>, <head>, <body>.
- Notions of tags and attributes.
- Header tags: <title> and <meta>.
- CSS and Javascript links: <link> and <script>.
- Text tags: titles, paragraphs, quotations, and accentuation with <strong>, <em>, <mark>.
- The links : <a>.
- Images: <img>, <figure>, <figcaption>.
- The : <ul> and <ol>.
- Tables: <table>, <tr>, <th>, <td>.
- Generic tags <div> and <span>
- Semantic tags <nav>, <section>, <article>, <aside>, <header> and <footer>.
- Main recommendations for accessibility according to WCAG/RGAA references: alt attributes, scope...
Hands-on work
Tag testing for simple page creation (online CV, sales page, etc.).
3 Adding media
- Iframes.
- The videos.
- Audio.
- Ensure media accessibility (compatibility, subtitles, keyboard navigation, etc.).
Hands-on work
Testing these tags in the context of the previous practical work.
4 Main CSSP selectors and properties
- CSS rules.
- Selectors.
- Pseudo-classes.
- Define colors.
- Fund properties.
- Common properties: dimensions, borders, internal and external margins.
- Text properties: color, alignment, font, underlining, bold, size.
- The units px, em, rem, vw, vh.
- Various enhancements: shadows, gradients, multi-column text, rounded corners...
Hands-on work
Testing selectors and properties in the context of previous practical work.
5 CSS positioning
- Static positioning.
- The display property.
- Relative positioning.
- Absolute positioning.
- Fixed positioning.
- float and clear properties.
- Flexbox positioning.
- Grid layout positioning.
Hands-on work
Test different positioning.
Integration of a mini-model or schematic to transform it into a site with 2 columns, a logo, a menu and simple content. Use of the different positioning options seen here. Enhance appearance with other CSS properties seen previously.
6 Introduction to Responsive Design
- Flexible unit sizing.
- The notion of viewport.
- Mediaqueries.
- Alternative: the notion of CSS grid.
Hands-on work
Improvement of the previous practical exercise so that the site adapts to different screen sizes.returnchariot
Demonstration of the use of the bootstrap CSS grid.
7 Forms
- Forms and their fields: <form>, <input>, <textarea>, <select>, <option>.
- Labels and their links to fields.
- The benefits of HTML5 for forms: new fields, input types and attributes.
- Form verification with HTML, via types and attributes.
- Form sending parameters: GET and POST methods, action attribute.
- Main HTML security recommendations (OWASP, ANSSI): appropriate method, password type, attribute pattern...
- Main HTML recommendations for accessibility according to WCAG/RGAA references: screen readers, labels, aria attributes, grouping radio buttons and checkboxes in <fieldset> with <legend>...
Hands-on work
Improved the previous practical exercise by integrating a contact form.
8 CSS 3 animations
- Transformations (rotation, translation, change of scale, deformation).
- Transitions.
- Entertainment.
- Limit animations (prefers-reduced-motion).
Hands-on work
Testing transformations, transitions and animations.
9 ENI certification
- Examination procedures.
- Personalized advice.
Options
Certification : 250 € HT
The ENI certification "Creating and formatting web pages (HTML5 and CSS3)" is optional when registering for this course. Accessible online 24 hours a day, the assessment is timed (1h30) and includes practical cases and an MCQ/QCU. The practical cases, which reproduce a realistic work environment, are worth five times more than a MCQ/QCU question. The score out of 1000 determines the level reached: operational (500 to 700 points) or advanced (701 to 1000 points). Certification is obtained from 500 points and validates skills in web page creation and layout. Results are available immediately after the test, and the certificate is sent by e-mail. This certification is registered under number RS6245 in the Répertoire Spécifique of France Compétences.
Link to the France Compétences file: https://www.francecompetences.fr/recherche/rs/6245/
The certification option comes in the form of a voucher or invitation that will allow you to take the exam at the end of the training course.
Customer reviews
4,6 / 5
Customer reviews are based on end-of-course evaluations. The score is calculated from all evaluations within the past year. Only reviews with a textual comment are displayed.
YACINE B.
11/03/26
5 / 5
Exhaustif
ISABELLE P.
11/03/26
5 / 5
Très bonne pédagodie.Beaucoup d’interactions.Merci à Alexandre pour sa bienveillance, son écoute et sa patience
ISABELLE J.
11/03/26
5 / 5
très bien. explications claire, cas pratique interessant
PARTICIPANTS
Developers, web project managers and anyone creating and maintaining websites using a CMS (Content Management System).
PREREQUISITES
Basic knowledge of HTML and CSS.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
Developers, web project managers and anyone creating and maintaining websites using a CMS (Content Management System).
PREREQUISITES
Basic knowledge of HTML and CSS.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TEACHING AIDS AND TECHNICAL RESOURCES
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
Dates and locations
Select your location or opt for the remote class then choose your date.
Remote class
Last places available
Guaranteed date, in person or remotely
Guaranteed session