Introduction to AI in Web Development
Artificial intelligence is an enormous talking point everywhere you go, not just in the web development space. While many have anxiety with this topic, I can confirm after working with it for this project that AI in our industry is a helpful asset. In particular, GitHub's Copilot tool is insanely robust, taking mere comments or prompts and generating code from them near instanteously. It speeds up the process of writing code tremendously, building what you want quickly and with precision. It can even aid in writing code on something you might not have any idea how to implement otherwise! This ultimately leaves more time for developers to focus on the creative aspects of their sites, not having to figure out how to make their dreams a reality on the web.
To see my results of what AI can do, click here!
- To access Copilot, one needs to either purchase a subscription or become a verified student.
- Once access is gained, the easiest way I've found to use Copilot is through Visual Studio Code. You will need to install the program as well as this extension for Copilot.
- From there, create a new file in Visual Studio Code (File -> New File).
- On the right hand side of your screen, there should be a sidebar for Copilot. Towards the bottom, there is a spot to write to Copilot. Alternatively, use the keyboard shortcut (Ctrl+I) to bring up the Copilot dialog box.
- From here on out, the limits are only your imagination!
This mainly covers the basics in setting up the Copilot program. If you're stuck on where to begin, here's some starting prompts I utilized within my project above that are useful in just about anything:
- Generate HTML boilerplate code (will write out the doctype, "head" section, and body tags).
- Generate navigation (will generate code for navigation bar).
- Generate hero banner section (will generate code necessary for a hero banner).
- Generate sections with paragraphs (will generate "section" and "p" tags).
- Generate footer section with copyright that automatically updates (will generate both HTML code for the footer section and the copyright, as well as the JavaScript necessary to update automatically to the current year).
- Create consistent styling for page (will generate styling for all elements currently on page).
That covers some of the most basic prompts that you'll likely need for any basic web page. For added fun, you can try prompts for parallax scrolling, box shadows for sections, meta keywords and descriptions, and even an (albeit rudimentary) chatbox! All done just through simply text interaction with the AI!
All in all, this was perhaps the most fun I've had working on a project this semester! It's incredible how well built these AI models are, turning simple text to actual code like magic. I gained alot of know-how on how the AI responds to requests. Plus, I gained the know-how of how to use the AI to my advantage, creating elements that I had never would have known how to create otherwise (such as the chatbox). Additionally, while it did not make the final project, I also looked in AI-enhanced imagery, which crisps up lower-res images so that they appear better to the eye at a higher aspect ratio.
Unfortunately, my main difficulties resided with the chatbox. While I was able to add frequently asked questions to what the AI coded easily enough, I wasn't sure how to make the chatbox respond when a user types in only part of the matching question criteria, rather than only responding back to the exact phrase hardcoded in. As such, I've included my prompts here to show that the chatbox does work, albeit in a restricted way:
- What are your services?
- How can I contact you?
- Where are you located?
- When was the museum founded?
- What is the mission of the museum?
- What are your hours?
- What kinds of toys are available for display?
I also was unable to hide the chat button once the chatbox screen pops up. While everything still works as intended, it can distract the user from where they must hit enter to have their message go through. Overall though, this was very much a worthwhile project to invest time into, both for enjoyment's sake and for continuing to build on my skills as a web developer.