AI-Powered Full Stack Web Development

Lecture 01 Assignment – HTML Crash Course for Absolute Beginners

✓ Create a file named index.html and include the following: • A proper HTML5 document structure. • A page title. • One main heading (H1). • At least 3 headings (H2/H3). • 3 paragraphs. • One ordered list. • One unordered list. • At least 3 links. • At least 2 images. • One table (minimum 3 rows). √ One HTML form containing: • Name • Email • Password • Submit button

Your Mini Project 1: Build a Complete, Responsive Landing Page — End to End.

Your Mini Project 1: Build a Complete, Responsive Landing Page — End to End. Pick a theme for a cutting-edge digital service—such as a creative agency offering custom photorealistic portraits, cinematic animations, and 3D avatars—and build a fully responsive, interactive web interface using ONLY HTML and CSS (Strictly NO JavaScript). What we expect: 1. YOUR OWN DESIGN. Not a Bootstrap template, not a tutorial clone, and no Tailwind/CSS frameworks. We want an original, custom-coded UI written in vanilla CSS. 2. A RESPONSIVE, FUNCTIONAL UI — end to end. Your layout must look flawless on mobile (under 600px), tablet, and desktop screens using Flexbox and Media Queries. A layout that breaks on smaller screens will be graded as a half-finished shell. 3. Advanced CSS Integration. Your project must incorporate advanced CSS concepts: fluid typography (using rem/em or vh/vw), a sticky or fixed navigation bar, and custom keyframes animations (e.g., a pulsing orbital loader or smooth hover transitions on interactive cards). 4. Specific Client Constraint: You must include a Services or Tier section displaying different packages. However, you must ensure the complete removal of any price indicators or currency symbols anywhere on the page (use terms like Premium Access, Standard Quota, or Credits instead). 5. The code in a PUBLIC GitHub repository. 6. The app DEPLOYED LIVE at a public URL (Vercel, GitHub Pages, Render, or any hosting you prefer) — anyone should be able to open the link and view your interface seamlessly. Your README is your full project report — make it excellent. It must contain ALL of the following: a. Project name, what it does, and its target audience. b. The LIVE deployed URL — clickable and working. c. A features list — detailing the CSS techniques utilized (e.g., CSS Grid, Flexbox, Keyframe Animations). d. The Design Architecture — a brief explanation of how you structured your CSS (e.g., external stylesheets, color palette variables, naming conventions). e. Screenshots of the web app in action (Desktop view and Mobile view). f. How to run/view the project locally. A weak README makes even a great UI ungradeable — write it like you're presenting your portfolio work to a client, because you are. How you will be marked: * DESIGN & UX — Originality, color theory, spacing (padding/margins), and overall visual appeal. * CSS MASTERY — Proper use of the Box Model, positioning (absolute, relative, sticky), and seamless animations/transitions. * RESPONSIVENESS — Flawless execution across all device widths using media queries. * DEPLOYMENT — A live public URL that actually works. * REPORTING — The depth, clarity, and formatting of your README. Submit ONLY your public GitHub repository link on the portal. VERY IMPORTANT — please read: * Your repo MUST be public. Open it in a private/incognito window before submitting — if it asks for a login, it cannot be graded and will score 0. * Your live URL must actually work — graders WILL open it on different devices to test responsiveness. * DO NOT use JavaScript. If any script tags or JS logic are found controlling the layout or animations, your project will be disqualified. * This is INDIVIDUAL work. Submitting someone else's template, a copied repo, or a shared project scores 0 for everyone involved. Deadline: Monday, 17 August 2026, 11:59 PM (PKT). Late or private links will not be accepted.