You will create a mobile-
friendly, multi-page web site using the Bootstrap CSS
You will create a mobile-
friendly, multi-page web site using the Bootstrap CSS Library. The web site will be hosted on a real
server and will be evaluated both for its construction (coding) and how well it meets the design (artistic)
requirements.
You will be creating a CSS animation and using Bootstrap CSS to create a responsive design. Both
elements can really “up our game” in the visual appeal department, though they can seem intimidating
at first. With a little practice they are well within our capabilities. Having experienced flexboxes and
their use in responsive design, you may even prefer using Bootstrap.
All elements in your submission must be styled to some degree but it is not expected that you try to
create a work of art. We all have different talent levels with artistic expression and a simple but
effective, professional presentation will be very satisfactory. Finding cute elements on external sites and
incorporating them is not as good an approach to learning these techniques and is forbidden. Create
your own simple designs so that you can understand the syntax and interactions.
JavaScript is not permitted in this assignment.
1. You will create a web site that consists of 2 different HTML files and 1 CSS file. The files will be
named index.html, page2.html, and assign1.css. Please note the case of these files, Index.html
is not the same as index.html, and while a Windows working environment will be forgiving of
these kinds of mistakes, the Linux hosting environment will not.
2. You will create a header, navbar, main, and footer elements on each HTML page you create. You
may further divide these elements with containers as needed, and the use of semantic elements
is highly encouraged1.
3. Except where noted, the header, navbar, and footer should be the same on each page. This
structure will be expanded on in the Server-Side Programming course in semester 3, which is
why we are adopting it now.
4. All CSS must be contained within your assign1.css file – no inline CSS or style block is permitted.
5. Your HTML and CSS files must validate to current standards. Penalties will also be assigned for
the use of the
or
tag to move containers – it is only to be used to break lines of text
within a container. Instead of break tags you should use the display CSS element.2
6. Each page of the website must contain at least one img tag linking to an external file (a
jpg/png/etc)
7. Each page of the website must contain a responsive design using the Bootstrap CSS Library
targeting at least 2 views – one that is representative of a desktop computer and one that is
representative of a mobile phone.
8. Only Bootstrap 5 may be used. No other versions are permitted.
Header
Your header must include the following elements:
• An original CSS Animation that lasts at least 20 seconds, or preferably repeats infinitely.
o The animation must modify at least 3 different CSS properties.
o It could be used for a decorative, instead of a functional purpose.
• The title of the page
• Your name and student number
Navbar
Your navbar must include the following elements:
• Links to the index page and to page2
• The link of the current page we are on must be disabled but visible on each page, i.e., if we are
on the index page the link to the index page should be greyed out, and only the page2 link
should be available.
• Your anchor tags must be styled to look like buttons, but not be buttons
• An original CSS animation that activates on hover or focus of the links
Main
Use one of the following themes for your web site:
• A reflection on your goals in coming to college on the index page, and an analysis of what skills
you developed in first semester on page2.
• A brief description or overview of an interest or hobby that you have on the index page, and a
specific example of your involvement with that interest or hobby.
• An original short story about your character going on a field trip to a Hamilton area museum on
the index page, and what happens when one exhibit suddenly comes to life on page2.
• Present a poem on the index page, and a short article about your interpretation of the poem on
page2. The poem may be copied from the Internet but must be sourced in a comment.
• A faux landing page for a blog introducing yourself on the index page, and a faux blog entry
about what you hope to do for a living after college on page2.
Do not copy content from an existing web site or from Wikipedia to flesh out your page. Note that
although the specific content of your selection will not be evaluated from grammar, et cetera, the
presentation, design, and layout of your page will be. It should not simply be presented as two large
blocks of unformatted text.
The Footer
The footer must contain a copyright notice like: “© 2023, Stephen Adams, Mohawk College”. Use your
name and the current year.
Some other common mistakes include:
• Do not use the
or
tags to move HTML elements, use CSS.
• All CSS must be contained in external CSS files – no inline or embedded styles in your HTML file.