The exercise is currently being refined.
Introductory Video
This video will guide you through the majority of the exercise. I recommend opening it in a separate window so that you can toggle back and forth between it in the written instructions.
[Instruction video will go here]
Step One – Download
To begin, download the exercise zip file from Brightspace and click on it to open it. You should see a folder that contains a text file named dhexercise.txt and a JavaScript file labeled dhexercise.js. For the remainder of the exercise, keep all of the files in the folder.
Step Two – HTML
1: Open the file dhexercise.txt, which includes the barebones of an HTML doc.
2: In the title tag <title>, located in <head>, add an appropriate name for the page, e.g. HTML and Coding. Note that it is not in the <body> tag. This is because <title> is not part of the page content, it is metadata that describes the page. Therefore, instead of appearing in the page, <title> will appear in the page’s tab at the very top.
3: In <body> add the tags for header 1 <h1>, header 2 <h2>, and a paragraph <p>. (Don’t forget to always add closing tags.)
In <h1> HTML & Coding Reflection
In <h2> write your name.
In <p> write your assignment two paragraph reflection.*
*Since you won’t have your paragraph until you have completed the assignment, put temporary “dummy text” here and then replace it with your reflection once you are done. Dummy text is filler text that is used for moments like this when, as a designer, you are anticipating text but don’t have it yet.
4: Save your file as an HTML file. This means saving it with an .html extension. In your text editor, select “save as” and rename the file dhexercise.html. If it asks whether it should use the .txt or .HTLM extension, choose .HTML and close it.
5: Reopen the file by clicking on it and notice that it now opens in your web browser.
Note: To edit the HTML file, you will need to open it back up in the text editor. To do this either drag the file to the text editor or within the text editor selected “File” then “Open” and located the file.
Step Three – CSS
CSS can be placed in a separate file and be linked to from an HTML doc; it can be placed within the header of an HTML doc; and it can be placed within an HTML tag.
Why you would put it in one place or the other depends on what you are trying to achieve. If you want a style to apply across your whole website, you definitely want to create a separate CSS doc that can be linked to all of the HTML pages. This way, when you make a change to the CSS, it will affect the entire site globally and you won’t have to make changes to each individual page. There are times, however, when you might want to make a simple change to a single HTML tag, and it might just be easier or more logical to add CSS to that tag.
1: Create a new text file using a text editor. Save it as dhexercise.css in the downloaded exercise folder so that it is in the same folder as the HTML and JavaScript file.
2: Link the CSS file to the HTML doc by adding the file name the following tag found in the HTML doc <head>:
<link rel=”stylesheet” type=”text/css” href=”INSERT FILE NAME“>
3: In the CSS file, change the styles of the tags <h1>, <h2> and <p>. You can make simple changes, or you can go wild. Here is a very basic CSS example (notice one of the tags you need to work with is missing):
h1 {
color: #476b6b;
text-align: left;
}
p {
font-family: times;
font-size: 10px;
}
To get started, I recommend you cut and paste this CSS into your CSS file to see what affect it has on the HTML and then play around with the styles. These sources will help you find more style options:
w3school HTML color picker
w3school web safe fonts
w3school page margins
More can be found in these guides from W3 School and from cssreference.io
To see the changes made in the HTML doc, make sure to save the CSS file and refresh the HTML doc, which should be open in a web browser.
Note: To edit the CSS file after you have closed it, you will need to open it back up in the text editor. To do this either drag the file to the text editor or within the text editor selected “File” then “Open” and located the file.
Step 4: JavaScript
1: Link your JavaScript file to the HTML doc by adding the following tag to the <head> tag. Put it below the CSS tag. Where is says, “INSERT FILE NAME,” put the JavaScript file name, dhexercise.js.
<script src=”INSERT FILE NAME“></script>
2: Play with how fast or slow the webpage fades in by changing the number in .fadeIn(900). Each time you make a change, save the JavaScript file and refresh the HTML doc in your web browser.
Troubleshooting:
If you are having trouble, one or more of the following might be going on:
1. You are missing a closing tag in your HTML doc. For example, you put an <h1> and forgot to close it with an </h1>
2. You forgot to put a semicolon or bracket at the end of your CSS style.
3. You have a typo, e.g. the CSS is not working because you typed the CSS file name wrong in the HTML doc.
4. You don’t have all of the files in the same folder.
Reflection prompt:
Write a short reflection (2 to 3 paragraphs) that describes your experience. If this was completely new to you, how did it impact you understanding of websites/website development? What about it did you find interesting? How difficult was it for you? If this was too basic for you, talk about your experience with website development and explain some concepts that you think should be added to the assignment to make it more challenging. In other words, how could the assignment be risen to your level?
Your reflection should be included in the HTML document you are turning in.