Assignment #8 -- Responsive Web Design Intro
Updated 4/30/2025
Responsive Web Design Introduction (with w3.css)
-
This assignment will demonstrate:
-
Basic Responsive Web Design concepts
-
Using the w3.css stylesheet
-
Please note that when I refer to "my sample pages" or "my tag" in these assignment
instructions, You should be able to right-click in my pages and view the html
source to see what I'm talking about.
-
Put both of the following tags into your index page's section:
-
A "viewport" <meta> tag like you saw in the eHandout. As a reminder, it looks like
this:
-
A <link> tag which adds the w3.css stylesheet. I suggest that you use
an absolute URL for this <link> tag, like this:
Please note: This new <link> tag will be in addition to your
current <link> tag which connects your page to your own stylesheet. .
-
Make these changes in the section of your page:
-
Put a class="w3-container" attribute into the <body> tag. (If you already have a
class attribute in the <body> tag, ADD " w3-container" to the class(es) already there.)
-
the <div> tag and the paragraphs that you previously put into your
index page for Assignment 5, "CSS Positioning". This stuff will just get in your way as you work on this current
assignment.
-
Put a new tag after your first section. To be more specific, put it
the ending </section> tag that is already in your index page.
End this new section, meaning, put the new ending tag on the line following the new <section> tag that you just added.
-
Put some content into this new section. I suggest a paragraph containing some text. You can even put in some "Greeking" text if you wish.
-
Add a new <div> tag that contains both of your sections. Put in a class attribute that looks like this:
-
Add to each contained <section> tag in the new div tag. (If you already have a
class attribute in these <section> tags, ADD " w3-container w3-half" to the class(es) already there.)
-
Your page will probably look better if you also add class="w3-container" to each of these tags in your page:
(If you already have a
class attribute in these tags, ADD " w3-container" to the class(es) already there.)
-
You can also put in more tags and "w3-" classes if you wish. Experiment with the w3.css classes
and see what you can do!
-
Validate your index.html page with the W3C's
Validator
page. I will also be validating your page, so this
validation will be part of your grade. Your page should
validate as an HTML5 page.
-
Validate your stylesheet page with the W3C's
CSS Validator page.
I will also be validating your page, so this validation will be part of your
grade.
-
You can test your pages on the server by selecting the
"Student Sites" link on the class site and then
clicking your student number in the bulleted list.
You should change the width of your browser window by dragging one of the vertical borders back and
forth, so you can make sure the "w3-half" sections (<div> tags) resize properly, and stack vertically in a
very narrow screen.