1. Before you begin
This codelab shows how to how to use Duet AI for Developers to implement Material Design on a website. Once Material Design is implemented, you will iterate on the design, making changes to improve the user experience and add functionality. By the end of this workshop, you will be able to use Duet AI to create usable, user-friendly web pages using Material Design or a similar library without the need to write CSS.
Prerequisites
- An understanding of HTML, CSS, and Javascript
- A basic understanding of web design
What you learn
- How to implement styling libraries with Duet AI
- How to iterate on a design using Duet AI instead of manually tweaking CSS
- How to effectively prompt Duet AI to contribute code in your desired style
What you need
- Access to a Google Cloud Project with Duet AI enabled
- A web page to style, or at least a folder in which to create one
2. Setup
For this codelab, two things are necessary: access to a Google Cloud project with Duet enabled, and a web page for us to style. You can enable Duet in a new project by clicking on the Duet button in the top right of the cloud console clicking enable on the panel below.
As for the web page to be styled, feel free to use any web page you have handy. Alternatively, since Duet is enabled, you can ask it to generate one for you. If you ask duet a prompt like Write me a web page with a form to gather profile information, the result should be similar to this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Profile Information</title>
</head>
<body>
<h2>Get Profile Information</h2>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<input type="submit" value="Save Profile">
</form>
</body>
</html>
3. Implementing Material
Start by asking Duet to implement Material Design on our webpage with a prompt along these lines:Can you apply material design styles to this page?
NOTE: All prompts supplied in this codelab are examples. Feel free to use them as inspiration for your own quotes, and include context from your project for best results.
The response should be similar to this:
Material design is used for the purpose of this lab, but you could ask Duet to implement the library of your choice. If Duet imports a different version of Material than the one you were expecting, try supplying the desired version in your prompt.
4. Iterating on design
Duet can also work with you to iterate on the design of a webpage without the need to dig into CSS manually. Come up with your own prompt to ask Duet to iterate on this design. For the best results in tasks like this, focus on describing the elements you're interested in changing and their desired outcome as concisely as possible:
Can we center the content on this page?
You can also have Duet add functional elements to our page. Ask Duet to add more fields to the form or add additional functionality:
Can we add some more fields to this form, like phone number, email address?
5. Organization
You can also have Duet organize its results into the place that's most usable for our project. In this case, since the focus is on iterating on the design in this one file, a style tag is ideal. Ask Duet to contain its responses into a style tag to avoid having to apply its changes to several as you go:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Accessibility
As stated in Material Design, accessibility and usability are essential elements of design. With that in mind, try asking Duet to make sure that our inputs are using the correct types. This will ensure that they're picked up properly by accessibility tools like screen readers.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Conclusion
Congratulations on completing this Codelab! You have w learned how to use Duet AI to implement Material Design on a webpage. You also learned how to iterate on the design and organize the generated code. This new skill will allow you to create usable, user-friendly web pages using Material Design or similar libraries with minimal setup.