In this assignment you will practice producing a written plan for a site,
selecting a color theme, gathering content, and putting the content on
the page.
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:
- 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.
The site you choose to design in this assignment will be revisited multiple
times during the semester. The “topic” for the site must be something that
exists (I don't want a site dedicated to imaginary widgets, for example).
Examples (not a complete list):
- a personal site
- a site about a favorite pet
- a site for a club, organization, church, or other entity
- a site about a particular topic/issue,
- a fan site
So, step 1 of this assignment is this: decide what you want your site to be about.
Often sites are built around a color scheme that makes use of so-called
complementary colors (i.e., those that appear opposite one another on a “color
wheel”). To choose a color scheme and to get ideas for your own site take a
moment to visit a variety of sites. Designers call this process “finding
inspiration”. Find three sites you particularly like from an aesthetic
standpoint and save their URLs for later use.
There are several ways to select a color scheme. Try as many of these
approaches as necessary until you have some colors you feel comfortable
with:
- Use the “inspect element” feature of your browser to see what
colors are used by one of the sites you like.
- Once you have a color of interest, take a moment to read about
complementary and analogous colors at
https://www.canva.com/colors/color-wheel/. Then use the
simple tool to get ideas for colors that will go together nicely.
- Do a search for “beautiful web color schemes” (or insert preferred
adjective) and look at palette choices of some sites.
- Important, you need significant contrast between background and
foreground colors or else text will be difficult to read.
Your plan should include at least two pages (a home page and at least one additional page).
For each planned page of the site you should create (on paper) a sketch of your plan. Take
a look at this site for some examples of the kinds of sketches I am envisioning:
https://www.digitaldesignjournal.com/sketched-website/.
Your plan should incorporate at least 3 images. These images should not be copywrited and
should not be links to other web resources. They should be photographs or images that you
have personally created (e.g., by taking a picture with your smartphone) or been given
permission to use. They can include public domain images as long as you use those images
in accordance with the author's requirements.
Your design should include a menu of some sort as well.
Also, you should make note on your sketch the colors (background, foreground,
headers, links, etc.) that you have selected in the previous step.
To complete this step you will produce a paper sketch of your home page and
of your second page. Also, you will create a separate title page that names
the title of your site and a short paragraph explaining what the site is about.
These paper sketches will be turned in during class, so you may want to take a
picture of them for your records.
In the hw01 directory of your repository create a new document called
home.html that contains titles, text, links, and photos that you will want to
be on your home page. In addition, at the bottom of the page, create links to
the sites you used as inspiration for your color scheme.
NOTE: Your page should make use of inline styling commands to implement your chosen color scheme.
Beyond this don't spend much time giving attention to styling your page or trying to get sections
in the correct place. We will focus on position of elements and styling in coming weeks.
IMPORTANT: On your home page I don't want lorem ipsum or placeholders. I expect
to see the actual text that you want to have on the homepage of the site. This
will require some time on your part to create the text you want on the home page
and to procure photos and other resources you want to have on your site.
There is no need to create you secondary page(s) for this assignment.
On the due date bring your sketches to class and turn them in. Also, commit the work you did
on home.html to your repository and push the changes to bitbucket.
Your work will be grades as follows:
| Title page |
3 pts |
For full credit your title page should include the name of your site
and a paragraph describing its purpose and scope. |
| Sketches |
12 pts |
For full credit you should have reasonably detailed sketches that
indicate the approximate location of the required elements for
both the home page and at least one additional page. The sketches
should also indicate RGB colors selected for various elements. |
| Skeleton Home |
9 pts |
For full credit your home.html should contain all the
elements of your design (but not necessarily positioned or
fully styled. Actual and complete text should be in place
and at least three photos/images for use on the site should
be included. You should make use inline CSS to
provide text and background colors at a minimum. |