Web Development
Build websites from the page structure through interactive, working applications.
12 modules
Self-paced
Certificate of Completion
Enrolled
About this course
Web Development is for anyone who wants to build real websites and web applications in a browser. It is designed for learners starting from the ground up as well as practitioners who want structured practice across modern HTML, CSS, JavaScript, React, server routes, accounts, and testing.
Every module centers on a real web project: an arts festival site, a museum guide, an editorial layout, responsive travel directories, booking flows, React dashboards, job boards, and authenticated member portals.
Full multi-file workspace
Write HTML, CSS, JavaScript, and React with live rendering, instant feedback, and automated unit test verification.
No setup required
Run everything directly in your browser. No Node, Git, or editor installations needed.
What you’ll learn
- Structure pages with clear, semantic HTML.
- Build responsive layouts with modern CSS.
- Write JavaScript that controls real browser behavior.
- Create forms, validation, navigation, and interactive interfaces.
- Request, display, filter, and update data.
- Build reusable interfaces with React.
- Create multi-page web applications.
- Connect browser code to server routes and stored data.
- Add accounts and protect private actions.
- Build for accessibility, speed, security, and different screen sizes.
- Test important behavior before release.
- Take a web product from a brief to a finished application.
Curriculum · 12 Modules
Every module includes guided lessons, practical assignments, and an independent challenge.
-
1
Build the first page: Start with a content brief and an empty HTML file to produce a valid rendered page.
-
2
Connect another page: Add a Schedule page and connect it to the home page with relative navigation links.
-
3
Organize the files: Restructure a disordered project directory and update paths to preserve site behavior.
-
4
Add images and assets: Embed project images and icons with descriptive alternative text and proper dimensions.
-
5
Read what the browser is doing: Trace document rendering, loaded resources, and inspect how markup translates to the rendered page.
-
6
Prepare the site for release: Finish metadata, responsive viewport, navigation consistency, and final pre-flight checks.
-
1
Give the page structure: Turn an unstructured content block into meaningful semantic page structure.
-
2
Build clear navigation: Create primary and secondary museum navigation using links and useful current-page behavior.
-
3
Mark up an exhibition: Turn supplied exhibition material into headings, paragraphs, lists, dates, quotations, and related content with correct hierarchy.
-
4
Add images and media: Create an exhibition gallery with supplied images, captions, and appropriate alternative text.
-
5
Present structured information: Build opening-hours and ticket-information content using semantic tables with appropriate header scopes.
-
6
Build a usable form: Build an event-registration form using appropriate controls, labels, groups, instructions, and browser validation.
-
1
Control the cascade: Resolve specificity conflicts, inheritance, and source order through a real magazine page.
-
2
Size and space the page: Work with the box model, sizing, padding, margins, borders, and content width.
-
3
Set type and color: Build the supplied typography and color system meeting WCAG AA contrast standards.
-
4
Create visual hierarchy: Use scale, contrast, grouping, whitespace, and alignment to match the editorial design.
-
5
Style interaction states: Implement useful hover, focus-visible, active, selected, and disabled states.
-
6
Turn styles into a small system: Reduce needless repetition through reusable classes and shared CSS custom properties.
-
1
Work with normal flow: Build a strong base layout before introducing explicit layout systems.
-
2
Build flexible rows: Use Flexbox for appropriate one-dimensional layouts such as navigation bars and tag rows.
-
3
Build real grids: Use CSS Grid for destination cards and multi-column editorial layouts.
-
4
Make the page adapt: Change spacing, typography, columns, and navigation as available space changes using media queries.
-
5
Handle real content: Test long titles, short titles, different image aspect ratios, missing descriptions, and narrow viewports.
-
6
Match the responsive design: Provide multiple viewport references and create one responsive implementation satisfying all of them.
-
1
Work with values: Use strings, numbers, booleans, and variables to represent rental information.
-
2
Make decisions in code: Apply supplied business rules for rental length, availability, membership discounts, and daily pricing caps.
-
3
Write reusable functions: Turn repeated calculations into reusable functions with clear inputs and outputs.
-
4
Work with lists: Use arrays to manage bikes, stations, bookings, and available choices.
-
5
Model useful data: Represent rentals, customers, and receipts using structured JavaScript objects.
-
6
Put the logic on the page: Connect the calculations and business logic to a visible browser interface.
-
1
Find and change the page: Select document elements and update content, attributes, and classes dynamically.
-
2
Respond to actions: Use events for clicks, input changes, form submissions, and keyboard actions.
-
3
Build menus and tabs: Create an accessible schedule interface with tabs and responsive mobile navigation.
-
4
Validate a form: Build studio booking form validation with immediate, clear error feedback.
-
5
Remember a choice: Use browser storage (localStorage) to preserve user preferences across page reloads.
-
6
Make interaction work without a mouse: Review and improve focus management, keyboard shortcuts, accessible dialogs, and status messages.
-
1
Read JSON: Teach the learner to understand a supplied response structure.
-
2
Request data: Load event information from a provided endpoint and render it.
-
3
Handle waiting and failure: Build loading, empty, and error states.
-
4
Search, filter, and sort: Add search and useful event filters.
-
5
Put state in the URL: Make relevant search/filter state shareable with URL parameters.
-
6
Send data back: Submit a new record to the provided endpoint and update the interface after success.
-
1
Build a component: Convert repeated project markup into a useful reusable component.
-
2
Pass data into the interface: Use props to render project information.
-
3
Manage state: Add interaction through React state rather than direct document manipulation.
-
4
Render collections: Build lists from supplied project data with stable keys.
-
5
Handle forms: Build a project form with controlled values, validation, submission, and reset behavior.
-
6
Compose a complete screen: Break the dashboard into meaningful components without excessive fragmentation.
-
1
Add routes: Create separate listing, detail, saved, and account pages.
-
2
Share the layout: Build shared application navigation and layout.
-
3
Use route data: Load the correct record from the current URL and handle missing data.
-
4
Share state where it belongs: Keep relevant state available across screens without turning everything into global state.
-
5
Reuse behavior: Extract repeated behavior only where a reusable hook meaningfully simplifies the application.
-
6
Handle page-level waiting and failure: Build useful loading, empty, missing, and error states across routes.
-
1
Write a server route: Create a server endpoint that receives a request and returns the correct response.
-
2
Validate on the server: Validate required input server-side and return useful errors.
-
3
Save and update records: Create, read, update, and delete project records using the provided data layer.
-
4
Add accounts: Implement the supplied account flow and associate records with the correct user.
-
5
Protect private actions: Prevent a user from modifying records they do not own.
-
6
Connect the whole flow: Connect browser form submission, server handling, persistence, and refreshed interface state.
-
1
Audit accessibility: Review and correct headings, labels, landmarks, keyboard access, focus, contrast, accessible names, and status messaging.
-
2
Improve performance: Identify and correct unnecessary requests, oversized media, poor loading decisions, and avoidable rendering work.
-
3
Protect common attack surfaces: Correct unsafe handling of input, output, secrets, and permissions using realistic supplied problems.
-
4
Add tests that matter: Test important user behavior without writing tests merely to increase coverage.
-
5
Separate configuration: Move environment-specific values out of application code and configure development/production behavior safely.
-
6
Deploy and verify: Prepare a production build, deploy through the supported course environment, and verify the result.
-
1
Read the product brief: Convert the supplied brief into pages, user actions, data requirements, constraints, and a build plan.
-
2
Plan pages and data: Define routes, shared layout, records, relationships, account boundaries, and the main user journey.
-
3
Build the public experience: Build responsive public pages, navigation, listings, and detail views.
-
4
Add data and server behavior: Connect the interface to persisted data through the server.
-
5
Add accounts and private actions: Implement account state and protect user-owned actions.
-
6
Finish the product: Complete accessibility, responsive behavior, edge cases, testing, performance, configuration, and release checks.
Certificate of Completion
Earn an official Practisi credential
Upon completing all 12 modules and the Final Challenge with a passing score of at least 80%, you receive an official Certificate of Completion.
- Permanent public credential verification link
- Cryptographically secure verification record
- Directly shareable on LinkedIn and professional portfolios
Learner reviews & ratings
No ratings yet
Frequently asked questions
Do I need to take Coding and Debugging first?
No. Web Development starts from the foundations of how browsers request, receive, and render web pages.
What technologies does the course cover?
Semantic HTML5, modern CSS (Flexbox, Grid), JavaScript (DOM, Fetch, async/await), React (state, props, hooks), server APIs, and testing.
Can I earn a certificate?
Yes. Complete all 12 modules and Final Challenges with a passing score of at least 80% to earn your Certificate of Completion.