Frontend developer tests

test 1

Use these AIs to create a simple web app or landing page of your choice, you should give the same prompt to all 3 AIs and compare the output.

• https://Claude.ai
• https://ChatGPT.com
• http://aistudio.google.com

Use the current best model, at the time of this writing: 3.7 Sonnet, o3/o4-mini-high, Gemini 2.5 Pro Preview 05-06.

The app has to at least show:

1. Use of media queries
2. Use of svg images (Also show how you compress / optimize SVGs)

Things you need to consider:

• Aesthetics
• Library usage (does the AI use outdated libraries or the latest ones)
• Code quality
• Efficiency
• Modern CSS (https://moderncss.dev): Does it use outdated / bad CSS practices or deprecated APIs?

Then do a second prompt for each of the AI with your suggestions on how to improve the code. Then make an assesment.

Then, after this “final result” from the AI. Make manual changes to improve what the AI did not do well, explain what you do an why.

You have to use these browser APIs in your app:

• popover API: https://web.dev/blog/popover-baseline?hl=en
• Container queries: https://web.dev/blog/cq-stable
• :has pseudo selector: https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/

It can be pure HTML,CSS, JS. And you have to use Bootstrap as library