DEV Community

Cover image for AI Can Write Frontend Code — What Should Developers Still Know?
Ganesh Deshmukh
Ganesh Deshmukh

Posted on

AI Can Write Frontend Code — What Should Developers Still Know?

#ai #webdev #programming #humanthinking

A few years ago, writing frontend code meant spending a lot of time typing HTML, CSS, and JavaScript yourself.

Today, AI can generate a complete component in seconds.

You can ask:

"Create a responsive navbar in React with a mobile menu."

And you may get working code almost immediately.

So this raises an important question:

If AI can write frontend code, what does a frontend developer need to know?

I don't think the answer is "nothing."

In fact, I think understanding the fundamentals is becoming even more important.

AI Can Write Code. But Code Is Not the Whole Job.

A frontend developer's job isn't simply:

Requirement
    ↓
Write code
Enter fullscreen mode Exit fullscreen mode

Real projects look more like:

Business requirement
        ↓
Understand UX
        ↓
Choose architecture
        ↓
Build UI
        ↓
Connect APIs
        ↓
Handle edge cases
        ↓
Accessibility
        ↓
Performance
        ↓
Testing
        ↓
Debugging
        ↓
Deployment
Enter fullscreen mode Exit fullscreen mode

AI can help with many of these steps.

But someone still needs to understand what should actually be built.

1. HTML Still Matters

AI can generate HTML very quickly.

But can you tell whether this is appropriate?

<div onclick="submitForm()">Submit</div>
Enter fullscreen mode Exit fullscreen mode

It may visually look like a button.

But semantically, a real button is usually better:

<button type="submit">
  Submit
</button>
Enter fullscreen mode Exit fullscreen mode

Understanding semantic HTML helps with:

  • Accessibility
  • Keyboard navigation
  • SEO
  • Browser behavior
  • Maintainability

You don't want to blindly accept generated markup.

You need to know what good HTML looks like.

2. CSS Knowledge Is Still Important

AI can generate CSS.

But real projects rarely say:

"Just make it look nice."

You may get requirements like:

  • Match the Figma design
  • Support mobile, tablet, and desktop
  • Handle long text
  • Support different content lengths
  • Maintain consistent spacing
  • Work across browsers
  • Avoid layout shifts

You need to understand things like:

Flexbox
Grid
Positioning
Specificity
Cascade
Responsive design
Container queries
Media queries
Typography
Animations
Enter fullscreen mode Exit fullscreen mode

Otherwise, you may end up accepting CSS that works for one screenshot but breaks everywhere else.

3. JavaScript Fundamentals Matter Even More

AI can generate:

const handleClick = () => {
  // ...
};
Enter fullscreen mode Exit fullscreen mode

But what happens when the code contains:

useEffect(() => {
  fetchData();
}, []);
Enter fullscreen mode Exit fullscreen mode

Do you understand:

  • Why the dependency array is empty?
  • When the effect runs?
  • What happens during re-render?
  • What happens if the request fails?
  • What happens if the component unmounts?
  • Can the request create a race condition?

You don't need to write every line manually.

But you should be able to read and reason about the code.

4. You Still Need to Understand the Browser

This is one of the biggest areas developers shouldn't ignore.

You should understand:

HTML
 ↓
DOM
 ↓
CSSOM
 ↓
Render
 ↓
Layout
 ↓
Paint
 ↓
Composite
Enter fullscreen mode Exit fullscreen mode

You should also understand:

  • HTTP
  • Cookies
  • Local storage
  • CORS
  • Browser caching
  • Network requests
  • Events
  • DOM
  • Rendering
  • Web APIs

Why?

Because when something breaks, you need to know where to look.

For example:

"The API works in Postman but doesn't work in the browser."

AI might suggest ten possible solutions.

A developer who understands CORS can immediately investigate the browser's security policy and network response.

5. Accessibility Cannot Be an Afterthought

AI can generate a beautiful UI.

But accessibility requires more than visual output.

You should know:

  • Semantic HTML
  • Keyboard navigation
  • Focus management
  • ARIA
  • Color contrast
  • Form labels
  • Screen-reader behavior
  • Accessible error messages

For example:

<input type="text" placeholder="Email">
Enter fullscreen mode Exit fullscreen mode

may look fine.

But a properly labelled form control is generally preferable:

<label for="email">
  Email
</label>

<input
  id="email"
  type="email"
  name="email"
/>
Enter fullscreen mode Exit fullscreen mode

AI can help generate accessible code.

But developers still need to verify it.

6. Performance Still Needs Human Thinking

AI can generate code that works.

That doesn't mean the code is efficient.

For example, a page might have:

10 large images
15 JavaScript libraries
Multiple API requests
Heavy animations
Large fonts
Unused CSS
Enter fullscreen mode Exit fullscreen mode

Everything may technically work.

But the user experience may be poor.

Frontend developers still need to understand:

  • LCP
  • CLS
  • INP
  • Image optimization
  • Lazy loading
  • Code splitting
  • Caching
  • Bundle size
  • Critical rendering path

The goal isn't:

"Make the code work."

The goal is:

"Make the website work well for real users."

7. Architecture Is More Than Generating Components

Imagine you ask AI:

"Create a React product page."

It might generate:

ProductPage.jsx
Enter fullscreen mode Exit fullscreen mode

But a real application may need:

src/
├── components/
├── pages/
├── hooks/
├── services/
├── api/
├── utils/
├── features/
├── stores/
└── types/
Enter fullscreen mode Exit fullscreen mode

Where should the API logic live?

Should this data be global state?

Should it be server state?

Should you use React Query?

Should the component fetch the data directly?

Should the page be server-rendered?

These aren't simply coding questions.

They're architecture decisions.

8. Debugging Is Still a Developer Skill

This may become even more important in an AI-assisted workflow.

Suppose AI gives you code that looks correct.

But the application throws:

Cannot read properties of undefined
Enter fullscreen mode Exit fullscreen mode

What do you do?

You need to understand:

Stack trace
↓
Error location
↓
Data flow
↓
State
↓
Network request
↓
Actual root cause
Enter fullscreen mode Exit fullscreen mode

AI can help investigate the problem.

But you still need enough knowledge to verify its suggestions.

Otherwise, you can end up fixing one error and creating another.

9. Security Still Matters

AI-generated code can contain mistakes.

Frontend developers should understand common issues such as:

  • XSS
  • CSRF
  • Unsafe HTML rendering
  • Exposing secrets
  • Insecure authentication handling
  • Sensitive data in local storage
  • Dependency vulnerabilities

For example:

element.innerHTML = userInput;
Enter fullscreen mode Exit fullscreen mode

should immediately make you think about whether untrusted input is being inserted into the DOM.

AI can write the code.

You are still responsible for understanding what the code does.

10. Testing Becomes More Important

If AI allows developers to produce code faster, we also need reliable ways to verify that code.

Testing can include:

Unit tests
Integration tests
Component tests
End-to-end tests
Accessibility testing
Visual testing
Performance testing
Enter fullscreen mode Exit fullscreen mode

For a button, you don't only want to know:

"Does it look correct?"

You may also want to check:

  • Can I reach it using the keyboard?
  • Does it work after multiple clicks?
  • Does it show the correct loading state?
  • Does it handle API failure?
  • Does it work on mobile?

11. Understanding the Requirement Is a Major Skill

This is something AI cannot magically solve for you.

A client might say:

"I want a faster checkout."

What does that actually mean?

Maybe they mean:

  • Fewer form fields
  • Faster API response
  • Better mobile UX
  • Fewer checkout steps
  • Better error messages
  • Faster page loading

Before writing code, someone needs to understand the actual problem.

Good developers don't immediately start coding.

They ask questions.

12. AI Changes How We Code

I don't think AI means developers should stop learning syntax.

But the workflow can change.

Instead of:

Think
 ↓
Search Google
 ↓
Read documentation
 ↓
Write code
 ↓
Debug
Enter fullscreen mode Exit fullscreen mode

It can become:

Understand problem
 ↓
Ask AI for an approach
 ↓
Review the generated code
 ↓
Test it
 ↓
Modify it
 ↓
Debug
 ↓
Verify
Enter fullscreen mode Exit fullscreen mode

The developer becomes more of a reviewer, problem solver, and system designer.

13. What Should a Frontend Developer Learn?

If you're starting or growing as a frontend developer, I would still focus on these fundamentals:

HTML 

Semantic HTML
Forms
Accessibility
SEO basics
Enter fullscreen mode Exit fullscreen mode

CSS 

Box model
Flexbox
Grid
Responsive design
Animations
Modern CSS
Enter fullscreen mode Exit fullscreen mode

JavaScript 

Variables
Functions
Scope
Closures
Promises
Async/await
DOM
Events
Modules
Error handling
Enter fullscreen mode Exit fullscreen mode

Browser 

HTTP
Cookies
Storage
Caching
CORS
Rendering
DevTools
Network debugging
Enter fullscreen mode Exit fullscreen mode

React or another framework 

Components
Props
State
Hooks
Rendering
Performance
Data fetching
Component architecture
Enter fullscreen mode Exit fullscreen mode

Engineering 

Git
Testing
Accessibility
Performance
Security
Code review
Deployment
Enter fullscreen mode Exit fullscreen mode

And now add one more skill:

AI-assisted development
Enter fullscreen mode Exit fullscreen mode

14. The New Skill: Knowing What to Ask AI

There is also a new skill developers are developing: giving AI useful context.

Instead of:

"Create a React component."

You can provide:

Create a reusable React product card.

Requirements:
- React
- TypeScript
- Accessible HTML
- Mobile responsive
- No unnecessary dependencies
- Product data comes from props
- Handle missing image
- Handle long product names
- Use semantic HTML
Enter fullscreen mode Exit fullscreen mode

The better the problem definition, the more useful the output becomes.

But even then, the developer needs to review the result.

15. Don't Become Dependent on AI

One simple test I like is:

If the AI disappeared tomorrow, could I debug my application?

You don't need to memorize every API.

You don't need to write everything from scratch.

But you should understand enough to:

  • Read code
  • Debug code
  • Review code
  • Explain code
  • Change code
  • Identify bad approaches
  • Make architectural decisions

That's a much stronger position than simply being able to generate code.

Final Thought

AI is changing frontend development.

There's no reason to ignore it.

Use it.

Let it help you:

  • Generate boilerplate
  • Explore solutions
  • Explain unfamiliar code
  • Create tests
  • Find bugs
  • Refactor code
  • Learn new APIs
  • Speed up repetitive work

But don't outsource your understanding.

A developer who can write 500 lines of code manually isn't necessarily more valuable than someone who can generate those 500 lines in seconds.

The important skill is knowing:

What should be built, why it should be built that way, whether the generated code is correct, and how it will behave in the real world.

AI can help write the code.

Developers still need to understand the web.

Top comments (0)