AaronAli.ca

AI Prompts

Explore the prompts used to help create this site

Start with the initial simple script.

create a website called "AaronAli.ca" that will be served up using Node.js
header and footers will look the same for each page
Have a collapsable menu on the side with the following for the subpages: About, Experience, Training, Code, Tools, Contact
Each subpage contains the same theme/look
  

If there's an error message, throw it in the prompt — no need for additional context.

ReferenceError: C:\---\views\about.ejs:1
 >> 1| <- layout('layout') ->

    2| <h2>About Me</h2>

    3| <p>This is the about page for Aaron Ali. Welcome!</p>

    4| 

layout is not defined
    at eval ("C:\---\\views\\about.ejs":10:8)
    at about (C:\---\node_modules\ejs\lib\ejs.js:703:17)
    at tryHandleCache (C:\---\node_modules\ejs\lib\ejs.js:274:36)
    at exports.renderFile [as engine] (C:\---\node_modules\ejs\lib\ejs.js:491:10)
    at View.render (C:\---\node_modules\express\lib\view.js:139:8)
    at tryRender (C:\---\node_modules\express\lib\application.js:627:10)
    at Function.render (C:\---\node_modules\express\lib\application.js:574:3)
    at ServerResponse.render (C:\---\node_modules\express\lib\response.js:909:7)
    at res.render (C:\---\node_modules\express-ejs-layouts\lib\express-layouts.js:77:18)
    at C:\---\server.js:17:41
  

Instruct the AI to update the style.

Pay attention to how I talk to the AI, treating it as a machine, not a person. Don’t waste words that the AI will need to process. Be straight to the point and concise.

style the css so the header is always fixed on the top, the menu is on the side and stretches the length of the page to the the footer is always at the bottom of the page
  

My colors were off, so I asked for a simple fix.

find the ideal colors for the website from a UX standpoint and update the css. 
  

I had issues with the menu after making custom changes to the layout. Here’s how I got AI to fix it.

the menu needs to be visible when the page is larger without the "menu" button showing. When the screen is smaller, then the "menu" button has to be used to show the menu. fix the code to work as expected
 
<paste entire contents of html with css in the header>

  

Embedding the JS and CSS used in external files into your HTML can often help the AI better solve your issue. You can tell the AI: "I have embedded the external CSS and JS used by the page for reference" and it should help maintain the project structure it was working on.