# data[].attributes.headline
By the end of this lesson, students will be able to:

# data[].attributes.subject
By the end of this lesson, students will be able to:

# data[].attributes.body
1. Create a basic HTML structure for a web page
2. Apply CSS styling to HTML elements
3. Use Notepad++ effectively for coding
4. Understand the relationship between HTML and CSS
5. Create a simple, styled website

# data[].attributes.body
This lesson aligns with the Australian Curriculum: Digital Technologies (ACTDIP040) - Design algorithms represented diagrammatically and in structured English and validate algorithms and programs through tracing and test cases.

# data[].attributes.body
A short, 10-question online quiz to test understanding of key concepts covered in the lesson.

# data[].attributes.body
Students write down:
3 things they learned
2 things they found interesting
1 question they still have
Collect these as students leave the class.

# data[].attributes.body
Students play an online game that reinforces CSS concepts in a fun, interactive way.

# data[].attributes.attachment_link.title
6 Free CSS Games and Challenges for Mastering Front-End Skills in 2023

# data[].attributes.attachment_link.description
Boost your CSS skills with six free games and challenges for 2023. Make learning fun and effective as you master your craft.

# data[].attributes.body
Students find and analyze 3 websites they like, noting specific HTML elements and CSS styles they want to try in their own projects.

# data[].attributes.headline
Download and install Notepad++, click on this link to access the download

# data[].attributes.subject
Download and install Notepad++, click on this link to access the download

# data[].attributes.body
The first thing we are going to change is the title of the page. Look through the html code and at the top, you will see the word title on line 7. In this area, there is the title of the page which appears in the Google Chrome tab.

Replace the title on the ProfileTemplate.html page with your name.

Save the file.

Refresh the ProfileTemplate.html page in Chrome, or double click on the file again.

# data[].attributes.body
We can start to change the design of our website by changing the images and colours.

# data[].attributes.body
You have the option to change the profile picture and remember only upload a picture of yourself if you are comfortable.

# data[].attributes.body
Guide students through setting up Notepad++ for web development. Show how to create and save HTML and CSS files.

# data[].attributes.attachment_link.title
Notepad++ Tutorial for Beginners: Learn How to Use a Simple & Powerful Code Editor