Basic HTML+CSS
Basic HTML+CSS is a beginner course in building web pages from scratch with HTML and CSS, covering semantic HTML, forms, the box model, typography, Flexbox, CSS Grid and mobile-first responsive design. It suits complete beginners, students and UI designers, and you leave with your own portfolio website published online.
- Duration12 hours · 2 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
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 outdated examples that still lay pages out with tables, or end up with pages that look fine on a computer but break on a phone.
This course starts from zero and builds one real website from the first file to publishing it online. Learners set up VS Code, structure pages with semantic HTML, and add text, images, links, tables and forms. They then style the site with CSS, from selectors, the box model and typography to layouts with Flexbox and CSS Grid, make it mobile-first with media queries, and check quality with Chrome DevTools and Lighthouse. The course closes with each learner building a personal portfolio website and publishing it on GitHub Pages. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
What you’ll gain
- Understand how websites work and the roles of HTML, CSS and JavaScript
- Structure pages with semantic HTML that is readable and accessible
- Add text, images, links, tables and forms correctly
- Style pages with selectors, the cascade, the box model and typography
- Build layouts confidently with Flexbox and CSS Grid
- Make websites responsive with a mobile-first approach and media queries
- Check pages with DevTools and Lighthouse and publish them on GitHub Pages
Who this course is for
- Beginners who have never built a website and want to create their own
- School and university students who need a website for coursework or projects
- UI/UX and graphic designers who want to understand how designs become web pages
- Website administrators and page admins who often edit content or templates
- Anyone planning to learn JavaScript, PHP or a framework next who wants solid foundations
Prerequisites
- Able to use a computer, manage files and folders, and use a web browser
- No previous programming experience is needed
- A laptop that can run VS Code and an up-to-date browser such as Chrome, Edge or Firefox
- A personal GitHub account (free to create) for the publishing topic
Curriculum
Course Details
This course is the 2026 edition of the Basic HTML+CSS course. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures alternating with labs, with each learner building one personal portfolio website throughout. Beginner level, with no programming experience needed. This edition drops Sass in favour of native CSS custom properties, and adds quality checks with Lighthouse and publishing on GitHub Pages. It focuses on the foundations for beginners, unlike HTML5 and Modern CSS, which goes on to form validation, audio and video, dialog, popover, container queries and animation. Learners take home a lab guide, starter files and solution code for every lab.
Day 1 Page Structure with HTML and CSS Basics
Section 1: Lab: Tools and HTML Structure
- How the web works: browsers, servers, URLs and the roles of HTML, CSS and JavaScript
- Install VS Code with Live Server and Prettier, and organise the site's folders
- HTML syntax and document structure: doctype, lang, meta charset and viewport
- Headings and semantic elements: header, nav, main, section, article and footer
- Lab: lay out a portfolio page with semantic HTML
Section 2: Text, Images, Links and Tables
- Paragraphs, lists and meaningful emphasis
- Internal links, external links and links to parts of a page
- Images with alt text, and figure with figcaption
- Tables for data (not for layout)
- Lab: an About page and a portfolio page with images
Section 3: Lab: Basic Forms
- form, label and pairing labels with fields
- text, email, tel and password inputs
- select, textarea, checkbox, radio and button
- Using required and placeholder sensibly
- Lab: a user-friendly contact page with a form
Section 4: Getting Started with CSS: Selectors and the Cascade
- Ways to add CSS and why it belongs in a separate file
- Basic selectors: element, class, ID and descendant
- The cascade, specificity and inheritance
- Colours and units: px, rem, % and vw
- Use DevTools to inspect and try CSS changes live
Section 5: Box Model and Typography
- The box model: content, padding, border and margin
- box-sizing: border-box and the different display values
- Google Fonts for Thai and English text
- Font size, line height and comfortable line length
- Lab: style an article page for easy reading
Day 2 Layout, Responsive Design and Publishing
Section 6: Lab: Layouts with Flexbox
- Flex containers and flex items
- Alignment with justify-content and align-items
- gap, flex-wrap and sharing space with flex
- Lab: a navigation bar and a row of cards with Flexbox
Section 7: Lab: Layouts with CSS Grid
- grid-template-columns, the fr unit and gap
- repeat(), auto-fit and minmax() for flexible grids
- grid-template-areas for whole-page layouts
- Choosing between Flexbox and Grid for the job
- Lab: a portfolio gallery and a full-page layout
Section 8: Mobile-first Responsive Design
- The mobile-first approach and meta viewport
- Media queries and choosing breakpoints from the content
- Fluid font sizes with clamp()
- Responsive images with max-width, srcset and picture
- Lab: make the site work well on phones, tablets and large screens
Section 9: Styling and Basic Interaction
- CSS custom properties for colours and spacing
- hover and focus states that work with a keyboard
- Basic transitions for buttons and cards
- Dark mode with prefers-color-scheme and colours that pass contrast checks
- Lab: a colour theme and button states for the whole site
Section 10: Workshop: Check and Publish Your Portfolio
- Test different screen sizes with Device Mode and audit 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 always check the result yourself
- Workshop: complete your own portfolio website, publish it online and present it
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 Flexbox and CSS Grid differ, and when should I use each?
Flexbox suits laying items out along one direction, such as menus, rows of buttons or rows of cards, while CSS Grid suits two-dimensional layouts with rows and columns, such as a whole page or an image gallery. Real projects usually combine them, using Grid for the overall structure and Flexbox for the items inside each part. In the course you build both on the same website so the difference is clear.
How do you make a website mobile-first?
Start with the meta viewport tag and write the CSS for small screens as the default. Use flexible layouts with Flexbox or Grid and relative units such as rem and %, then add media queries where the content starts to look wrong on larger screens, and make images scale with max-width, srcset or picture. Finally, test with Device Mode in DevTools and on a real phone.
What is semantic HTML and why should I use it?
Semantic HTML means choosing tags that describe what the content is, such as header, nav, main, article and footer, instead of using div everywhere. It helps screen readers and keyboard users understand the page structure, helps search engines read the content correctly, and makes the code easier to read and maintain.
Who is Basic HTML+CSS for, and what do I need to know first?
It suits beginners who have never built a website, school and university students, UI/UX designers, and website administrators who need to edit pages themselves. No programming experience is needed. You only need to be able to use a computer, manage files and use a web browser, and bring a laptop that can run VS Code.
What can I do after finishing Basic HTML+CSS?
You will be able to build pages with semantic HTML, style them with CSS, lay them out with Flexbox and CSS Grid, make them work on phones, check them with Lighthouse and publish them on GitHub Pages yourself, with your own portfolio website to show for it. You will also be ready to move on to HTML5 and Modern CSS, JavaScript or Tailwind CSS.
What software do I need for Basic HTML+CSS?
You use VS Code with the Live Server and Prettier extensions, Chrome or Edge with the built-in DevTools and Lighthouse, and a GitHub account for publishing. All of these tools are free, and installation steps are covered on the first day.