IT 270 Module Two Practicing CSS Basics
IT 270 Module Two Practicing CSS Basics
In the first seven videos of the “Styling Your HTML” section of the “Front-End Web Development Quick Start with HTML5, CSS and JavaScript” module on Pluralsight.com, you watched—and hopefully followed along using the “before” versions of the exercise files—how the index.html and site.css files were edited and expanded to create the final version of the webpage displayed when previewing index.html in a browser window.
In this exercise, you will start with the “after” (or finished) version of the index.html file and add several additional pieces of content and styles, based on what you have learned from the first seven videos of the “Styling Your HTML” section.
Step 1. First, navigate to the after subfolder of the second folder of the Front-End Web Development exercise files on your computer. You may do this by either navigating to that subfolder in your desktop operating system, OR by dragging the entire folder containing your Pluralsight exercise files into a new Sublime Text window, where a new project navigation pane will open up to the left of the Sublime Text window, allowing you to drill down to the after subfolder.
Step 2. In that window, duplicate the index.html file and rename the duplicate index2.html. Next, click down into the css folder and duplicate the site.css file and rename the duplicate site2.css—we are making copies of these files in order to preserve the original files, in case you wish to revisit the “finished” and unaltered versions of the originals. Step 3. Open the index2.html file in Sublime Text by either using the File menu > Open File command in the program or by dragging the file from the folder window into the blank Sublime Text window.
Step 4. Complete the following edits and additions in the index2.html file:
A. Ensure that the externally linked CSS file reference in the <head> portion of code correctly points to the site2.css file instead.
B. Create a new <section> portion of code below the existing <section id=”main”> that currently comprises most of the index2.html page.
C. Give this new <section> an id of “secondary”
D. Within the new main2 <section>, type or paste in this code: <h3>Additional Resources</h3>
<p>Visit the <span class=”highlight”>Resources</span> section of our website for additional help. </p><h3>Contact Information</h3><p>Please contact the <span class=”highlight”>author</span> for additional resources at shawn@github.com. </p>
E. Save your edits to index2.html in Sublime Text and then open the index2.html file in a blank browser window to proof and
ensure it looks like the figure at right.
Step 5. Next, open the site2.css file in Sublime Text by either using the File menu > Open File command in the program or by dragging the file from the folder window into the blank Sublime Text window.
Step 6. Please complete the following edits and additions in the site2.css file:
A. In the commented section above identifying the name of the file, update to indicate the name of this duplicated site2.css file.
B. Define a new ID selector called secondary, immediately after the current main selector in the site2.css file; you may start with the same styles defined in the current main selector.
C. Make the sole style of the secondary selector the color ff0000 (red).
D. At this point, do a quick proof of your index2.html file, which should look like the figure at right.
E. Back in the site2.css file in Sublime Text, create a new relative selector, based on the secondary ID selector and pertaining ONLY to the <h3>headline—this relative selector should have a color style of #0066ff and a letter-spacing style of 7px. When proofing your index2.html file, your results should now look like the figure at right.
Step 7. Finally, back in your site2.html file, create a new class selector called highlight, which has a background color of yellow and a font-weight of bold. Save your work, both in your index2.html and site2.css files. Be sure to proof your finished work a final time in your browser before submitting your assignment. Your finished work should look like the figure at left. Step 8. When you have completed the assignment according to the requirements outlined above, zip up the complete “after” subfolder of the second folder of the “Front-End Web Development Quick Start with HTML5, CSS and JavaScript” exercise files on your computer, and submit it using the assignment link in Blackboard.
"Looking for a Similar Assignment? Order now and Get 10% Discount! Use Code "Newclient"
