🤖 Six

Practice using AI appropriately

🔖
  1. Instructions
  2. Acceptance Criteria
  3. Submission
  4. Help
  5. Extensions

🤖 Step 6: What to do

Overview

As covered in step 2, generative AI tools such as ChatGPT can be a great help in your studies with CodeYourFuture. However, the way you use them is very important. These tools can just as easily be a great obstacle to your learning if you let them do your thinking for you.

This step is an opportunity to practice this with a practical task which is outside your current knowledge of CSS and HTML. We have provided a CodePen which contains some HTML code. Your task is to use CSS to style the HTML so that:

  • The element with the class of “parent” has a dotted border
  • The element with the class of “parent” is centered on the page even if the screen size changes
  • The div elements with the class “child” have background colors, borders, rounded corners and margins between them.
  • The div elements with the class “child” stay inside the element with the class parent even if the screen size changes

You must not change the HTML in anyway.

You may use any colors you like - they aren’t the important bit in this task.

Here are some visual examples:

On a large screen

alt text

On a much smaller screen

alt text

Assuming you were new to HTML and CSS when you started this course, this task is outside your current knowledge. This makes it an excellent candidate for AI assistance, as you can use AI to help you understand the new concepts.

What Should You Do?

You are not allowed to have AI write code for you. You must write your own code.

1 - Fork the CodePen

Fork the exercise CodePen into the CodePen account you created in step 5.

2 - Make a Plan

Start by thinking about what you need to know to solve this problem. What might be a good first question to ask the AI? How can you avoid having the AI do your thinking for you?

3 - Interact with the AI

Use an AI tool to help you solve the problem. This can mean asking it to explain concepts, provide examples, explain code, etc. It must not mean copying code from the AI or blindly following its advice without understanding why. You may wish to look at step 2 again and/or search resources for using AI appropriately. If you’re stuck, Google or ask in the #step-6-questions-support channel on Slack.

📝Note

You will need to submit a link to your AI chat, so please use an AI tool which allows for chats to be shared by link, such as ChatGPT or Gemini.

5 - Self Check

Look over the code you have written. Do you understand it all? Has any been pasted from an AI tools or elsewhere? Review what worked and what didn’t when prompting the AI.

4. Create a Google Doc
  1. Create a Google Doc
  2. Place your answers for each of the questions above into the doc
  3. Add one to three sentences explaining why you chose the answers you did

📝Note

If you are new to Google Docs, you may find this guide on what Google Docs is and how to use it useful.

5. Put your name in the document name

Include your given name or your family name in the title of the Google Doc.

💡Search the Web

How to change document name in Google Docs

6. Make your Google Doc public

Change the sharing settings of your Google Doc to “Anyone with the link can view”.

💡Search the Web

How to share Google Docs to public

7 - Fill out your Doc

Please add the following to your google doc:

  • A link to your CodePen (please note that volunteers probably won’t give you a full code review but this is useful context for them)
  • A link to your chat with the AI - Instructions to share links to Gemini chats are here and to ChatGPT chats are here
  • A screen shot of the output in CodePen

Submit the link to the Google Doc in Step 6 on the CYF Course Platform.

✅ Step 6: How to check your work

A volunteer will review your submission and check that it meets the acceptance criteria. They will give you feedback on your submission and help you make any changes needed to meet the criteria.

Here are the criteria you need to meet:

📩 Step 6: How to show us

Submission

You must do this on the CYF Course Platform.

  1. Submit a link to your Google Doc

How to get help

When you have a question, ask it.

💡Code Your Future is a Community

Remember, Code Your Future is a community of adults sharing skills. We are all here to help each other, and learn. You are meant to ask questions at Code Your Future.

When you see someone else has a question, help them if you can.

First, visit our frequently asked questions page

When you have questions about coursework, ask in a workshop🧶🧶 workshopCode Your Future Workshops are meetings where you can get technical help. or in Slack🧶🧶 SlackSlack is messaging software - once you have downloaded Slack you can visit our Slack workspace to ask your questions.

You do not need to wait for a workshop to ask a question. You can ask questions in Slack at any time. We are here to help you understand and complete this course. Our goal is to help you learn.

👀 Step 6: Extend Your Skills

Add Responsive Design

This is an additional task for those who want to stretch themselves and try something else. It is not compulsory in anyway.

The task is to make the page look like the below on screen sizes below 500px wide:

alt text

You will need to use media queries.