DTC 355

Mobile Navigation

On desktop, navigation is usually straightforward: a horizontal bar of links across the top of the page. But on mobile, there isn't enough room for that. The links stack awkwardly, overlap content, or get too small to tap. That's why most mobile websites use a toggle menu — a button that opens and closes the navigation when tapped.

Why mobile menus matter

More than half of all web traffic comes from mobile devices. If your navigation doesn't work well on a phone, visitors can't get around your site they will simply leave. A good mobile menu is compact when closed, consistent, easy to find and open, and gives clear access to every page.

The hamburger menu pattern

The most common mobile navigation pattern is the hamburger menu — three horizontal lines (☰) that indicate a hidden menu. When a user taps the icon, the navigation slides in or drops down. Tapping it again (or tapping a close button) hides the menu. This pattern is so widely used that most people recognize it immediately.

In Mini Project 6, you'll build a working mobile menu using JavaScript to toggle the navigation open and closed. This is the same technique you'll apply to your business website this week.

Using AI in Your Development Workflow

AI tools can generate HTML and CSS from a text prompt. They're widely available and you'll encounter them in the industry, so it's worth understanding what they do well, what they get wrong, and where they create problems you won't notice until later.

Different tools, different context

Not all AI tools work the same way. Chat-based tools like ChatGPT and the Claude web app don't see your project. They don't know your file structure, your class names, or what CSS you've already written. You paste code in, describe what you want, and they generate a response based on patterns from their training data. That means they're guessing at a lot of the specifics.

Editor-integrated tools like GitHub Copilot, Cursor, and Claude Code work differently. They can read your actual project files—your HTML, your stylesheets, your folder structure. That gives them more context, so their suggestions tend to be more relevant to what you're working on. But more context doesn't mean correct. They still generate code based on pattern-matching, not understanding, and they still produce the same categories of errors.

Common problems with AI-generated code

• Wrong assumptions — Chat-based tools will guess at class names, file paths, and HTML structure. If you paste their output into your project without checking, things break or end up structured in a way that doesn't match the rest of your code. Editor-integrated tools are better at matching your existing code, but they still make assumptions about intent.
• Outdated techniques — AI sometimes generates code using older methods. It might use float layouts instead of flexbox, add vendor prefixes that haven't been needed in years, or use inline styles when you should be using a stylesheet.
• Overcomplication — Ask for a simple layout and you may get 50 lines of CSS when 10 would do. Extra wrapper divs, redundant properties, unnecessary specificity. The code works, but it's harder to read and harder to change later.
• Accessibility gaps — AI-generated HTML frequently skips semantic elements, alt text, or proper heading hierarchy. The page may look right visually but be poorly structured for screen readers and search engines.

Knowledge gaps

If you use AI to write code you don't understand, you can't fix it when it breaks. A layout will collapse at a different screen size, a style won't apply the way you expect, or two sections will conflict. If you don't know what the code in your project is doing, you're stuck.

Right now, the point is to build a working understanding of how HTML and CSS behave. That only happens by writing code, getting it wrong, and figuring out why. Having AI skip that process for you means you end up with a project you can't maintain or debug on your own.

Technical debt

Technical debt is what builds up when quick, careless decisions make a project harder to work on over time. AI-generated code contributes to this when you paste in blocks without cleaning them up. You end up with duplicate styles, inconsistent naming, unused CSS rules, and HTML that doesn't match the rest of your project. Each shortcut makes the next change harder.

Where AI is useful

Repetitive tasks. If you need 20 similar list items, a data table, or a set of placeholder cards, AI can generate that boilerplate faster than typing it by hand. You still need to review and adjust the output, but it saves time on the mechanical parts. Same with repetitive CSS—like styling a set of cards that all follow the same pattern.

Troubleshooting. When something isn't working and you can't figure out why, paste your code into an AI tool and describe the problem. AI is often good at catching missing semicolons, unclosed tags, specificity conflicts, and flex/grid issues. It can point you toward the problem faster than scanning through your code line by line. Make sure you understand why the fix works before you apply it.

Learning. You can paste a block of CSS into a chat tool and ask what each property does. You can ask it to compare two approaches and explain the trade-offs. You can ask “why doesn't my flexbox container center vertically?” and get a direct explanation. When you use AI to understand code rather than to avoid writing it, it works well as a study tool.

In this class, you're expected to understand the code in your projects. If you use AI to help write something, you should be able to explain every line. If you can't, slow down and learn the concept before moving on.

Assignments