Skip to content

Getting Smarter About Web Development Using Claude

By: Stephen Toback

I decided to take what I learned in migrating my band’s website to html from the Squarespace platform and apply it to migration of my personal website. Here are some of the lessons learned that can hopefully help you as you develop your AI/Webdev skill set.

  1. Project Notes:
    1. All image files will be stored in the “/images” folder to make the annotation easier.
    2. Create a main CSS file with separate files for any CSS that is needed for a separate page in a separate file all stored in the “CSS” folder. This was something that I thought the AI would do automatically but I’m not sure if this is really NOT a best practice or if the AI just didn’t think to do this.
  2. I then grabbed a screenshot of the current website. I use a plugin called “Go Full Page” – There are other ways to do this, but I needed it to grab pages for my AI Presentations and it’s pretty handy
  3. I then annotated the screenshot in Photoshop giving the AI the file names of the images.

Clearly there are things it needs to improve but a pretty remarkable first pass. I’m learning as we keep stating that the more you know, the better questions you ask and the better AI does. I’m certain there are things I could have added to the prompt to make the first pass even better however I’m also learning that you can’t ask AI to do too many things at once, as things get lost. Perhaps there are better ways to write the prompt to avoid that. Stay tuned for more updates.

 

Leave a Reply

Your email address will not be published. Required fields are marked *