Basic HTML5 structure, Headings, Paragraphs, Lists Assignment #1 Solution

Before you begin this assignment, you should download the assignment’s submission file ("YourName-html-a1.docx") from Canvas. This is the file you will be inserting (pasting) your work into after you finish each part of the assignment, and then eventually submitting into Canvas to be graded. It is a Microsoft Word 2013 file, so you must have a version of Word (2013 or newer) that you can use to edit that file in order to do the assignment and submit it successfully. (The MLK-219 lab has this software, by the way.) You may be asked to paste screen shots or code into that file. Be mindful to always carefully read the instructions and submit the proper items that are asked for so you can maximize your score and minimize the deductions.

Note that this assignment relies on videos and not on the text book to allow you more time to obtain your book. Future assignments will require the textbook.





Part 1: Brackets Video

For this part of the assignment, you are asked to watch, listen to, and perform the same steps as demonstrated in an instructional video that covers an HTML editor called "Brackets". The link this video is given below. This YouTube video is about 12 minutes long. (Standard YouTube "closed captioning" is available as needed, using the "CC" icon toward the bottom of the video window.)





Step 1: Watch and do as the video does:

https://www.youtube.com/watch?v=5HDqzFq4kfM

As you watch the video, do the same steps yourself on your own computer. In doing so, you will be downloading and installing the “Brackets” editor, loading some Brackets extensions, and then creating a small web page as shown in the video.

Note that if you are doing this assignment step on a computer that already has "Brackets" installed (such as in the RCC computer lab, you should update it to the latest version if it is not already (Brackets will prompt you to do this whenever you launch an older version.) That way all students will be working with the same version of Brackets.





Step 2: After the video, prepare for a screen shot:

If you followed along with the video properly, you will have an html document open inside of Brackets as shown towards the end of the video. Make the following adjustments to this document. Note that each of the items below are going to be worth points so be sure to take care of each before obtaining your screen shot in the next step:

If you have the same “CSS Lint” and “Emmet” lines as shown in the video at around 11 minutes and 30 seconds, then delete those 2 lines to return your document to the state as shown in the video at around the 11 minute mark.
In the “title” tag (line 6 in the video), replace the words “My Title” with the words “Assignment 1, Part 1”.
In the “h1” heading (line 10 in the video), replace the words “My Heading” with your own full name (as it appears on the class roster.)
Use the “Beautify” extension to make your resulting code looks “beautiful”.
Save your resulting document and use the Brackets “Live Preview” feature to display it in the browser. The title and h1 heading should be able to be seen.
Arrange your Browser (Live Preview) window and your Brackets window (resize and move as needed) so that the relevant parts of both can be seen simultaneously, as was done in the video at around the 11 minute mark.
The tags in your code should exactly match those in the video. Make sure all of the code is visible.
The Beautify and the HTML Skeleton extension icons should be showing along the right hand edge of the Brackets window in your screen shot (like they are in the video.)




Step 3: Paste your screen shot into your submission file:

After preparing your Brackets and Live Preview windows as indicated above, create your screen shot. (In recent versions of Windows, there is a screen shot tool within the Windows Accessories group called "Snipping Tool" that can be used to copy an image of a specific portion of the screen – there is also typically a "PrintScreen" key that copies the entire screen. Macs have some apps that you can download and install to do this as well.)
With your submission file ("YourName-html-a1.docx") open in Word, paste your screen shot in to the part 1 screen shot area of the document (towards the top of page 1).
After pasting in your part 1 screen shot, use Word's "File" and "Save As" menu commands to save your submission file using your own first and last name instead of the words "YourName" in the original downloaded filename (use hyphens or dashes instead of spaces).
Now you are ready to move on to part 2 of this assignment.




Part 2: HTML5 Resume Video

For this part of the assignment, you are asked to watch, listen, and follow along with the steps demonstrated within the "HTML5 Resume" instructional video. This YouTube video is about 31 minutes long. (Standard YouTube "closed captioning" is available as needed, using the "CC" icon toward the bottom of the video window.)

The video covers some introductory HTML concepts such as basic HTML5 tag structure, main content tags (such as headings, paragraphs and lists), semantic tags, and HTML validation. It uses the Brackets editor and you will find it much easier to follow along with the code it is generating if you use it too. See the part 1 video to download and install Brackets.





Step 1: Watch and do as the video does:

You will be using the “Brackets” editor (and a few Brackets extensions) to help create a resume web page from scratch. The video is linked to below

https://www.youtube.com/watch?v=6BoW9TMZOMw

Word your way through the video, doing everything that is done in the video on your resume page. Note that you should NOT insert any of your own information into the resume at this point – you should just create the exact same generic resume information that is presented in the video. Later, you will have an opportunity to customize some parts of the resume according to the guidelines given in the next step.





Step 2: After the video, modify your resume page:

If you followed along with the video properly, you will have an html5 resume document open inside of Brackets as shown towards the end of the video. Make the following adjustments to this document. Note that each of the items below are going to be worth points so be sure to take care of each of them.

Change the "title" to include your full name instead of "Joe Student"
Do the same with the "h1" heading.
Replace the "joestudent@gmail.com" email address with your own RCC email account.
In the "Skills" section of the resume, replace all 3 of the listed skills and replace them with skills that you actually have. They can be real job related skills, but they could also be just some interesting or unusual skill that you have even if it is totally unmarketable.
Change the tags within the education section as needed so that its listed items show up as a bulleted list instead of as a numbered list.
Change the 3rd list item within the education section so that it more accurately reflects your own current educational status and your plans and goals. Be specific and truthful while also being brief.
Add a 2nd job to the "Work Experience" area. The HTML tags you use should match the ones that were used for the "Fidget Spinner Salesperson" job (an "h3" heading following by a "ul" with list items that contain the same type of information as the existing job). Just add one job, and its list should contain 3 or 4 items. You can either use a real job you have or had, or you can just have some fun with it and make up something. I am more interested in your HTML tags than I am your work experience!
To the "References" section, add a 3rd person using a joke name like the 2 existing names. Make up a related company name and phone number. Place your new reference as the last (3rd) name in the description list. Follow the same HTML coding approach to your name as was used for the others in that section.
Your name should appear instead of "Joe Student" in the footer.
Make sure that your HTML5 code validates according to the W3C's HTML markup validator (as shown in the video).
Make sure that your HTML5 code has no missing closing tags (as shown in the video).
When you are all done with the above changes, "Beautify" your code.
Save your modified resume page in your editor and preview it in a browser. Make sure that it looks as it should in the browser.
When all of the above items have been taken care of, you are ready to place some evidence of your work into your submission file according to the guidelines given below in the next step.





Step 3: Paste your work into your Word submission file:

There are 2 different items you need to place into your submission file for part 2. :

Screenshot(s) showing your entire resume in the browser
All the HTML code for your resume page.
The guidance below will clarify how to best present these 2 important aspects of your submission for grading purposes:

SCREEN SHOT(S):
With your completed resume page displaying in the browser, you are ready to obtain your screen shot(s). If your entire resume page (from the main heading at the top to the footer at the bottom) all fits on one screen (without any scrolling), then take that one screen shot and paste it into your submission file as you did for part 1. But if it cannot all fit (because it is too long), then use 2 (or more) screen shots, scrolling down as needed and pasting each screen shot separately to cover your entire resume page. For grading purposes there will be a deduction if the entire resume page is not represented by the screen shot(s) you paste into your submission file. When pasting, paste your screenshot(s) into your Word submission document in the indicated "Part 2 Screen Shot(s)" section.
CODE:
With your resume HTML code in your editor (such as Brackets), select and copy all of the HTML code (from the DOCTYPE all the way down to the closing “html” tag). Make sure to get it all. Then paste this code into your Word document starting on a new page (below your screenshot) in the "Part 2 Code" area. After pasting the code into Word, with it all selected, set the font of this code to “Courier New” (or another monospace font of your choice) and bold it as well – these changes should help to make it more readable for grading purposes.

Note that this code pasting should NOT be a screen shot of your code, it should be the actual text of your code that you are pasting. That way I can copy and paste this code into a tool of my own for grading purposes. If you screen shot the code, it is all one big image and I cannot access the individual lines of your code as may be necessary to grade it and it will result in deductions.








Step 4: Submit your Word submission file:

After pasting the part 1 screen shot , the part 2 screen shot(s) from the browser, and the part 2 code pasting, as indicated above, then save this Word submission file, making sure that your own name is part of the file’s name (as you were instructed to do in part 1 above). After saving, exit Word. Do not try to submit your Word file if it is still open in Word.

With your Word submission file saved with your name as part of the filename and after exiting Word, it is time to get back to Canvas. Next, from our Canvas class home page, click on the "Assignments" link to get to the "Assignments" page. On the "Assignments" page, click on the link for "Assignment 1". From the assignment 1 page you should then see a "Submit Assignment" button. After clicking that button, you should be able to upload and submit your Word submission file. You should submit just this one Word file. Do not submit other files. There is no need to type anything, just submit your file (unless you feel it is really super important for grading purposes that you explain something.) Submit only once, when your work is complete. Remember that lateness deductions will occur if it is after the deadline so get it in on time if you can. The syllabus has the details on lateness deductions.

Note: if you ever make a mistake and submit the wrong file, you will have to email your instructor and request that he delete your submission so that you can re-submit the correct file. Any time lost due to this communication will count against your own submission time, so always be careful to submit the correct file the first time. That concludes the guidelines for this assignment.

When your assignment is graded, look at the actual file you submitted – if there were any deductions at all, they will have detailed grading feedback right inside that Word file you submitted. That way you can learn about any deductions that were taken and try to avoid those issues in future assignments and web pages that you build.