AI Assisted CSS Styling
Instructions
-
First, look at the CSS selectors in the <style> tag of this page,
and make sure you understand each of them.
-
Use AI to style the book list below.
-
Have the AI generate at least 3 different versions of the styled book list:
-
Make sure to include the HTML code for the book list in your prompt,
so that the AI can understand how the content is structured.
-
To get different versions of the list, alter the prompt you enter
(for example you might tell the AI to make one version "fancy",
another version "minimalist", and another version "colorful").
- You may want to tell the AI to keep the CSS somewhat simple so you can understand it.
- Make sure to review the CSS code that AI generates, to help you learn CSS.
- You should ask the AI questions about the CSS it generates (you could tell it that you're a student in a Web Programming class).
- Make sure to create at least one version that uses 'cards'
-
After experimenting with AI:
-
Choose one version of the AI generated lists and apply the CSS to the book list on this page, but make sure that your CSS only affects the book list and not other elements on the page.
- Answer the question under the list.
Books
-
Harry Potter
Author: JK Rowlings
This book is about a young wizard, and his young wizard friends.
View details...
-
On the Road
Author: Jack Keruac
This book is about a young person who goes on the road and has many wild adventures.
View details...
-
For Whom the Bells Toll
Author: Jack Ernest Hemmingway
This book has the saddest ending imaginable. It made me cry!
View details...
Question
What are 3 things you learned about CSS from doing this activity? Replace the content in the LI elements below with your answer.
- AI is fairly good at this.
- Its substantially faster to have AI perform negligble tasks. Especally since I'm not an artist of
graphic disigner.
- The prompts are extremely important.