AI and Coding (March 1)

To Do This Week

DUE: AI VIDEO & AUDIO: Complete the video project by adding generative AI sound and music.

Read:

Blog Prompt: Create a Chat in ChatGPT and describe a basic website. Give some sense of the layout, colors and typography. Ask that the response be coded in HTML5 and CSS as one HTML page. Download the file and open it in a browser. 

After reading the articles above and performing the coding exercise, share your thoughts about what this all means for the future of coding. What does AI mean for software, game, app and web development?  What are your concerns about the profession and what do you see are the opportunities? How might this affect your own future plans?

View AI Videos…

Talk

 

In-Class Activity: Building Your Band’s Website

Overview

You have already created a backstory for your fictional band, complete with band members, album songs, lyrics, and even interviews, all generated with the help of Generative AI. The next step is to present this fictional band on the web. Your group task is to code a single-page website from scratch using HTML5, showcasing all the content you’ve created.

Instructions

  1. Plan Your Website:
    • With you group or partner, sketch a simple layout or wireframe for the web page. Consider including a header, a main section with sectioned areas for band content (such as bios, discography, media) and at the bottom, a footer.
    • A navigation bar with anchor links are optional
    • Effects or animations with JavaScript are optional
  2. Set Up Your Project:
    • Create a new folder on the computer to hold your group’s website’s files. This will help keep your project organized.
    • Inside this folder, create the main HTML file named index.html. This will be the default page.
  3. Coding the Website: 
    • Craft a Prompt: Work at the language to describe exactly what you want for your layout, typography, colors (general) and responsiveness. Include information that identifies how content should be displayed and structured in a flow down the page. The clearer you are the better the results. Specify that you want a single page with HTML and CSS.
    • Copy and Paste the generated code into index.html: Use Sublime Text as the text editor.  Make sure the site is working properly. Fix issues in layout – use borders on elements! * { border: 1px solid red; }
    • Integrate Text and Media: As you build each section, integrate the AI-generated content. Ensure that text is readable and that images are appropriately sized. Add sound and video files. 
    • Styling: Adjust CSS to style your page.
  4. Review and FTP:
    • Check your website for consistency in navigation and style.
    • Use Cyberduck to upload folder to the server. Remember files and folders should be lowercase with no spaces!
    • Link the site for the group project in a blog post.

Example Prompt for the Homepage:

“Use HTML5 to code a one-page website with a header, navigation menu, main content area introducing your band, and a footer. In the main content area, include a placeholder for a catchy headline with the band’s name and a short paragraph summarizing the band’s music style and history, followed by a two-column grid with an image placeholder of the left and text on the right”

https://alanwarburton.co.uk/

World-building Online Exhibition (5%)

DUE: March 22nd

Overview

Following the development of your world-building projects, where you’ve created descriptions, images, and videos to bring your unique world to life, the next phase is to create an online exhibition about your world, its environment, economy, foods, beliefs etc.. In this assignment you are to code a single-page website from scratch using HTML5, CSS, and optionally JavaScript, to showcase the rich lore, geography, and narratives of your world. This project is an opportunity to blend your creative world-building with technical web development skills, using ChatGPT to assist in coding.

Goals

  • Showcase Your World: Create a single-page scroll website that visually and textually presents your world in a compelling and immersive manner. This of the details in the Codex Seraphinianus.
  • Display AI-Generated Content: Integrate the descriptions, images, and videos you’ve created, ensuring a narrative flow that guides visitors through your world.
  • Enhance Skills in Web Design: Use HTML5, CSS, and JavaScript with the assistance of ChatGPT  to build a webpage that is both functional and aesthetically aligned with the theme of your world.
  • Incorporate Interactive Elements: (Optional) Use JavaScript to add interactive features such as image sliders, video players, or animated transitions to enrich the user experience.

Instructions

  1. Planning:
    • Draft a layout for your webpage, including a header, a main content area for your world’s introduction, sections for various aspects of your world (like lore, geography, characters), and a footer.
    • Consider how users will navigate your content. While a single page, anchor links can provide quick navigation to specific sections.
  2. Setup:
    • Create a new folder on your computer for your project files. 
    • Gather media files and organize within project folder.
    • Begin with an index.html file as your webpage’s foundation.
  3. Coding with ChatGPT:
    • Craft a Detailed Prompt: Clearly articulate your vision for the layout, including typography, color schemes, and how your content (text, images, videos) should be displayed. The more detailed your prompt, the better ChatGPT can assist in generating the HTML and CSS code.
    • Integration: Insert your AI-generated descriptions, images, and videos into the designated sections of your HTML file. Pay attention to how each piece contributes to the narrative of your world.
    • Styling and Interactivity: Use CSS to style your webpage according to your world’s theme. Optionally, use JavaScript to add dynamic elements or animations that enhance storytelling.
  4. Review and FTP:
    • Ensure consistency in design and functionality. Test your webpage in different browsers to catch and correct any issues.
    • Use Cyberduck to upload your project to a web server. Remember, file and folder names should be in lowercase and without spaces!

Grading Criteria

  • Content Integration (30%): Quality and creativity in how the world’s descriptions, images, and videos are presented.
  • Design and Layout (25%): The webpage’s visual appeal and thematic alignment with the world’s concept.
  • Functionality (20%): The webpage must be navigable, with all links and interactive elements working correctly.
  • Code Quality (15%): Well-structured HTML and CSS, with clean, readable code. JavaScript code (if used) should be efficient and bug-free.
  • Creativity and Innovation (10%): Use of interactive elements or animations to create an engaging user experience.

Example Prompt for ChatGPT

“Help me code a one-page website dedicated to showcasing my fictional world. The page should start with a header featuring the world’s name [WORLD NAME], followed by an introductory section that gives an overview of the world. Below, organize the content into sections for lore, geography, and notable characters, foods, beliefs. Each section should have an alternating two-column grid displaying image and related text. Include CSS for basic styling with a cohesive color scheme.” 

 

Leave a Reply

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