Junior Web Developer Challenge — Improving a Landing Page
Identify and fix issues in a website landing page to improve clarity and accessibility
Create a free account to upload your work. Your progress saves as a draft until you submit.
What You'll Be Doing
This challenge is for the Junior Web Developer role at CFA (Community Financial Access), an entry-level position in the Front-End / Web Development pathway.
Scenario — "Make the Sign-Up Page Work for Everyone"
A small business's website has a simple email sign-up page. Users have reported that it's hard to read on mobile devices and doesn't clearly communicate why they should sign up.
Your task is to design improvements to make the page accessible to all users, including those using screen readers or keyboard navigation. The page should be readable and user-friendly on mobile devices, and more engaging with clear messaging about why users should sign up. Your improvements should be built using semantic HTML, CSS, and basic JavaScript. You don't need to write complete code—just explain the structure, improvements, and reasoning behind your decisions.
Record a video walking us through your approach and submit your layout plan and enhancement notes as supporting documents.
Challenge Guidelines
The assessment consists of a video response of 7–10 minutes (continuous recording, one take), two written artifacts (maximum 1 page each), and focuses on the scenario of identifying and fixing issues in a website landing page. An AI Usage Declaration is required.
What You'll Accomplish
Apply semantic HTML for accessibility and structure
Implement responsive design principles for mobile-first development
Apply WCAG accessibility guidelines
Create engaging user interfaces with clear messaging
Test and validate usability improvements.
How Your Work Will Be Scored
What to Submit
Required Submissions:
1. Layout & Structure Plan (Required)
Submit a PDF or document with a maximum length of 1 page. This should include a rough outline of your HTML structure (header, form, footer), key accessibility improvements such as ARIA labels, semantic elements, and keyboard navigation support, and responsiveness strategies including media queries, flexible layouts, and mobile-first approach considerations.
2. Enhancement Notes (Required)
Submit a PDF or document with a maximum length of 1 page. Provide a short explanation of your design choices including fonts, colors, spacing, and interactions. Explain how you'd test it for usability through manual testing, browser tools, and user feedback. Include one engagement idea such as a success message, tooltip, progress indicator, or compelling headline. Focus on clarity and user confidence, showing that you understand what makes a landing page effective.
3. Video Recording (Required)
Submit an MP4 file that is 7-10 minutes long (continuous recording, one take). Your video must include all three components detailed below.
Submission Guidelines
Video Requirements:
Your 7-10 minute video must include all three components:
1. Introduction (1-2 minutes)
Tell us about one web project you've built or improved — this can be a class project or personal site. What challenges did you face and what did you learn?
2. Traits Assessment (2-3 minutes)
Which situation sounds more enjoyable to you, and why?
In Scenario A — "The Quick Polish" (Execution), you're asked to fix layout spacing and color contrast issues before a campaign launch. The design is approved, and you just need to implement the fixes quickly and accurately. Would this focused, deadline-driven work energize you?
In Scenario B — "The Redesign Idea" (Discovery), you notice users are confused by a sign-up form and propose a clearer layout and messaging flow. You'll research best practices, create mockups, and present your recommendations. Would you enjoy this exploratory, user-focused work?
There's no right or wrong answer — just share which environment helps you do your best work.
3. Challenge Response (3-5 minutes)
Walk us through how you'd approach improving the simple webpage scenario. What HTML structure would you use? What CSS improvements would make it mobile-friendly and accessible? What one engagement idea would you add and why?
AI Usage Declaration:
At the end of your video, please state whether you did not use any AI tools, or if you used AI tools, briefly describe how, including prompts and edits.
Layout & Structure Plan
Format: .pdf, .doc, .docx, .rtf, .txt, .md
Include a rough outline of your HTML structure (header, form, footer), key accessibility improvements (ARIA labels, semantic elements, keyboard navigation support), and responsiveness strategies (media queries, flexible layouts, mobile-first approach considerations).
Sign in to upload files
Enhancement Notes
Format: .pdf, .doc, .docx, .rtf, .txt, .md
Provide a short explanation of your design choices (fonts, colors, spacing, interactions). Explain how you would test for usability (manual testing, browser tools, user feedback). Include one engagement idea such as a success message, tooltip, progress indicator, or compelling headline. Focus on clarity and user confidence—show that you understand what makes a landing page effective.
Sign in to upload files
Video Recording
Format: .mp4, .mov, .webm
Your video must be a continuous, one-take recording that includes all three components:
1. Introduction (1–2 minutes) Tell us about one web project you have built or improved—this can be a class project or personal site. What challenges did you face and what did you learn?
2. Traits Assessment (2–3 minutes) Which situation sounds more enjoyable to you, and why?
- Scenario A — "The Quick Polish" (Execution): You are asked to fix layout spacing and color contrast issues before a campaign launch. The design is approved, and you just need to implement the fixes quickly and accurately. Would this focused, deadline-driven work energize you?
- Scenario B — "The Redesign Idea" (Discovery): You notice users are confused by a sign-up form and propose a clearer layout and messaging flow. You will research best practices, create mockups, and present your recommendations. Would you enjoy this exploratory, user-focused work?
There is no right or wrong answer—just share which environment helps you do your best work.
3. Challenge Response (3–5 minutes) Walk us through how you would approach improving the simple webpage scenario. What HTML structure would you use? What CSS improvements would make it mobile-friendly and accessible? What one engagement idea would you add and why?
AI Usage Declaration: At the end of your video, state whether you did not use any AI tools, or if you used AI tools, briefly describe how (including prompts and edits).
Sign in to upload files
Create a free account to upload your work. Your progress saves as a draft until you submit.
On this page