Basic HTML5, CSS and jQuery
Basic HTML5, CSS and jQuery is a beginner course in building websites from scratch with HTML5 and CSS, covering Flexbox, Grid and responsive design, followed by basic JavaScript and jQuery 4 for interactive features and loading data with Ajax. It suits beginners, IT staff and website administrators, and you leave able to build your own website and publish it online.
- Duration30 hours · 5 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
HTML and CSS are the foundation of every web page. HTML5 lets you build forms, add audio and video and structure pages without plug-ins such as Flash, while modern CSS brings Flexbox, Grid and media queries so sites look good on every screen size. Add JavaScript and jQuery, and pages can respond to users with menus, tabs, image sliders and forms that send data without reloading, an approach still common in organisational websites and systems.
This course takes beginners from zero to a working website. It starts with HTML5 structure and styling with CSS, through to responsive design, then lays a foundation in modern JavaScript and the DOM before using jQuery 4 and jQuery UI to add interactive features and load data with Ajax, compared side by side with standard JavaScript. Every topic has a lab, and the course finishes with a responsive business website workshop that you publish online. (5 days, 6 hours per day, 30 hours in total, Beginner level.)
What you’ll gain
- Structure web pages with HTML5 using semantic, accessible markup
- Style pages and build layouts with CSS, including Flexbox and Grid
- Build responsive websites that display well on every screen size
- Write basic JavaScript and handle the DOM and events
- Use jQuery 4 and jQuery UI to add interactive features and load data with Ajax
- Complete your own website and publish it online
Who this course is for
- Beginners who want to learn to build websites from the ground up
- Those who want to build interactive pages with JavaScript and jQuery
- IT staff and website administrators who need to edit their organisation's pages themselves
- IT managers and developers from other fields who want a front-end foundation
Prerequisites
- Confident use of a computer, the internet and a web browser
- Understand how to install and uninstall basic software
- No previous HTML, CSS or JavaScript experience is needed
Curriculum
Course Details
This course is the 2026 edition of Basic HTML 5 + CSS 3 and jQuery, renamed Basic HTML5, CSS and jQuery. It runs for 5 days, 6 hours per day (30 hours in total, 09:00-16:00), as lectures alternating with a lab for every topic. Beginner level. Learners build pages with HTML5, style them and create layouts with CSS, Flexbox and Grid, make them responsive with a mobile-first approach, learn modern JavaScript and the DOM, then use jQuery 4 and jQuery UI to add interactive features and load data with Ajax. The course finishes with a business website workshop published online, and learners take home the source code for every lab.
Day 1 Structuring Pages with HTML5
Section 1: Lab: Getting Started with the Web and Setting Up
- How the web works: browsers, servers, URLs and the roles of HTML, CSS and JavaScript
- Install VS Code with Live Server and use DevTools
- HTML5 document structure: doctype, lang, meta charset and viewport
- Semantic elements: header, nav, main, section, article and footer
- Lab: lay out the home page of a business website
Section 2: Text, Links, Images and Tables
- Headings, paragraphs, lists and meaningful emphasis
- Internal links, external links and links to parts of a page
- Images with alt, figure and figcaption
- Tables for displaying data
- Lab: an about-us page and a product page with images
Section 3: Lab: HTML5 Forms
- form, label and pairing labels with inputs
- Input types text, email, tel, number, date and password
- select, textarea, checkbox, radio and button
- Validate with required, pattern, min and max
- Lab: a contact form and a sign-up form
Section 4: Lab: Media and Interactive HTML Elements
- video and audio with controls and poster
- Captions with track and WebVTT files
- Embed YouTube videos and maps with iframe
- details and summary, and an introduction to dialog
- Lab: a company introduction page with a video and a map
Day 2 Styling and Layout with CSS
Section 5: Getting Started with CSS
- Ways to add CSS and keeping it in separate files
- Basic selectors, classes, IDs and pseudo-classes such as :hover
- The cascade, specificity and inheritance
- Colours, px, rem and % units, and CSS variables
- Lab: style the home page with colours and CSS variables
Section 6: The Box Model and Typography
- content, padding, border and margin
- box-sizing: border-box and display types
- Use Google Fonts for Thai and English
- Font size, line height and comfortable line length
- Lab: make an article page easy to read
Section 7: Lab: Layout with Flexbox
- Flex containers and flex items
- Alignment with justify-content and align-items
- gap, flex-wrap and sharing space with flex
- Navigation bars and multi-column footers
- Lab: a menu bar and a row of product cards
Section 8: Lab: Layout with CSS Grid
- grid-template-columns, fr units and gap
- repeat(), auto-fit and minmax()
- Lay out a whole page with grid-template-areas
- Choosing between Flexbox and Grid
- Lab: a portfolio gallery and a full-page layout
Day 3 Responsive Design, Effects and JavaScript Basics
Section 9: Mobile-first Responsive Design
- The mobile-first approach and meta viewport
- Media queries and choosing breakpoints from content
- Fluid font sizes with clamp()
- Responsive images with srcset and picture
- Lab: make pages work well on phones, tablets and large screens
Section 10: Lab: Effects and Animation with CSS
- Rounded corners, shadows and linear and radial gradients
- Transitions for buttons and cards
- Transforms: translate, scale and rotate
- Animation with @keyframes and prefers-reduced-motion
- Lab: a hero section and smoothly animated buttons
Section 11: Workshop: A Fully Responsive Website
- Plan several pages that share styles
- A mobile menu that opens and closes with details or popover
- Dark mode with prefers-color-scheme
- Test several screen sizes with device mode
- Workshop: the HTML and CSS of a responsive business website
Section 12: Lab: Getting Started with Modern JavaScript
- Add JavaScript to a page and use the console
- let, const, data types and template literals
- Conditions, loops and arrow functions
- Arrays and objects basics
- Lab: a product price calculator with discounts
Day 4 The DOM, Events and jQuery 4
Section 13: Lab: The DOM and Events with Standard JavaScript
- Select elements with querySelector
- Change text and styles with textContent and classList
- addEventListener and form events
- Create and remove elements
- Lab: a to-do list you can add to and delete from
Section 14: jQuery 4 Today
- What jQuery is and when it still fits
- What changed in jQuery 4: removed APIs and supported browsers
- Load jQuery from a CDN and write code inside $(function)
- jQuery selectors and filters
- Comparison of jQuery commands with standard JavaScript
Section 15: Lab: The DOM and Events with jQuery
- Traversing with .find(), .parent() and .siblings()
- Change content with .text(), .html() and .val()
- Manage classes and styles with .addClass() and .css()
- Bind events with .on() and event delegation
- Lab: a product table you can filter and highlight
Section 16: Lab: Effects and Animation with jQuery
- .fadeIn(), .slideToggle() and .animate()
- Use .toggleClass() with CSS transitions
- Accordions and tabs with jQuery
- An automatic image slider
- Lab: an FAQ section, service tabs and a portfolio slider
Day 5 Forms, Ajax, jQuery UI and Publishing
Section 17: Lab: Forms and Ajax with jQuery
- Read form values with .val() and .serialize()
- Validate before sending and show messages
- JSON data and calling APIs with $.ajax and $.getJSON
- Comparison with fetch and async/await in standard JavaScript
- Lab: show a product list from a JSON file
Section 18: Lab: jQuery UI 1.14 and Plugins
- Install a jQuery UI version that supports jQuery 4
- Datepicker, Dialog, Tabs and Autocomplete
- Choose maintained plugins and check them with jQuery Migrate
- Beware of XSS when inserting user data with .html()
- Lab: a booking form with a datepicker and a confirmation dialog
Section 19: Quality Checks and Publishing
- Check performance and accessibility with Lighthouse
- Shrink images with WebP or AVIF and loading="lazy"
- Git basics and publishing with GitHub Pages or Netlify
- Use an AI assistant to explain code, and check the results yourself
- Lab: put the website online
Section 20: Workshop: A Business Website with jQuery Features
- Add menus, tabs, a slider and a booking form to the earlier workshop site
- Show service data from JSON with Ajax
- Check the layout on every screen size and fix problems
- Publish the final version
- Present your work and plan your next steps
Schedule & training options
For individuals — public rounds
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
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
How do you start using jQuery on a web page?
Include the jQuery 4 file with a script tag, either from your project or a CDN, placed before your own scripts. Put your code inside $(function(){ ... }) so it runs once the page has loaded, then select elements with CSS-style selectors such as $('#menu') or $('.item') and call methods on them straight away, such as hide, addClass or css. If you bring older code to jQuery 4, enable jQuery Migrate during development to see warnings about removed APIs.
How do you handle events such as click and hover with jQuery?
Use the on method to attach a function to an event, such as $('#btn').on('click', function(){ ... }). For the pointer entering and leaving, use mouseenter and mouseleave through on rather than the older shortcuts. The advantage of on is that it can bind several events at once and supports event delegation, so elements added later also work, for example $('#list').on('click', 'li', handler). Standard JavaScript does the same with addEventListener.
What is the difference between linear and radial gradients in CSS?
linear-gradient blends colours along a straight line, with the direction set by keywords such as to right or an angle such as 45deg, and suits banner backgrounds and buttons. radial-gradient blends outward from a centre point as a circle or ellipse, with a configurable shape and centre, and suits light or highlight effects. Both are used with background-image, accept several colour stops, and work in all current browsers without the old vendor prefixes.
Who is the Basic HTML5, CSS and jQuery course for, and what should I know beforehand?
It suits beginners who want to learn to build websites from the ground up, those who want interactive pages with JavaScript and jQuery, IT staff or website administrators in organisations, and developers from other fields who want a front-end foundation. No previous HTML, CSS or JavaScript is needed; you just need to be confident with a computer, the internet and a browser, and able to install basic software.
What will I be able to do after the Basic HTML5, CSS and jQuery course?
You will be able to build pages correctly with HTML5, including text, images, forms, audio and video, style them and create layouts with CSS, Flexbox and Grid, make responsive sites that display well on every screen, write basic JavaScript and handle the DOM, use jQuery 4 and jQuery UI for menus, tabs, sliders and forms that load data with Ajax, and publish your own website online. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Can the Basic HTML5, CSS and jQuery course be run in-house for our team?
Yes. This course can be run in-house for your team, with examples adapted to your work, such as practising edits on your organisation's website, or updating pages that still use older jQuery to work with jQuery 4. You can request a quotation from this page or contact us on LINE @itgenius or by phone on 02-570-8449.
Related articles
Articles are published in Thai.