← All projects

Pixel-Perfect Landing Page in Vanilla HTML, CSS & JavaScript (JTG Frontend Assignment)

Source: Derived from Resources/JTG Home Assignment Set - 10th Oct.pdf, a real frontend home assignment from Josh Technology Group (JTG) used to screen frontend engineering candidates.

Skills Required

Background a Student Needs

A student should be comfortable building static web pages by hand and confident with the CSS box model, Flexbox, and Grid for layout. They need to understand how a design tool like Figma communicates a layout (frames, components, spacing, color, and typography) and how to export assets from it. They should know enough JavaScript to attach event listeners, toggle classes, and update the DOM in response to clicks, timers, and keyboard input — because both the modal and the slider must actually work. No framework knowledge is required; in fact, frameworks are explicitly disallowed. Familiarity with browser DevTools and the idea of "pixel-perfect" implementation (overlaying the design on top of the rendered page) will help the student meet the evaluation bar.

Task Summary

You are given a Figma mock-up of a marketing/landing page and must rebuild it exactly using only HTML5, CSS3, and vanilla JavaScript (jQuery allowed). No CSS or JS frameworks/libraries are permitted — except a third-party slider plugin is allowed solely for the carousel. The page must be pixel-perfect against the design at 1440px width, work seamlessly across Chrome, Firefox, and Safari, and include a working modal and a working image carousel. You extract all images/icons from Figma, write clean semantic markup yourself, and submit the work as a ZIP folder.

The Task

Objective: Implement the provided Figma mock-up page as a static, interactive webpage.

Allowed technologies: HTML5, CSS3, and JavaScript / jQuery only. No JavaScript or CSS frameworks/libraries (React, Angular, Vue, Bootstrap, Materialize, Material UI, etc.). The single exception: you may use a third-party JS/jQuery slider plugin for the carousel only.

Functionality: Follow the instructions embedded in the Figma file. The page must include a working modal and a working slider/carousel.

Assets: Export all images and icons directly from the Figma file. Do not copy or use any other code/elements from Figma — every element must be authored by you. Do not share the Figma file or comment on it; route all questions to HR.

Do's:

  1. Implement all sections shown in the design — nothing omitted.
  2. Ensure the page works seamlessly on Chrome, Firefox, and Safari.
  3. Use <div>s and semantic containers for layout, not tables.
  4. Match the design pixel-perfect using a tool like the PerfectPixel Chrome extension.
  5. Write clean, optimized, maintainable code following industry best practices.
  6. Make extensive use of semantic HTML5 tags (<section>, <header>, <footer>, <article>, <nav>).
  7. Use the Open Sans font family from Google Fonts.
  8. Integrate all provided assets, images, and icons exactly as specified.
  9. Use any code editor you prefer.

Don'ts:

  1. Do not use <table>, <tr>, <th>, <td> for layout.
  2. Avoid <hr> and <br> unless absolutely necessary.
  3. No UI frameworks (Bootstrap, Material UI, etc.).
  4. No JavaScript frameworks/libraries (Angular, React, etc.).
  5. Do not deviate from the provided design.
  6. Do not skip cross-browser testing.
  7. Do not share the Figma file; do not comment on it.
  8. Only export images/icons from Figma — author all other elements yourself.

Suggested approach (priority order):

  1. Build the static HTML/CSS first.
  2. Implement the modal (no JS/CSS library).
  3. Implement the working slider/carousel (a JS library is allowed here).
  4. Make it pixel-perfect and cross-browser.

Key clarifications (from the assignment FAQ):

Submission: Zip the project folder; name both the ZIP and the folder using your registered email address and upload it via the provided form.

Alternate Tasks (Mini-Project Variations)

  1. (Beginner) Static section clone, no JavaScript. Pick one self-contained section of a real marketing site (a hero band, a pricing row, or a footer) and rebuild it from a screenshot or simple mock-up using only semantic HTML5 and CSS. The focus is purely on layout fidelity: correct Flexbox/Grid structure, spacing, typography (load Open Sans from Google Fonts), and color. Overlay your result on the reference image with the PerfectPixel extension and iterate until alignment, padding, and font sizes match within a few pixels. This builds the core muscle the JTG assignment evaluates — translating a visual into clean, table-free markup — without yet touching interactivity.
  2. (Beginner-Intermediate) Vanilla modal component. Build a reusable modal/dialog in plain HTML, CSS, and JavaScript with no libraries. A "Open" button should reveal a centered modal with a dimmed backdrop; clicking the backdrop, pressing Escape, or clicking a close button should dismiss it. Add a smooth fade/scale transition in CSS, prevent the background from scrolling while open, and return keyboard focus to the trigger button on close. This isolates step 2 of the JTG priority list and forces the student to manage DOM state and keyboard events the way the real evaluation rewards.
  3. (Intermediate) Full pixel-perfect landing page with working carousel. Take a complete multi-section landing-page design (from a public Figma community file or a Frontend Mentor challenge) and reproduce the entire page in HTML5, CSS3, and vanilla JavaScript — exactly the shape of the JTG task. Implement an image carousel from scratch (or with a single permitted slider plugin) that advances one slide per next/back click and auto-plays every 5 seconds, plus the modal from variation 2. Verify the result is pixel-perfect at 1440px, fluid down to smaller desktop widths without horizontal scroll, and renders consistently in Chrome, Firefox, and Safari. This is the closest standalone mirror of the real assignment end-to-end.
  4. (Intermediate-Advanced — MERN twist) Make the landing page data-driven with a small backend. Start from the pixel-perfect page in variation 3, then replace the hard-coded carousel slides and a "Contact us" modal form with live data. Build a minimal Express + MongoDB API: a GET /api/slides endpoint that returns the carousel content (image URL, title, caption) and a POST /api/leads endpoint that stores submissions from the modal form. On the frontend, keep the markup framework-free but use fetch to render slides dynamically and to submit the form, showing success/error states in the modal. This bridges the static-frontend skill into full-stack MERN territory while preserving the pixel-perfect discipline.
  5. (Advanced — Agentic AI twist) AI-assisted design-to-code agent with a pixel-perfect verification loop. Build a small agent (Node.js or Python) that automates the JTG workflow: given a mock-up image and an asset folder, it calls an LLM to generate semantic HTML/CSS, renders the result headlessly (e.g., Playwright/Puppeteer), screenshots it at 1440px, computes a visual-diff score against the reference image, and feeds the diff regions back to the model to iteratively refine the markup until the diff falls below a threshold. Add guardrails so the agent rejects any output that introduces a disallowed framework or table-based layout. This reframes "pixel-perfect frontend" as an agentic, tool-using pipeline and teaches evaluation loops, structured tool use, and automated visual regression — core Agentic AI skills.

Reference Links