Building Modern Websites

What you'll learn

Most website courses either stop at "make a page with HTML" or jump straight into a heavy framework. Professional websites need more: semantic, accessible markup; layouts that work on every screen; fast loading; findability in search; a secure contact form; and tests that keep it all working.

In this course you build a complete, production-quality website for a small business, Harbor & Pine Bakery, step by step:

• Foundations: how the web works (DNS, HTTP, browsers), professional tools (DevTools, Git), semantic HTML and accessibility from day one (WCAG 2.2 AA).
• Design and layout: the cascade, typography, color with contrast checks, dark mode, Flexbox, Grid, container queries, a small design system and responsive images.
• Behavior: JavaScript as progressive enhancement: an accessible mobile menu and a form that works with and without JavaScript.
• Engineering: npm, a static site generator you can read in one sitting, asset fingerprinting, performance (Core Web Vitals) and SEO (structured data, sitemaps).
• Backend and security: a form backend with validation, spam protection, rate limiting, CSRF/XSS defenses and security headers, plus privacy basics.
• Quality and launch: unit tests, browser tests, automated and manual accessibility audits, and a launch checklist.

The finished site is fast (about 17 KB per page), passes automated accessibility checks at phone and desktop sizes, and is ready to deploy. Deploying it is the subject of the next course, RNK-HOST-301.

Learning outcomes

By the end of the course, you can:

1. Explain how a page is delivered and rendered, and inspect it with DevTools and curl.
2. Write valid, semantic HTML with accessible images, tables, navigation and forms.
3. Style sites with a maintainable CSS architecture: tokens, a fluid type scale, accessible colors and dark mode.
4. Lay out responsive pages with Flexbox, Grid and container queries that work from 320 px upward.
5. Enhance pages with JavaScript that is accessible and degrades gracefully.
6. Design a small design system and serve images efficiently in modern formats.
7. Build sites with npm and a static site generator, using templates, content files and data.
8. Optimize for Core Web Vitals and search engines, including structured data.
9. Implement a secure form backend with validation, spam protection, security headers and privacy-conscious data handling.
10. Test and launch a site with unit, end-to-end and accessibility tests and a launch checklist.

Who it's for

• Career changers and junior developers who want professional, standards-based web skills
• Designers who want to build what they design
• Small-business owners and marketers who want to understand (and judge) the websites they pay for
• Freelancers starting a web-services business (pair with RNK-HOST-301 and RNK-CON-201)

Prerequisites

Comfortable using a computer and installing software. No programming experience needed. Basic English reading for technical documentation.

Equipment and software

The full setup guide, with verification steps, is in your learning materials when you enroll.

Format and study time

40 guided hours (10 modules × 4 h) plus ~12 h capstone. Instructor-led cohort, 5-day intensive, or self-paced with office hours.

Each scheduled class below states its own format, every meeting date and time, and its time zone.

What a seat includes

Curriculum

1. 01
   How the web works

   4 h · Lab: HTTP/DevTools analysis + a first page in Git
2. 02
   Semantic HTML & accessibility foundations

   4 h · Lab: Five valid, accessible pages, tested with keyboard and screen reader
3. 03
   CSS fundamentals: cascade, box model, type & color

   4 h · Lab: A token-based stylesheet with a proven contrast table, light and dark
4. 04
   Layout & responsive design

   4 h · Lab: Flexbox/Grid layout with no horizontal scroll at 320 px
5. 05
   JavaScript for the browser

   4 h · Lab: Accessible mobile menu + enhanced form that works without JS
6. 06
   Design systems, images & UX

   4 h · Lab: Style-guide page + responsive AVIF/WebP images
7. 07
   Build tooling & static site generators

   4 h · Lab: Your site rebuilt with the generator, plus a new shortcode and page type
8. 08
   Performance & SEO

   4 h · Lab: Lighthouse before/after study + validated structured data
9. 09
   Forms, backends & web security

   4 h · Lab: Hardened form backend with tests and a privacy notice
10. 10
    Testing, accessibility audits & launch

    4 h · Lab: E2E tests, full accessibility audit, launch checklist
11. ★
    Capstone clinic & demo day

    Lab: Capstone project

Assessment and completion

Simply opening a lesson or a video never counts as completing an assessment. Completion is recorded only when the published requirements are met and your instructor has confirmed the result.

Course policies

• Late work: −10% per day for up to 3 days; one free 48-hour extension.
• Original work: you may reuse the course's reference code (it's yours to learn from), but your capstone's design, content and code changes must be your own. Disclose any AI-assistant use in each report; you must be able to explain every line you submit.
• Licenses: only use images, fonts and code whose licenses allow it; record sources in your report.
• Fairness: grading never depends on owning fast hardware or paid tools. Everything in the course is free and runs on a modest laptop.
• Accessibility: all materials are searchable PDF documents (Markdown sources available on request); accommodations on request.

Upcoming classes