Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
HTML files generated by Claude look decent at first. However, once you go beyond three pages, maintaining them becomes a nightmare. Opening 10 files just to change a single font size is a waste of time. Separate your code.
/assets/css, images in /assets/img, and layouts in /components.main-header.html. This reduces the chance of Claude confusing file paths.<link> tag in the <head> of your main HTML file to manage styles centrally.By doing this, you only need to fix a header once, and the changes are immediately applied across all pages. You won't have to spend time editing files repeatedly.
Do not hardcode color codes directly into every component. You don't want to sift through thousands of lines every time you want to change a button color. Instead, use CSS variables.
/assets/css/global.css file.:root { --main-color: #000000; --sub-color: #ffffff; }.background-color: var(--main-color);.If your brand colors change later, just update a single file for 3 seconds. The button colors on every page will change at once. This is much more efficient than manually editing the design every time.
If you constantly modify code and refresh the browser, you will lose your focus. Install the Live Server extension for VS Code.
See visible changes in real-time without refreshing. This cuts your design iteration time in half.
Claude writes code differently every time you ask. Establish rules before you start chatting. Create a CLAUDE.md file in your project root directory.
CLAUDE.md.CLAUDE.md."This significantly reduces the chances of the AI arbitrarily complicating your code.
Don't worry about server settings or complex configurations. With Vercel, your website works as soon as you push your code.
There is no need to manage servers yourself. A domain address is generated automatically, and if a problem occurs, you can roll back to a previous version at any time. Upload your code now.