diff --git a/common-content/en/module/itd/step-5/instructions/index.md b/common-content/en/module/itd/step-5/instructions/index.md index 6997ecf5a..269cc264a 100644 --- a/common-content/en/module/itd/step-5/instructions/index.md +++ b/common-content/en/module/itd/step-5/instructions/index.md @@ -99,11 +99,25 @@ Submit the link to your CodePen page in Step 5 on the [CYF Course Platform](http ### Important Notes About CodePen -- When writing your code in CodePen, you do not need to include ``, ``, ``, or `` tags (the editor adds them automatically). +CodePen provides two editing experiences: **Classic Pen** and **Pen 2.0**. The requirements for each are slightly different. -- CodePen has built-in features to help you check your code for errors: - - **Analyze HTML** → checks your HTML for mistakes - - HTML Analyzer - - **Analyze CSS** → checks your CSS for mistakes +#### Classic Pen -- To learn more about CodePen features, see: [How to Use CodePen – A Beginner's Guide](https://www.freecodecamp.org/news/how-to-use-codepen/). +- In the HTML editor, you only need to enter the content that belongs inside the `` element. Do not include ``, ``, ``, or `` tags. + +- To check your code for errors: + - **Analyze HTML** - validates your HTML and identifies potential issues. + - HTML Analyzer + - **Analyze CSS** - validates your CSS and identifies potential issues. + +- For a complete overview of Classic Pen features, see: [How to Use CodePen – A Beginner's Guide](https://www.freecodecamp.org/news/how-to-use-codepen/). + +#### Pen 2.0 + +- The `index.html` file must contain a complete HTML document, including ``, ``, ``, and `` tags. + +- To validate your code, use the W3C validation services. Open the Direct Input tab, then copy and paste your code into the validator: + - **HTML validation** -- https://validator.w3.org/ + - **CSS validation** -- https://jigsaw.w3.org/css-validator/ + +