Demonstrating Custom Code

1. Demonstrate using Custom HTML block using Gutenberg Editor or any editor you are using

This heading is written in custom HTML

This paragraph is also written in custom HTML. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

What the heading and paragraph above look like in the Gutenberg custom HTML block:

2. Demonstrate Editing Your WordPress CSS via the WordPress Customizer

Zakra page header without custom CSS
Page header after custom CSS. The header has been shrunk, the background color has changed slightly, and a dotted border has been added to the top while a solid border has been added to the bottom.
A 1px solid black border has been added to the top of the footer

3. Demonstrate how to edit HTML, CSS, JavaScript, PhP in WordPress pages

I selected an element and clicked the "edit as HTML" option from the drop down menu.
Then I added the "strong" tags to make the text appear bold.
I opened the drop down menu located in the top right and selected the "code editor" feature.
Using the code editor, I removed the strong tags I applied earlier.
Editing page specific CSS with the Simple CSS plugin by Tom Usborne.
Change made by CSS in last slide (since reverted)

4. Demonstrate how to add HTML in your sidebar, header, and footer.

Adding custom HTML to my theme's header from the customizer
Text shown in header (since deleted)
Adding custom HTML to my theme's footer
Text shown in footer
Creating a widget with custom HTML and adding it to the sidebar
Widget shown in sidebar