# Build Guide: College Course Practice Questions ## 1. Page purpose Build an indexable ecommerce category page that helps a student: 1. Find their college course. 2. Open the matching test bank/product page. 3. Understand what the download contains. 4. Inspect a real worked question. 5. Download either the complete set or a free sample. The primary conversion is a click from a course card to its test bank page. The secondary conversion is a free sample download. Use the supplied page copy exactly as the content source. Do not expose instructions from this guide as visible text or create additional explanatory sections. --- ## 2. Site integration - Build within the site’s existing header, footer, navigation, typography, spacing, colors, buttons, cards, forms, product components and checkout flow. - Use the standard content-page width, with wider containers only for the course grids. - Use the site’s existing breadcrumb component above the H1 if breadcrumbs are standard. - Do not create a new visual theme, standalone microsite, sidebar or separate checkout. - Keep the page helpful and catalogue-led rather than styling it like a promotional landing page. - Use the site’s standard product button and price treatment wherever purchase information appears. - Ensure the page is indexable and included in the XML sitemap. --- ## 3. Catalogue data Populate course cards and course-specific actions from the live catalogue rather than hard-coding product information. Use these fields where available: - Course title - Course aliases or alternate names - Subject group - Product URL - Free sample URL - Chapter count - Question count - Textbook title and edition - Available file formats - Price - Featured/popular status - Product preview asset Include only published college-course question sets. Exclude entrance, placement, high-school, graduate admissions and professional certification products. Do not invent counts, textbook editions, prices, reviews, sample links or product details. If a metadata value is unavailable, omit that value cleanly while retaining the course card and link. --- ## 4. Page structure Keep the supplied sections in this order: 1. Opening hero 2. Course finder and course groups 3. What each question set contains 4. Free sample and worked question 5. How to study with the questions 6. Authorship, checking and reviews 7. Closing course finder and actions Use one H1. Use H2s for the main sections and H3s for subject groups. Course names may be H4s inside cards if that matches the site’s card semantics. Assign stable section IDs: - `#courses` - `#whats-included` - `#free-sample` - `#how-to-study` - `#question-quality` - `#get-started` Do not add sections about entrance exams, placement tests, AP, SAT, ACT, CLEP, certification exams, apps, other free websites or unrelated study products. --- ## 5. Opening hero Use a restrained two-column hero on desktop and a single-column layout on mobile. ### Text column Place: - The supplied H1 - The short opening paragraph - A course search field - A button linking to `#courses` The search placeholder should use the examples in the supplied copy, if provided. ### Preview column Use one genuine product preview showing: - A page of chapter-organised questions - Its corresponding answer key or explanation Use an existing catalogue asset where possible. Do not use a generic classroom, student or stock-photo image. The preview should support the text, not dominate the hero. If the preview is an image, give it descriptive alt text identifying it as a preview of a question page and answer key. If it contains essential readable information, ensure the same information appears as live text elsewhere. --- ## 6. Course finder and course grids This is the page’s main functional section and should appear immediately after the hero. ### Search Repeat the course search at the start of this section. It must search the live course catalogue and match: - Exact course names - Partial course names - Common aliases - Course abbreviations where stored - Textbook names where supported by the catalogue Examples of alias matching include “Psych 101,” “Intro to Psychology” and “General Psychology.” Display autocomplete results after the user starts typing. Each result should show the course name and its subject. Selecting a result should open the corresponding test bank page using the canonical product URL. Provide a clear no-results state that directs the user back to subject browsing. Do not generate recommendations for unrelated exams. ### Subject filters Place five filter controls above the groups: 1. Science and health 2. Math and statistics 3. Social science 4. Business and economics 5. Computing Use accessible buttons or chips with visible active states. Filters should show the selected subject without reloading the page. Provide an “All courses” control so users can restore every group. On initial load, show all groups in the required order: 1. Science and health 2. Math and statistics 3. Social science 4. Business and economics 5. Computing Filtering must not change the URL unless the site already has a standard query-parameter pattern. If query parameters are used, preserve a canonical URL pointing to the unfiltered page. ### Course groups For each subject group, render: - The supplied H3 - Its one-line description - A responsive course-card grid Use catalogue subject taxonomy to assign products to groups. Do not duplicate a course in several groups unless the catalogue explicitly assigns it to more than one. ### Course cards Each card must include: - Course name - Verified chapter count - Verified question count - A clear link to the course’s test bank page Make the card title or entire card the primary link. Preserve a visible focus state and avoid nested interactive controls. Recommended grid: - Four cards per row on wide desktop where the theme supports it - Two or three on tablet - One on narrow mobile Keep cards compact and scannable. Do not add icons, badges or feature lists merely to fill space. --- ## 7. “What is included” section Build this as a two-column block. ### Left column Place the supplied explanatory paragraphs as normal text. ### Right column Use an accessible table or definition-list component with the supplied rows: - Chapters covered - Question types - Answer key - Textbook match - File format Do not place generic claims in fields intended for course-specific values. If the page has a selected or featured course context, populate the values from that product. Otherwise, use only the general values stated in the supplied copy. Below the two columns, place the delivery, price and guarantee line from the supplied text. Use the site’s standard purchase/action pattern. Prices and guarantee details must come from live site data or established policy pages. If a buy button is present in this section: - For a selected course, link to that course’s product page or established purchase flow. - Without a selected course, link back to `#courses` rather than implying that one generic product covers all courses. Do not create a new guarantee or alter existing guarantee wording. --- ## 8. Free sample and worked question Use a split layout on desktop and stack it on mobile. ### Worked-question card Render the supplied sample question as live HTML, not as a screenshot. Include: - Course or chapter label, if supplied - Question stem - Answer options - Clearly marked correct answer - Explanation - Explanation of the common wrong answer, if included in the written page Use semantic ordered or unordered lists for answer options. The correct answer must not be communicated by color alone; add a text label or icon with accessible text. Do not make the question interactive unless the existing site already has a tested quiz component. Its purpose here is to demonstrate the content and explanation style. ### Free sample panel Place the supplied sample explanation beside the question card, followed by the site’s standard download button. The sample action must: - Point to a real course-specific sample file or sample landing page - Require no account if that is the site’s established sample policy - Identify the course being downloaded - Use the site’s existing download tracking and file-delivery system Default to the catalogue’s designated featured or most popular course. If the page receives a valid course identifier through an existing site mechanism, update this sample panel to that course. Never silently label one course’s sample as another course. If no course-specific default can be established, use a button that returns to the course finder rather than linking to an arbitrary file. --- ## 9. Study-method section Render the supplied lead-in paragraph, four numbered steps and closing paragraphs in one readable column. Use a semantic ordered list for the four steps. Keep the step titles and body copy together. Do not turn this section into four promotional feature tiles. It should read as a short practical study method, with no image, carousel or decorative illustration. --- ## 10. Authorship and reviews ### Authorship Place the supplied authorship and checking paragraph in a normal text block. Do not add instructor names, credentials, review processes or accuracy claims unless they are verified and already supplied by the client. ### Reviews Use the site’s existing review/testimonial component and show three or four verified reviews. Each review should visibly include: - Reviewer name or the site’s established anonymized format - Course name - What the set was used for - The reported outcome, where present in the source review - Reviewer type if it is a verified instructor review Do not create or paraphrase reviews. Do not add exam scores or outcomes absent from the source. If fewer verified reviews are available, show fewer cards rather than fabricating content. Use a static grid or horizontal stack. Avoid an auto-advancing carousel. --- ## 11. Closing action area Use a restrained call-to-action block containing: - The supplied closing heading and line - The course search field - A primary action for opening the course set - A secondary action for downloading the free sample If an exact course has been selected, both buttons should reflect that course and use its product and sample URLs. If no course is selected: - The primary button should link to or focus the course finder. - The secondary button may use the designated featured sample, clearly naming its course. - Do not imply that a generic download applies to every course. Reuse the same search component and data source as the earlier course finders. Do not create separate search logic. --- ## 12. Search and selection behavior All three course search fields should share the same component and catalogue index. Required behavior: - Keyboard-accessible autocomplete - Arrow-key movement through results - Enter to select - Escape to close results - Visible focus state - Proper combobox, listbox and option semantics - Results announced to screen readers - Search matching that ignores capitalization - Clear input control - No full-page reload while typing A selected course may update course-specific CTAs on the current page if that behavior fits the existing platform. The primary result selection should still provide an immediate route to the product page. Search and filtering should remain usable without JavaScript where the platform supports progressive enhancement. At minimum, every course must remain available as a normal crawlable HTML link. --- ## 13. Responsive behavior ### Mobile - Stack all two-column sections. - Keep the H1 and course search visible near the top. - Allow filter chips to wrap; do not hide them in a hover-only control. - Render one course card per row on narrow screens. - Ensure tables fit without horizontal page overflow. Convert the details table to a definition list if necessary. - Keep buttons full-width only where consistent with the site’s mobile patterns. - Do not use sticky overlays that cover course results or sample content. ### Desktop - Keep body-copy line lengths readable. - Let the course grid use more width than text sections. - Align the worked question and sample panel at their top edges. - Avoid excessively tall hero spacing that delays access to the course grid. --- ## 14. SEO implementation Use the supplied title and H1 selected for the final written page. Also implement: - A unique meta description based on the supplied opening copy - A self-referencing canonical URL - Crawlable HTML links for every course card - Descriptive link text using the course name - Open Graph title, description and preview image - Existing site social-card conventions - Inclusion in the relevant catalogue/category navigation where appropriate Do not place key course listings behind client-side rendering that search engines cannot reliably crawl. ### Structured data Use: - `BreadcrumbList` if breadcrumbs are visible - `CollectionPage` for the page - `ItemList` for the visible course catalogue, with each item linking to its canonical product page Use `Product`, `Offer`, `Review` or `AggregateRating` schema only where the visible information is genuine, complete and already supported by the site’s product/review system. Do not attach one generic Product schema object to the entire category page. Do not add FAQ schema unless the final written page contains a genuine visible FAQ section. --- ## 15. Accessibility Meet the site’s accessibility standard, with WCAG 2.1 AA as the minimum target. Check that: - Heading order is logical. - Search fields have persistent labels, not placeholder-only labels. - Filter controls expose selected state. - All controls work by keyboard. - Focus is visible. - Color contrast passes. - Correct-answer status is not color-only. - Images have suitable alt text. - Decorative graphics use empty alt text. - Download links identify file type where useful. - No content depends on hover. - Dynamic result counts and no-results messages are announced appropriately. --- ## 16. Performance - Use the existing image optimization pipeline. - Serve the hero preview at the displayed dimensions. - Lazy-load images below the fold. - Do not lazy-load the H1, opening copy or initial course links. - Avoid adding a heavy third-party search library if the site already provides catalogue search. - Keep filter and autocomplete scripts small and defer noncritical JavaScript. - Prevent layout shifts by reserving image and card space. --- ## 17. Tracking Use the site’s existing analytics conventions. Track, without collecting typed course-search text as sensitive free-form data unless existing policy permits: - Hero browse button click - Course search submission or result selection - Subject filter selection - Course card click - Free sample download - Product-page/open-set CTA click - Closing CTA click Include course ID, course name, subject group and component location as structured event properties where available. --- ## 18. Acceptance checklist Before publishing, verify: - There is exactly one H1. - The course finder appears in the hero, course section and closing section. - All search fields use one shared catalogue source. - All published college-course products appear in the correct subject group. - Every course card links to the correct canonical product page. - Chapter and question counts match the live catalogue. - Entrance, placement, AP, SAT, ACT, CLEP and certification products are absent. - The sample question is live text with a visibly and accessibly marked answer. - The free sample link downloads or opens the correct course sample. - No prices, editions, guarantees, credentials or reviews were invented. - The page works at mobile, tablet and desktop widths. - Search and filters work with keyboard navigation. - Course links remain crawlable. - Checkout and download actions use the site’s existing live systems. - The page has canonical, metadata and appropriate structured data. - No placeholder text, dead buttons, empty groups or generic stock imagery remain.