Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

MGCR 331 – Winter 2023

Assignment 2 – HTML Project – Student Guidebook

Overview:

Create a website that provides a useful, informative, and/or fun summary of computer/technology- related history.  You can use this free e-book as a resource, https://archive.org/details/my-working-life_202011, or do your own research.

Use your knowledge of HTML and CSS that you learned from the class or from the W3 HTML reference sheet provided to you.

Follow the design principles covered in the course. For some instructions on what *not* to do, you should check this page: http://www.webpagesthatsuck.com/ugliest-worst-web-pages-of-the-decade.html

Your solution should not contain frameworks, themes, etc.

Required elements:

Your website should have three html pages.  You should be able to navigate from page to page using hyperlinks (that is, anchor tags).  The first page of your solution should be named index.html

Recall that the page layout should be accomplished with the div tags.  All your HTML pages should be consistently laid out in one of the following formats:
Horizontal Navigation:

Vertical Navigation:

Your solution should contain a form.  The form should contain appropriate usage of label tags, input tags, and one or more select tags.  In addition to input tags of type text, you must also have an input of type radio or checkbox.  Collecting / Processing data provided on the form is outside the scope of this project.  Your form should also have one or more buttons.

Your solution should contain a table of information.  The table should demonstrate the appropriate use of td tags, th tags, and tr tags.  Recall that tables should not be used for layout (we only discussed div-based and Bootstrap container layouts).

Your solution should contain a sidebar that contains a bulleted list of hyperlinks that refer the user to additional related web pages outside of your solution.  The sidebar you create is a way to direct users to external resources, not navigation.

For example:

Your solution should use 2 or 3 colors effectively.  If you are unsure as to what colors to choose, do a google search on “complimentary colors in web design” or a similar phrase.

Design your solution with a conventional laptop screen in mind.  Your solution does not need to be responsive (that is, it does not need to automatically scale to the dimensions of a smart-phone browser) – create 3 (or more if you have more pages) PDFs of the design made through the use of Figma (select your highest-level frame in layers à click on main menuà filesà export to pdf). Then proceed to implement these designs in HTML/CSS files.

When creating the Figma sketches, make sure you use professional palette generation resources, as recommended in the Figma lab document (https://coolors.co/).

Write a maximum of one-page analysis of design principles followed when designing your pages. Be specific about where (e.g., which page, which elements, etc.), which principle is followed, and how (e.g., through the use of grayed-out text, through the use of easy-to-detect icons, etc.).

Return the HTML index pages (3 pages or more), along with the related CSS files, the PDFs from Figma, and the one-page analysis of the design principles followed in one zipped folder. Please upload your zipped folder in myCourses assignment 2.

Grading

Your solution will be graded as follows:

Item

Points

Relevant content (awarded at the discretion of the instructor- do your web pages tell a story relevant to the task at hand in the overview?)

10 (0- unacceptable; 5- acceptable; 10- exceptional)

Figma plots are present for all three pages

5   (0 or 5)

Figma plots follow design principles (not awarded if the one-page analysis of design principles is absent)

5   (0 or 5)

Figma plots resemble the HTML pages

10 (0- unacceptable; 5- acceptable; 10- exceptional)

Form Elements

--

Labels

5   (0 or 5)

Inputs of type text, checkbox, radio, button

5   (0 or 5)

Select

5   (0 or 5)

Table

15 (0 or 15)

Sidebar with working links

10 (0 or 10)

Correct use of

tags for creating the layout


10 (0 or 10)

HTML is error-free otherwise (In-browser view source will be used to check for errors)

20 (0- unacceptable; 10- acceptable; 20- exceptional)

Total Points Possible: 100