HTML5, CSS and Bootstrap 5 is a course in building web pages with HTML5 structure, self-validating forms, video and CSS effects such as gradients, transitions and animation, followed by the Bootstrap 5.3 grid, components and plugins. It suits beginners, UX/UI designers and developers, and you leave with a product showcase page that works on every screen size.
A good web page needs a sound structure, works well on both phones and computers, and looks appealing. HTML5 and CSS can do more on their own than many people expect, from forms that check their own input and videos with captions to gradients, shadows and motion. Combined with Bootstrap, a framework with a ready-made grid system and components, they let you build attractive pages that fit every screen size quickly.
This course shows learners how to use HTML5 for semantic page structure, forms and audio and video, and how to style pages with CSS colours, rounded corners, shadows, gradients, transforms, transitions and animation. It then brings these together with Bootstrap 5.3, covering the grid, utilities, components and JavaScript plugins, plus brand colours and dark mode, and finishes with a product showcase page that uses every technique. (2 days, 6 hours per day, 12 hours in total, Basic level.)
Course Details
This course is the 2026 edition of HTML 5 CSS 3 and Bootstrap 5. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs. Basic level. It keeps the original core of HTML5 markup, forms, audio and video, and CSS colours, rounded corners, shadows, gradients, transforms and transitions, followed by the Bootstrap grid, components and JavaScript
plugins. It moves to Bootstrap 5.3, which needs no jQuery, and adds built-in form validation, WebVTT video captions, keyframe animation, Bootstrap Icons, offcanvas, toasts and dark mode. The course focuses on HTML5 features and CSS effects before the framework, unlike Basic Responsive Web Design with Bootstrap 5, which focuses on layout and multi-page sites. Learners take home a lab guide and a product showcase page template.
Section 1: Lab: Getting Started with HTML5 and the Tools
Section 2: Lab: Semantic Page Structure
Section 3: Lab: HTML5 Forms
Section 4: Lab: Audio and Video in HTML5
Section 5: Lab: Selectors, Colours and Box Effects
Section 6: Lab: Transforms, Transitions and Animation
Section 7: Lab: Getting Started with Bootstrap 5.3 and the Grid
Section 8: Lab: Styling Content and Forms with Bootstrap
Section 9: Lab: Layout Components
Section 10: Lab: Bootstrap JavaScript Plugins
Section 11: Lab: Themes and Dark Mode
Section 12: Workshop: A Product Showcase Page
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
The Bootstrap 5 grid divides each row into 12 columns. You wrap rows in a container and add columns with col classes that combine a breakpoint and a span, so col-12 col-md-6 col-lg-4 means full width on phones, half from md and a third from lg. The breakpoints are sm, md, lg, xl and xxl, and because the grid is built on Flexbox, alignment and spacing are easy to control with utility classes.
HTML5 provides input types such as email, url, tel, number, range, color, date, time and search, so browsers can show suitable helpers like a date picker or a numeric keypad on phones. Attributes such as required, pattern, min, max and autocomplete let the browser validate values before the form is sent. In the course you then style the form and its validation messages with Bootstrap, though you should always validate on the server as well.
Use border-radius for rounded corners, box-shadow and text-shadow for shadows, and linear-gradient or radial-gradient for gradient backgrounds, which you can layer. For motion, use transform to move, scale or rotate, transition to smooth changes, and @keyframes for more complex animation. Use prefers-reduced-motion to reduce motion for users who have asked for it.
No. Bootstrap 5 rewrote its JavaScript plugins in standard JavaScript, so you only load the bootstrap.bundle file, which already includes Popper. You can use the modal, offcanvas, carousel or toasts through data-bs attributes in HTML or through the JavaScript API, and the course teaches both.
It suits beginners who want HTML5, CSS and Bootstrap in one course, as well as UX/UI designers and developers. You should be comfortable with a computer; JavaScript is not needed. This course focuses on HTML5 features such as forms and video and on CSS effects before Bootstrap, while Basic Responsive Web Design with Bootstrap 5 focuses on layout and multi-page sites.
Yes. It can be run in-house for your team, with examples adapted to your own work, such as building pages for your organisation's products or services in your brand colours and fonts. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.
Articles are published in Thai.
Every website we open today, whatever tool or framework built it, ends up in the browser as HTML and CSS. People who understand these two languages can edit pages, adapt templates and talk to development teams with confidence. Yet many beginners learn from…
JavaScript is the one language every browser understands, so it sits behind almost every button, menu, form and interactive screen on the web, and it is also the foundation of React, Vue, Node.js and many other modern tools. Yet many beginners learn from…
Web design today has to look good, work on every screen size, load quickly and be easy for a team to keep editing. Writing all the CSS by hand often ends in long files nobody dares to touch, while component-based CSS frameworks make sites look alike and are…
