IT 270 Module Three Practicing Intermediate CSS Concepts 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. These tutorials demonstrated how changes made to the index.html file and CSS file affect the website content that is rendered in the browser window. In this exercise, you will begin with the index.html file in the Mod3-Act1 folder and add several additional pieces of content and styles, based on your watching and understanding of the first seven videos of the “Styling Your HTML” section and the “Front-End Web Development Quick Start with HTML5, CSS and JavaScript” section. Step 1. Download the IT270 Supplement Exercise Files zip file if you have not already done so. Step 2. Navigate to the Mod3-Act1 folder in the exercise files. Step 3. Drag the index.html file to a blank web browser tab or window—your starting page should look like the figure below and to the right. Step 4. Return to editing the index.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 5. Complete the following edits and additions in the index.html file: A. Place opening and closing tags around the entire reference, just after the

headline. Add the class attribute of “fixed” to the opening tag. B. Directly below the first reference, add another: C. Place opening and closing tags around the reference you just created, and add the class attribute of “floated-image” to the opening tag. D. At the start of the last full paragraph (starting with the words “Sed virtutem”), add the following code: Go Penmen! Step 6. Switching over to your style.css file, create a new class selector called .fixed with the following attributes (which will utilize the CSS positioning attribute to “fix” the SNHU.edu logo at the lower right corner of the screen): position: fixed; bottom 0; right: 0; Step 7. Create another new class selector called .floated-image with the following attributes (which utilizes the CSS float attribute to place the Penmen logo in a similar fashion to the SNHU logo when you first started): float: left Step 8. Create another new class selector called .inline-box with the following attributes (which will utilize the CSS display attribute to place an inline blocked tagline): display: inline-block; border: 3px solid red; width: 100px; height: 15px Step 9. Proof your finished work in a blank browser tab or window before submitting your assignment. Your finished work should look like the figure at right. Step 10. When you have completed the assignment according to the requirements outlined above, save your work and zip up the complete “Mod3” subfolder in which you have been working this exercise, and submit it using the assignment link in Blackboard.

Looking for a Similar Assignment? Order now and Get 10% Discount! Use Coupon Code "Newclient"