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

On a much smaller screen

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.

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 - Submit

Please submit the following on the CYF course platform:

• 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

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:

• You have submitted a link to your CodePen containing the solution
• You have submitted a screenshot which meets the requirements in the instructions
• You have submitted a link to your conversation with the AI
• You wrote the code in your CodePen yourself. You didn’t copy+paste it from an AI tool

Submission

You must do this on the CYF Course Platform.

1. Submit 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)
2. Submit a link to your chat with the AI
3. Submit a screen shot of the output in CodePen

When you have a question, ask it.

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.

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:

You will need to use media queries.