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
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
Development Quick Start
with HTML5, CSS and
Step 1. Download the IT270 Supplement
Exercise Files zip file if
you have not already done
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
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
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):
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
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):
border: 3px solid red;
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 Code "Newclient"