Intro to CSS Assignment #1 Solution

Note that if for any reason you do not have the textbook yet, you can actually do the entire assignment without it. We will use a pdf version of chapter 1 to help you out here, but note that this will NOT be the case in the next assignments! This was done deliberately for this assignment to allow us to get started right away but allow you a little more time to acquire the book.

Be aware that our textbook (like any book) does have a few errors. Fortunately, ours also has an "errata" page, where known errors are corrected and updated over time. For the most recent version, refer to this link to avoid problems in your work: http://oreilly.com/catalog/errata.csp?isbn=9781491918050

Recommendation: It is recommended that you do the appropriate weeks' "Recommended Assignment 1 Resources" from Canvas to properly prepare yourself for success on this assignment.

Part 1: HTML for CSS (Chapter 1 Questions)
20 Points

Before you can begin to write CSS to format your Web page content, first you have to be able to write and understand the HTML itself that structures your Web page content. Although you probably already know at least some HTML, this chapter stresses the proper HTML approach that will set you up for successful CSS.

If you have the textbook, browse the "introduction" on pages XIII - XXII (right before chapter 1), paying particular attention to any sections you are not familiar with. There may be some information useful to you in there. But there are no questions on that specific material so you can feel free to skip it if you are already familiar with it or don't have access to it.

Next, read Chapter 1, pages 3-20 in your textbook, entitled "HTML and CSS". If you do not yet have the textbook, use the link below to a pdf version of chapter 1 that the publisher made available as a sample chapter. Then answer the questions that appear in your "submission document". Your submission document is a Word file named "YourName-css-a1.docx" initially that you download from the Canvas assignments page, change its file name to include your own name, show your assignment work within, and later submit as your completed assignment. Answer the questions in the "Part 1" section of that document by bolding and highlighting your multiple choice answers as instructed there.

As needed, here is a link to a PDF version of chapter 1 (the same link is also available within within Canvas):

http://cdn.oreillystatic.com/oreilly/booksamplers/9781491918050_sampler.pdf

After you are done reading the chapter and answering the questions in part 1 of the submission document, continue on to part 2 below.





Part 2: Creating Styles and Style Sheets (Chapter 2 / Video Questions)
20 Points

Before you do any actual CSS coding, it would help to have a little further background on CSS. In this assignment part, there are some questions to answer based on reading the textbook Chapter 2 pages 21-27 (up to but not including the tutorial). If you don't have access to that chapter material yet, you should be able to answer the questions without that material if you pay close attention to the video linked to below and maybe rely more on the recommended assignment resources given in Canvas for this chapter. You might also benefit from a little Google searching as needed.

The "CSS Essentials" video is a great 5 minute starting point for us to get up to speed with some CSS terminology. You can find the video in Canvas in the "CSS" section of the "Recommended Assignment 1 Resources" document within the "Weeks 1 & 2" Module.

Note that similar information is also covered in the textbook chapter 2 pages 21-27, so you can supplement your understanding of the terminology with either resource.

After viewing the video and/or reading the textbook chapter 2 pages 21-27, answer the questions in your submission (Word) file like you did with the part 1 questions.

 

Part 3: Do As the Video Does -- "HTML5 and CSS3 Tutorial"
60 Points

For this part of the assignment, you are asked to watch, listen, and do the same steps as are done in the YouTube "HTML5 and CSS3 Tutorial" (Skateboard site) video made by your instructor. The links to this video and to the set of files you'll need are given below. Also below you wil find optional links to download the HTML/CSS code editor used in the video (Brackets) as well as an optional introductory video to introduce you to the Brackets editor should you choose to use it.

Link to YouTube HTML5 and CSS3 Tutorial video.
Link to Starter Files for Skateboard site video.
Optional link to YouTube Brackets introductory video.
Optional link to download Brackets editor.
By doing what the HTML5 and CSS3 video does, you will be adding CSS to format an existing 3 page web site for skateboard company. When you complete all of the demonstrated steps shown in the video, your pages should look just like the ones shown in the video and your code should match. At that point, return to the section below to complete this part of the assignment and collect the required items to place within your submission file.

After Completing The Video:

After completing the video work and achieving identical looking pages to those shown toward at the end of the video, you are asked to make the following change to your "boards" page:

On the boards page, within the "h1" at the top of the page, change the word "Complete" to your own full name. That way your name will be in large text at the top of the page like you own the place. If that heading now is so long that it wraps onto 2 lines, you can just use your first initial and last name and/or go to your style sheet and adjust the font-size for the h1 down from 50px to whatever is needed to fit it all on 1 line (one way or another get it to be 1 line and identify you by name). Also locate the "title" tags within the "head" section of your HTML. Replace "Joe Student" with your own full name there too. It will show up on the tab in the browser as shown in the screen shot below.  Then save your work. Now you are ready to collect your required part 3 work to paste into your submission file according the directions below.









What to Submit for this assignment part 3:

Open the "Boards" page in a browser. Make sure your full name shows up in the h1 heading as indicated above. Also make sure that at least the top of the 2nd skateboard should be visible toward the bottom of the browser window (if not, you will have to use 2 screen shots to get all of this required parts of the page). Obtain a screen shot of this boards page displaying in the browser. Paste this screen shot into the appropriate part 3 screen shot area within the given Word submission file that you downloaded from Canvas.

(If it does not all fit in your maximized browser window, obtain one screen shot with the page scrolled to the top, and a second one with the page scrolled to the bottom. Paste each screen shot, one at a time, into the Word file.)
Open your styles.css style sheet file. Select and then copy all of the CSS code in this file. Paste this CSS code into the appropriate part 3 code area within the given Word submission file. Do not paste a screen shot of your code -- copy and paste the actual text that is your code. And make sure you are not pasting the HTML code -- I need to grade the CSS, not the HTML!
 

Part 4: Beyond The Video -- Make Some Further Changes!
50 Points

For this part of the assignment, you will continue your work with the 3 page boards site and make a few additional CSS changes. Those changes are discussed below:

Open your "contact" page in your editor. Add your name into the "h1" heading, as you did on the "Boards" page at the end of part 3 above. Also locate the "title" tag within the "head" section of your "contact" page, and insert your name there too. Save your contact page, display it in the browser, and confirm your name changes are working.
Return to your editor and open your style sheet file, "styles.css" in your editor. Scroll to the bottom of the file. On a new line, type the following:

/* Beyond the Video by Joe Student */

where you type your own actual name instead of "Joe Student" and where you carefully type every character shown above, including the /* and */ without any spaces between them so that they will behave like a proper CSS comment in your style sheet.
Hit "Enter" a few times to go below your CSS comment so you will be ready to create a couple more CSS rules.
Now you are ready to make a few new CSS rules. First, let's make the h2 headings stand out a little more than they currently do. To do so, create the appropriate CSS h2 selector and then set its background color to whitesmoke and its color to darkblue. This should really make it stand out.
Next we will make the h3 headings look a little more distinct. Create a selector for h3 (as you did above for h2), and then set top margin for h3 to 35 pixels and its color to darkblue.
Save and test your site's pages in the browser to see how they look.
Validate your CSS to make sure your changes were done correctly.
Find a new background image for the h1 that will work. The easiest way to do this is just to do a Google image search for something related to skateboards or skateboarding, and find an image that is a lot wider than it is tall and will go well with the existing site's colors (I went with something dark and blue.) When you find the right image, just save it into your site's folder using a filename that is very similar to the existing background image. Then adjust your style sheet's background image property for "header" from "bg-banner.jpg" to whatever your new image is named.
Save and then test your new background image in the browser. Navigate to the "Contact" page. Compare your results to my sample screen shot below. When you are satisfied with the results, you are ready to create your own screen shot and code copy, as described below.




What to Submit for this assignment part 4:

With your "Contact" page open in a browser and your part 4 changes on full display as shown in the sample screen shot above, including your name on the browser's tab and in the h1 heading, you are ready to create your own screen shot. Obtain a screen shot of this contact page displaying in the browser. Then paste this screen shot into the appropriate part 4 screen shot area within the given Word submission file that you downloaded from Canvas.
Open your styles.css style sheet file. Select and then copy all of the CSS code in this file. Paste this CSS code into the appropriate part 4 code area within the given Word submission file. Make sure that you are pasting the actual CSS code and not a screen shot of it. And make sure you are not pasting HTML code -- I need to grade the CSS, not the HTML!




Before submitting to Canvas:

Before you submit your completed Word file into Canvas, always double check to make sure you have submitted all of the required parts for the assignment. Also, be sure that you save your Word file, and then you exit out of Word. Then go into Canvas and submit for your assignment. Never submit a file into Canvas that is still open in another application. Note that you should submit an actual Word document, not some other formatted document that you hope Canvas will convert into something that can be graded. Canvas may not even accept your file if it is not a Word file. Do that conversion work yourself outside of Canvas as needed and submit an actual Word document into Canvas. If you submit something that is not gradeable within Canvas, you will be asked to resubmit the proper formatted document and your lateness deductions will be based on the time of your final submission, not the first one.