A to Z Practical Digital Skills Academy
Starting → Intermediate → Advanced → Full Advanced → Expert → Outstanding
32 professional courses · 256 mapped learning points · one fully worked approval lesson
Course Index / విషయ సూచిక
These 256 entries are a structured syllabus, not yet 256 completed lessons. Select a course to inspect its points. Existing lessons remain available separately.
Approval Lesson — HTML5: Build a Responsive Service Website
STARTING → INTERMEDIATE · 12 guided steps · real code · live preview
Learning outcome: Build and test a responsive three-service landing page with accessible navigation and a demo contact form. This is a fictional practice project, not a live customer-contact system.
Requirements and setup
Any text editor and a modern browser. Save the example as index.html, then open it in a browser. A local HTTP server is optional for this single-file demo. Do not publish real personal information.
Step-by-step theory and practical
Step 01 — Define the outcome
Theory: Build a responsive, accessible service landing page for a fictional local design studio.
Practical: Write one clear goal: visitors can read services and send an enquiry.
Expected output: A measurable project objective.
Step 02 — Map page sections
Theory: Semantic sections help users and assistive technologies navigate content.
Practical: Sketch header, navigation, hero, services, contact form and footer.
Expected output: Six named page sections.
Step 03 — Create project files
Theory: HTML holds content, CSS presentation, and JavaScript behavior.
Practical: Create index.html, styles.css, and app.js in one project folder.
Expected output: Three separate files.
Step 04 — Write the document shell
Theory: The doctype, language, charset and viewport influence standards and mobile rendering.
Practical: Add doctype, html lang=en, meta charset, viewport, title and stylesheet link.
Expected output: A valid HTML document shell.
Step 05 — Add semantic navigation
Theory: A nav landmark groups the primary links and descriptive link text supports accessibility.
Practical: Create header, nav and anchors linking to #services and #contact.
Expected output: Navigation moves to the correct sections.
Step 06 — Create a useful hero
Theory: A headline should explain the benefit rather than repeat generic marketing language.
Practical: Add h1, short paragraph and a link to the contact section.
Expected output: One clear h1 and a visible call to action.
Step 07 — Structure service cards
Theory: Repeatable article elements make service information scannable.
Practical: Create three articles for Web Design, Branding and SEO, each with a heading and benefit.
Expected output: Three distinguishable service cards.
Step 08 — Add a labelled form
Theory: Labels identify controls; required and type=email provide basic browser checks.
Practical: Create name and email inputs, a message textarea and submit button.
Expected output: Form fields have associated labels.
Step 09 — Create responsive styles
Theory: A fluid layout adapts without requiring horizontal scrolling.
Practical: Use max-width, CSS grid auto-fit and a small-screen media query.
Expected output: Cards stack on narrow screens.
Step 10 — Implement safe feedback
Theory: textContent inserts user-facing text without parsing it as HTML.
Practical: Intercept submit, check validity, and display a demo-only acknowledgement.
Expected output: No real email is sent; a clear confirmation appears.
Step 11 — Test accessibility and mobile
Theory: Keyboard focus and contrast affect real usability.
Practical: Tab through controls, resize to 360px, inspect console and fix errors.
Expected output: No horizontal overflow; all inputs keyboard-accessible.
Step 12 — Prepare for publishing
Theory: Static files can be hosted on GitHub Pages; real contact handling needs a backend or form service.
Practical: Verify relative file paths, add a README, commit to Git and deploy to a test URL.
Expected output: A working static demo with a documented form limitation.
Complete working source code
Expected output — live preview
Common errors and fixes
- CSS not showing: check stylesheet filename and relative path; this single-file sample embeds its CSS.
- Links do not scroll: check that href="#services" matches id="services" exactly.
- Form sends no email: intentional — this is a local demonstration; add a properly secured backend or form provider for real submissions.
- Mobile overflow: inspect fixed-width elements and verify the viewport meta tag.
- JavaScript fails: open Developer Tools → Console and inspect syntax or missing element IDs.
Independent practice and assessment
- Add a fourth service card called App Development and verify the mobile grid.
- Change the hero headline and update the page title.
- Add an optional phone field with a proper label.
- Use keyboard-only navigation and note any inaccessible control.
- Explain why this sample form must not claim to send real emails.
Knowledge check — answers
Q: Why use semantic sections? A: To describe page structure. Q: What does type=email provide? A: Basic browser format checking, not server-side security. Q: How is demo output shown? A: A sandboxed iframe.
Video / audio / PDF: not generated for this lesson yet. Do not label missing media as available.
Existing detailed lessons
The original Batch 1–4 detailed lessons are preserved without modification.
Open original detailed lessons📘 Batch 19 — Google Apps Script Approval Tracker (20 Detailed Points + Source + Offline Preview)
📘 Batch 18 — Complete Responsive Website Project (15 Detailed Points + Working Demo)📘 Batch 17 — Advanced Practical Projects (7 Courses)