From the course: AI-Powered Development: GitHub Copilot in Visual Studio Code

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Generate CSS based on mock-up

Generate CSS based on mock-up

From the course: AI-Powered Development: GitHub Copilot in Visual Studio Code

Start my 1-month free trial Buy for my team

Generate CSS based on mock-up

“

This Word Frequency Analyzer site needs a new look. So I'm going to use an image to generate some new CSS for the site. This is what the original page looks like. And this is what the new styled page looks like. So switch over to Visual Studio Code. Let's talk about the branch. I'm currently in the Use Images branch. And this is the Word Frequency application. I made some changes. First of all, in the browser, we were looking at the old index HTML page and it's old associated style sheet. And then Copilot created, made some changes to styles.css, added a new CSS file called colors.css and updated index.html to use it. So how did I accomplish all this? Well, I first started by asking a question. It's easy to add an image to the chat. Just drag your image into the chat window like I've done here. Then you can hover over this to see what the picture looks like, or you can click on this to open it in a editor tab. My first question is, what is the color palette for this mock-up? And it…

Contents