Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
AI-generated code usually bundles all functionality into a single HTML file. While convenient at the start, it triggers a vicious cycle where you have to regenerate the entire codebase just to change a single button label. As of 2026, GitHub statistics show that AI-generated code is exploding in volume. It has become easy for everyone to create, but because they cannot fix issues themselves, they eventually end up hiring freelance developers. If you want to be completely technically independent, you must break down the code from the beginning. The solution is a structure where you manage buttons or input fields as independent, separate files.
To stop the futile practice of rebuilding the entire code and to reduce work time, you should break your website into pieces by utilizing the features supported by browsers by default.
<nav> tag, which is the top menu area, from the HTML file created by Codex. Save this part as a separate file named navigation-bar.html.custom-button.html, and the input form area that receives emails into lead-form.html.index.html file to call these separated files.Once this is done, your website is transformed into modular units. When you need to change button colors later, you only need to modify custom-button.html, and it will be reflected throughout the entire website immediately.
Tools like Framer or Webflow are also releasing AI component features. However, the Framer Basic plan costs $10/month with page limits, and the Webflow CMS plan requires a monthly payment of $23. Furthermore, the moment you leave those platforms, they lock you out of your own code. On the other hand, if you split pure code like this and upload it to free hosting services like GitHub Pages, your fixed costs become zero. The code becomes entirely your own property.
A website with only high traffic volume is not profitable. You must accurately track the moment a customer clicks a button and leaves an email address to save on your marketing budget. When you ask Codex to insert Google Analytics 4 (GA4) tracking code, you must provide clear criteria in your prompt to ensure the code does not break.
`text
`
By clearly defining the sections in an XML tag format like this, the AI will insert only the precise JavaScript code without breaking the existing design.
There is no need to use paid form services that cost tens of thousands of won per month just to collect customer information. By integrating Google Sheets with Apps Script, you can create a zero-cost receiving repository.
timestamp, name, email, and message in the first row. Then, run Apps Script from the Extensions menu.doPost(e) function in the editor that includes the LockService.getScriptLock statement. This syntax prevents data loss when multiple users press a button simultaneously. You can also include honeypot filter code to screen out malicious bots at this time./exec URL.<form>) tag in your website's HTML.Now, when someone who arrived via an advertisement presses the submit button, leads will accumulate in real-time in your Google Sheet without passing through paid tools. Note that if you market aggressively and traffic spikes, you may encounter errors due to Google API call limits. To prevent this, it is safer to add asynchronous logic for Exponential Backoff—which retries after a few seconds upon a transfer failure—into your JavaScript code.
Sites that looked fine on your computer often become unresponsive the moment you upload them to Vercel, Netlify, or GitHub Pages. Here are the 3 most common errors non-developers face and how to fix them.
The cause is relative path issues. Because you wrote addresses based on your local computer folder structure, the server cannot find the files. This is solved by replacing all image addresses with absolute paths starting from the root directory (/images/logo.png) instead of your local folder.
This happens because the server attempts to find an independent page for the refreshed URL, but since your site has a single-page structure, the file does not exist. If deploying on Netlify, create a _redirects file in the root folder and write /* /index.html 200. For Vercel, declare a rewrite rule in the vercel.json file.
If you get an ERR_SSL_PROTOCOL_ERROR when attaching your domain to GitHub Pages, you need to go to your domain management site (e.g., Cloudflare). Turn off the proxy status and change it to "DNS Only," then map A records to the 4 standard GitHub IP addresses. After that, checking the "Enforce HTTPS" option in GitHub settings again will resolve the issue.
| Failure Factor | Browser Error Message | Solution |
|---|---|---|
| Missing Image Path | GET ... 404 Not Found | Correct to top-level root path (/) |
| Screen Exit on Refresh | 404 Page Not Found | Set up _redirects or vercel.json redirects |
| Domain Security Error | ERR_SSL_PROTOCOL_ERROR | Set to DNS Only record and re-verify SSL |
If you leave sensitive information like API keys in your source code, you will lose everything through GitHub. You must register them separately in the Environment Variables menu of your Vercel or Netlify dashboard. At this time, depending on your JavaScript build rules, you should prefix variable names with something like NEXT_PUBLIC_ so they are properly recognized in your frontend code. Secrets that must never be exposed, like payment keys, should not be called directly by the browser; it is safer to bypass the address to be queried only within serverless functions like Vercel Functions.
If you keep asking AI to fix code, at some point the indentation will become a tangled mess and the structure will fall apart. You must enforce rules so that humans can see and understand where to make changes.
Use only lowercase for HTML tags and CSS names. Do not use tabs for indentation; unify it with 2 spaces. Comments should be written in just one line directly above the code that needs fixing, without complex explanations.
It is best to embed these rules in the system prompt area before asking the AI to write code.
`text
`
You can use the Prettier Playground website to check if your code is properly aligned. Just paste your code and click once, and the indentation will be perfectly aligned. Before updating your code, open an online tool like Pretty Diff, put your existing code on the left and the new code on the right to compare them. You can identify parts where data collection scripts were missed or input forms were broken due to typos before you deploy. Just making this process a habit will allow you to operate your website safely on your own without developer assistance.