1.4 Assignment - Let's Start Coding!
"For this assignment, you will be creating a webpage using Moodle's HTML editor and using HTML tags. The topic of the webpage is "Thinking like a programmer. " You will actually be typing your webpage into the assignment box using HTML code.
Step 1
Start by clicking on "Add Submission" below, then navigating to the text editor. This kind of editor is sometimes referred to as WYSIWYG for "what you see is what you get."
You will need to use the editing bar at the top of the editing box. Click on the down arrow (circled in red) to expand the menu.
Step 2
Click on the html icon which looks like this "</>" You can now type or paste html code into the box. You will need to click on the HTML button again to see the effects of the HTML tags on your text.
Below you will find a file called "How to think like a programmer." You will need to open that. It contains plain text. This means that it has no formatting. This is what you want to use for any kind of coding including html.
Copy and paste the text from that file into the html editor.
Step 3
In order to format the text, you will need to refer to the page "HTML Basics" in this lesson.
- Type this title at the top of the page: How to Think Like a Programmer
- Open and close an h2 tag for that headline
- You will find the sub-headings: What is the programming mentality? and Break things down into building blocks. Open and close an h4 tag for those subheadings
- put in tags for paragraph breaks where needed
- Do an image search for "programmer" without the quotes. Copy the image link for the first image that appears. Include that image after the sentence: "Plus, we’ll share tips to help you get there, too." The image should be no more than 600 pixels wide.
- Do a video search for "How to think like a programmer." Copy the embed code for the first video that comes up. Embed that video right after this sentence: "You simply learn how to approach a challenge or problem, and that is a skill you can apply every time you code."
- At the bottom of the page, write "This page coded by (insert your name)" then make the text green by using the tag below.
<p style="color:green">