Making small custom websites with AI

And some beginner coding knowledge

Illustration of a hypothetical conversation with GPT-4 on a pink background.

Despite a general preference for no-code solutions since they save time, there remains a unique appeal in custom-designed websites. This is rooted in their bespoke nature and the level of control awarded by building a website from scratch. There’s the understanding that beyond coding, a sophisticated setup involving GitHub, Vercel and DNS configuration is necessary. Typically, projects that engage with this level of setup do so with a clear purpose and a certain enthusiasm, which is often reflected in the quality and distinctiveness of their custom websites.

Today, the exploration of web solutions typically begins with platforms like Cargo, Squarespace, Wix, etc., progresses through various custom solution attempts, and often circles back to one of the aforementioned content management systems for their user-friendly interfaces, cost-effectiveness, and ability to quickly deploy and update content without deep technical expertise.

Custom-built sites have their place (often costing thousands of dollars for design and development plus domain fees), just as there’s value in choosing to work with the appropriate ready-made tool (around $20/month, plus the learning curve and domain costs).

I’m exploring what seems to be an emerging middle ground: combining basic HTML/CSS knowledge with AI tools like ChatGPT to craft small personalized websites at minimal cost.

Blending DIY capabilities with advanced technology enables unique and accessible web development, striking a practical balance between custom and ready-made solutions.

Simple business card-style website for a restaurant with an interactive effect — Nacho Macho Taco

Demo depicting an interactive feature for a restaurant website.

When my favorite Mexican restaurant mentioned they needed a website, I wasn’t sure whether to use a ready-made solution like Squarespace or to custom build a site myself. A CMS seemed like the obvious choice but, having set up a few sites for friends on Cargo and hearing about ChatGPT’s ability to write code, I decided to try something new.

I reinstalled Visual Studio Code and prompted ChatGPT:

“Write me the code for an effect where clicking on a blank part of the webpage spawns a tortilla that falls down the screen, and add some center-aligned text in Courier font.”

After several iterations of copying and pasting some basic code, I had a fully designed webpage with tortilla chips that animate down the screen whenever you click.

Landing page with an experimental cursor effect — Hotel Dust

Demo of Hotel Dust landing page website.

Soon after Nacho Macho Taco I built an experimental landing page for another business. I used various prompts and pulled in a few color values and fonts that matched the existing brand.

I asked ChatGPT to create a landing page with specific font styles for ‘Hotel’ and ‘Dust’. The AI generated the initial HTML and CSS codes.

To refine the design, I asked for adjustments in text size, margins, and color. I also added a background image.

Next, I explored an animated cursor effect. Using Figma, I determined its size and color, and then requested code for a circular cursor with specific attributes, including dynamic circle spawning and a limitation on the number of circles displayed.

For mobile responsiveness, I asked for tap and drag functionality, adjusting the circle spawning rate and maximum circle count.

Additional interactions involved debugging and favicon adjustments.

Each time, the AI provided the necessary HTML and CSS code blocks.

Since I’m a novice web developer, when making adjustments to code I ask ChatGPT to send me full code blocks so I don’t need to read through the code line by line. This strategy significantly expedited my workflow. This is the prompt I typically copy and paste:

“Give me the entire adjusted javascript, with no lines commented out, the whole thing so i can select my total code and paste over it without making any further changes.”

Typographic design generator using a GUI — Text dither

Demo video of the Type Dither generator in use.

This example highlights the most enjoyable and impactful use of GPT for designers in their daily practice. It began experimenting on editor.p5js.org using a series of rapid, somewhat chaotic prompts of which few were retained.

The tool, utilizing p5.js, alters Helvetica by replacing it with dots and squares of varying densities. The effect is configurable using a dat.gui panel.

To improve the tool’s speed and performance, sliders were largely replaced by text fields, reducing excessive image creation and improving usability. Further prompts for improvement included:

“Ask me these questions again, but first optimize it a bit — running quite slow”

“Can you add an option to export as jpg, png or svg — whatever is easiest.”

“Make a checkbox in the dat.gui for ‘rounded’ that rounds the square pixels 100% of the pixel size”

In the final stage of the project, I prompted ChatGPT to generate code for selecting a random background color and bird name on each page reload. This feature adds a dynamic element to the tool, creating a diverse array of outputs and enriching the user experience.

AI’s future in web development

Exploring a fruitful middle ground at the intersection of traditional web development and emerging AI technologies has marked a significant shift in my approach to website creation.

Venturing into web development with AI as my co-pilot was an eye-opening and empowering experience. I am now more capable of creating more custom and personalized websites. Will platforms like Cargo and Squarespace will incorporate AI to offer more flexible customization options? It’s fascinating how web development studios may embrace AI when developing their own custom sites. I’m looking forward to seeing how this technology will continue to shape and redefine the world of web design.

Envisioning the future of web development with AI integration at its core, we stand on the brink of a paradigm shift. Imagine platforms like Cargo and Squarespace not just offering templates, but intelligent design assistants that adapt and evolve with each user input, creating unique and dynamic websites. This could lead to a new era where the boundaries between developer and designer blur, making high-level web design available to everyone.

We might see AI algorithms that not only suggest aesthetics but also optimize for user experience and accessibility, making websites more inclusive and effective. In this future, AI doesn’t replace the web developer; it empowers them to be more creative and efficient, potentially transforming even small-scale projects into sophisticated web experiences. Such advancements could democratize web design, sparking a surge in digital creativity and diversity. As we stand on this precipice, it’s exhilarating to consider how diving into this AI-enhanced web development space could unleash a wave of innovation, reshaping the digital landscape in ways we have yet to fully comprehend.