Understanding the Project Files
Our primary project file for today's workshop is programming_basics.html, located in the same directory as the final.html file we opened earlier.
However, we do have a separate CSS file called styles.css. This CSS file is linked to the programming_basics.html file with a <link> element in the head of the HTML. We do not plan on adding or changing any CSS code today, but keep in mind that the styles for the page do depend on the CSS file. If you do move the HTML file or upload it to a server, know that you will have to also move the CSS file into the same directory in order for the styles to remain intact.
There are no images or other asset files for today's project. By the end of the workshop, the only two files the project will require are programming_basics.html and styles.css.
Opening the Page in a Browser
In order to preview the changes that we make to programming_basics.html we must open it in a web browser. After we open it, we will keep it open throughout the rest of the workshop. Whenever we make a change in the code, we will simply save the file and reload the web browser window to see the changes.
Step 1. Open programming_basics.html in a web browser.
Opening the Page in a Code Editor
Let's open the same HTML file in a code editor, so that we can start making some changes to our project.
Step 1. Launch a code editor of your choice.
Step 2. Open programming_basics.html in the code editor.
NOTE: You may need to turn on word wrap or text wrap in your code editor.
Placing the Script Element
The <style> element, however, can be placed most places in an HTML document without any trouble. With the <script> element, we have further considerations.
Step 1. At the bottom of the document, place the cursor at the blank line right above the closing <body> tag.
Step 2. To create the <script> element, type:
Exiting code block
Testing the Script Element
Debugging with the Console
Being able to send values to the Console is particularly useful whenever we want to check a value of something in our script without altering the content on the page.
Step 1. To send a message to the Console, within the <script> element, type:
Exiting code block
Step 2. Save programming_basics.html.
Step 3. Switch back to the browser that has programming_basics.html open.
Step 4. If necessary, open the browser's Console window.
Step 5. To refresh the page in the browser, press: