Description
PLEASE READ AND FOLLOW INSTRUCTIOS!!
This
assignment
is
intended
to
provide
you
with
some
practice
using
basic
Bootstrap
as
well
as
gaining
a
little
more
experience
with
CSS
layouts.
Using
Bootstrap
https://getbootstrap.com/
and
a theme
https://bootswatch.com/
you will create two static web pages, with one linking to the other.
The requirements are listed below, but please take some time to think of a good topic and look that has
some
aesthetic
details.
(That
is,
I
want
some
theme,
whatever
you
wish,
rather
than
simply
displaying
a
collection
of
random
data
on
the
pages.)
Bootstrap
is
intended
to
make
it
easier
to
make
your
pages
look attractive, so please try to do this well.
To turn in this assignment, you are to complete the same process you followed with
Assignment
1
,
using the link at
https://classroom.github.com/a/zNhLj5NC
.
Your requirements for the Bootstrap part of the assignment are as follows:
1.
Create
a
cleanly
written
README.md
page
for
your
repository
with
your
full
name,
the
class
and
section,
date
the
assignment
is
due,
as
well
as
the
details
I
ask
for
below.
These
details
will
help
me to not miss requirements that are sometimes hard to pick up on during grading.
2.
Call
your
two
pages
first-page.html
and
second-page.html
.
For
this
assignment,
all
CSS
you
use should be placed in a separate
styles.css
file in a
css
folder.
3.
Between your two pages, you must include a combination of Images, Tables, and Figures that make
your pages conceptually coherent.
(You should go through the Bootstrap documentation on these
topics
under
the
Content
section
in
the
left
panel.)
On
your
README.md
page,
briefly
list
which
classes you used for these on your two pages.
(e.g.
on
first-page.html
, used
img-fluid
for three
images and a
<picture>
element with
img-fluid
as well), doing this for your Images, Tables, and
Figures.
4.
You
should
have
a
decent
amount
of
content,
such
as
a
navigation
bar
on
the
top
or
left
side
of
the page, sections (rather than everything just in one big section), etc., using grids within grids to
format your page.
5.
The page should look good when resized using responsive design.
6.
Has
a
Form
that
allows
you
to
enter
information,
and
when
submitted,
directs
you
to
your
other
page.
Note:
you do NOT need to pass any information from the first page to the second since that
requires Javascript, which we will only require in the next assignment.
7.
Uses a variety of Components, at least 3 different types.
In your
README.md
, list your components
used.
8.
Uses a variety of Utilities, at least 3 different types.
In your
README.md
, list your utilities used.
9.
Uses at least one
<iframe>
using Ratio from the Helpers options.
Your requirements for the CSS layout part of the assignment are as follows:
1.
Place a copy of
https://github.com/mdn/learning-area/blob/main/css…
flexbox-wrap0.html
in your repository.
This will be the starting point for this part of the assign-
ment.
2.
Do NOT change anything between the
<body>
and
</body>
tags except to copy the three lines of
the
<header>
section and paste it below the
</section>
tag.
Do not change anything else in the
<body>
section.
The
only
changes
you
can
make
after
that
are
to
the
section
of
the
file
between
<style>
and
</style>
.
3.
Using
whatever
combination
of
layout
formats
you
want
(e.g.
grids,
flexbox,
positioning,
etc),
change the
<style>
section to respond as in the video shared on
keybase
.
4.
I
will
only
scroll
up
and
down
to
test
the
layouts.
You
must
have
the
twelve
<article>
content
sections displayed as 5 in the first row, 5 in the second row, and 2 in the last row when I scroll (as
seen in the video clip).
