This assignment provides practice implementing a responsive design using flexbox.
Also, it will involve highly customizing an unordered list to produce an attractive
menu.
In all you do please remember that being a part of CSCI@HSU means DOING THE RIGHT THING.
- Doing the right thing matters.
- Doing the right thing means developing competence.
- Doing the right thing means living in community.
- Doing the right thing means finding moral, effective, and correct solutions.
- Doing the right thing means honoring God in all we do.
So, do this assignment in a way that demonstrates integrity, develops
competence, is correct, and honors God ... because what we do matters!
In completing this assignment you MAY use/access the following resources:
- Any website you can find that will guide you in making an attractive,
customized menu using an unordered list.
- The quick reference guides below (which include the printed guides
handed out in class):
- VSCode Editor in its default configuration, including the Prettify extension
- The instructor-provided notes for this course: https://docs.google.com/presentation/d/1NbiLvs4ceGnmTtuY1ymz3H136u4N2tjPgD9_g9QT6iE/edit?usp=sharing
- Your own course notes
- Your instructor
- Discussions about the assignment with other students as long as you
never look at the working code of another student. Another student should
never tell you what to type and you should never tell another student what
to type.
- Websites that provide general instruction on HTML and CSS as long as they are
not targeted specifically to the assignment on which you are working. As an
example, if you want to learn about techniques for applying a color scheme
to a web site, this is a good thing to look up. If you are looking for a
solution to a specific Javascript programming exercise given in a homework
assignment, that is NOT something you should look up. REMEMBER: The goal is
for you to become proficient, so you need to figure some things out.
- Examples provided at: https://josephus.hsutx.edu/classes/w1/source/
You may NOT use/access:
- Resources not expressly listed above, including, but not limited to,
the following ...
- Code-producing extensions to VSCode that are beyond the default
configuration (such as CoPilot).
- Code produced by code-generating tools (ChatGPT as one example).
- Code produced by other people (including classmates) that is targeted
to solve the specific assignment you are working on.
Failure to abide by these guidelines will result in a zero for the assignment
and the incident will be reported to the university provost as a violation of
the university academic integrity policy. A second incident of academic
dishonesty (whether from this course or another computer science course) will
result in an F in the course.
This assignment continues the work started on lab day. If you haven't done so
already you need to complete all lab day work. Use the diagram
provided in
responsivelayout.jpg
to guide you as you use flexbox (not floats allowed) to implement a responsive
page with two breakpoints.
As with lab day instructions this diagram serves to provide the big-picture
structure of the assignment while the instructions below contain the specifics.
One of the issues in our design is that in the large design the menu needs to
be vertically arranged and in the medium design it needs to be horizontally
arranged. It is common to use unordered lists (<ul>
) for rendering
menus. There are many great tutorials where you can find examples of how
to create lists for this purpose. Do a web search to find several of these examples
and select one or two that you especially like. Use the CSS code provided in
the examples to provide a highly customized look to your menu that fits nicely
with your chosen color scheme. REMEMBER: You will need a vertical arrangement
for the large design and a horizontal arrangment for the medium and small
designs. When looking be sure to use CSS-only solutions (i.e., no Javascript).
(I'll be really sad if everyone uses the code from W3Schools ... there
are lots of wonderful examples!)
Modify the code on your personal web page to make use to flexbox to achieve
the layout. You should not use any float properties in your CSS. You are not
required to have a responsive design at this point.
Once you have the page looking the way you want. Take a moment to check the
validity of your code by running it through the W3C Markup Validation Service:
https://validator.w3.org/. Make whatever changes are recommended until
there are no errors.
Your homework will be graded as follows:
Completeness |
20 pts |
Aesthetics |
4 pts |
Validation |
2 pts |
Total |
26 pts |
As always, have fun!