do you guys do web design homework?
Page 1 8.1 6.2021 version 1.1 with thanks to tom gutnick ITD 110 Web Site Project General Instructions This project will give you the opportunity to demonstrate your mastery of the concepts and techniques covered in our course. You will be working on this project throughout the semester, with six deadlines for delivering milestones . The process, with its deliverables, will give you a good feel for web site development in “rea l world” situations. The project accounts for a major portion of your grade for the semester. It is essential for your success in the course that you devote sufficient effort to the project. Purpose: To design, develop, and publish a web site using recomm ended design practices. Detailed requirements: • You must complete the project using Visual Studio Code or another approved coding text editor. o Use of Dreamweaver or any other web creation tool, online or offline, will result in a grade of 0. • You will publi sh your project to the Internet, using repl.it (or as otherwise instructed). Create a folder in your web space for this project , as follows: itd110/project/ , and use subfolders as appropriate (such as for images and css ). • The HTML content pages will include at least the following: o A home page for the site . ▪ Please name the home page project.html NOT index.htm l. This will enable me to grade the project properly . o at least five additional HT M L pages o Th at’s a total of six required HTML pages . o You may do more HTML pages if you would li ke to, but no more than 10 HTML pages, total. (If you think your design require s more than 10 total HTML pages , email your instr uctor for approval.) • Each HTML pa ge must contain at least 250 words of text , except for the form page. • Use HTML5 semantic elements, and use them appropriately o For example, rather than the generic div, use section, article, main, header, footer, etc. o Never style a naked div tag; it is a general block level element used to apply classes and ids o Never style a naked span tag; it is a generic inline element used to apply classes and ids • ALL text content must be 100% your original work. o This means you must write all the text content , from scratch. Page 2 8.1 6.2021 version 1.1 with thanks to tom gutnick o Choose a subject you know abo ut, so you do not have to plagiarize content o Examples of topics students have used in the past that required no research on their part: ▪ How to detail a car ▪ My favorite family recipes ▪ Board games I have loved and lost ▪ House painting for beginners ▪ My favorite gardens • Images o The site must use at least six image files o The site may use no more than 12 images files o Images used must fully comply with U.S. copyright laws o If you are not sure if an image complies with copyright laws, do not use it. o To be safe, use only images that: ▪ You have taken yourself, with a camera or cell phone ▪ Images from the website https://unsplash.com/ o Taking a picture of a picture is a copyright violation (unless you created the original picture) o A screenshot is a copyright violation (unless you created all the content which is the subject of the screenshot) ▪ For example, a video game screenshot is a copyright violation ▪ Email your instructor for guidance on the “fair use ” exception for educational purposes if want to use screenshots for educational purpose s • Video : include one and only one video o You may use a video from You Tube that you did not create yourself if you make it clear who creat ed it and you use the You Tube embed code. o Feel free to create your own video! A good one gain you a few points of extra credit. • Use a ppropriate meta tags, such as description and viewport • Use at least two lists : one ordered list and one unordered list • Include one page containing a working form with 4 or 5 different types of form elements . o Your instructor may provide a PHP script for processing form elements. • Include one page utilizing a table or tables effectively (for data that lends itself to tabular presentati on, not for general multi -column layout) • Links , at a minimum the following: o One e-mail hyperlink o One hyperlink to an external web site o One link to an id within your own site o A c onsistent and logical navigation bar on all HTML pages . Page 3 8.1 6.2021 version 1.1 with thanks to tom gutnick ▪ the navigation bar should include a link to all top -level HTML pages . Depending up on your site map design , all of your pages may be top -level pages, but maybe not. ▪ For the nav bar on each top -level HTML page, include the current (active) page in the nav bar , so that the nav bar remains consistent from page to page. ▪ use a class to style the current (active) page link in the n av bar appropriately. • Consistent header with logo and footer areas on all HTML pages • CSS : You will create one and only one external Cascading Style Sheet to style your site. • This one external style sheet should : o Should configure text, color, backgrounds, and page layout for all pages. o All styling must be done in the one external style sheet . o No font tags or other obsolete or deprecated HTML elements may be used . o No embedded or inline CSS. o In other words: the HTML must contain NO styling . o Your CSS stylesheet must include, at a minimum, the following: ▪ Style at least 5 element (tag) selectors ▪ Style at least 3 classes , and apply those classes appropriately in the HTML ▪ Style at least 2 id selectors , and apply those ids appropriately in the HTML ▪ Style at least one tag using descendant selectors • Your pages should look good as rendered by multiple browsers, at varying browser widths • All HTML and CSS code must pass validation and conform to the programming standards covered in the textbook. • All HTML and CSS code must be properly indented. Your web site project will be evaluated on the following criteria . • Meeting all project requirements • Meeting all project milestones • Following recommended web site design practices, as discussed in the course textbook. • Following recommended accessibility requirements, as discussed in the course textbook • Quality of HTML and CSS code, including o Validation o Correct indentation o Logical grouping of CSS selectors , as disc ussed in the course textbook ▪ For example , do not style the same tag in two different places in your stylesheet ▪ Put common styling of related tags together • Visual appeal of site Page 4 8.1 6.2021 version 1.1 with thanks to tom gutnick o Is the site visually appealing to the target audience ? o Is the site visually c ohesive? In other words, does the viewer have a sense of being in a particular place, visually, rather than just seeing a random display of styl es. • Quality of content o Is the content correct with respect to grammar, punctuation, capitalization, and spelling? o Is the co ntent interesting, informative, entertaining, or otherwise engaging ? o Does the content have a cohesive theme or purpose ? A random group of to pics does not create a cohesive website. • Effective presentation to the class, either in person or, for a Nova Online class, via a video. Page 5 8.1 6.2021 version 1.1 with thanks to tom gutnick Project Milestones There are six project milestones, each milestone building upon what has been done previously . Your instructor will provide specific due dates for each miles tone. The due dates outlined below are just general guidelines. Fo llow your course instructor ’s specific due dates. _____________________________________ _________________________________________ Milestone #1. Web Site Topic Approval — due at end of week 2 of 15 -week class . Decide on a topic for your web site. Pick a topic you know about, so you do not have to plagiarize content. Using a word processor, prepare a one -page double -spaced written discussion of the following: • What is the name of the site? • What is the purpose of the site? • Will this be a real site or fictitious? • What do you want the web site to accomplish? • Who is your intended audience? Specify age, gender, interests, etc. (“Everybody” is probably not an appropriate answer!) • What opportunity, problem, or issue is your site addressing? • What types of content might be included in your site? Be specific about the text, graphics, multimedia, etc. you intend to use and describe how they will support the purpose of the site. Your writing should be of a college -level qual ity: well organized, with complete sentences, and with correct grammar and spelling. An appropriate length would be roughly one double -spaced page. I must approve your topic before you begin to work on the next milestone. If you can’t come up with a good i dea on your own, I will be happy to offer suggestions. Submit a .docx, .odt, .txt, or .pdf file. [Using Google docs? Export a PDF. Do not submit a link.] Page 6 8.1 6.2021 version 1.1 with thanks to tom gutnick _____________________________________ _________________________________________ Milestone #2. Site Map and Wireframe (s) — due at end of week 4 of 15 -week class Using a graphics application , create a sitemap (site diagram, p 7) of your web site that shows the hierarchy of all pages and the relationships between the pages. Please name the home page project.html NOT index.htm l. This will enable me to grade the project. Then. use a computer graphics application to create wireframe diagram s for the pages on your web site, clearly showing the required header with logo, navigation, content, and footer areas, as well as any other major areas dictated by your design. Save the results to a PDF file and submit here in Canvas. Note: For pages that share the same layout, a single wireframe should be created -- but label the diagram to indicate which pages it applies to. For example, you may have one wireframe for the “home” page, and anoth er wireframe for all inner pages. To create the sitemap and wireframe s, you may use Visio, PowerPoint, Adobe Illustrator, Word, Excel, etc. There are also several online wireframe tools you can find using google. Regardless of the tool(s) used, the output should be saved to PDF files. Handwritten diagrams will not be accepted. Page 7 8.1 6.2021 version 1.1 with thanks to tom gutnick _____________________________________ _________________________________________ Milestone #3. Content Creation — due at end of week 6 of 15 week -course Using a word processor, write a Website Content document that answers the following questions: • What are the name and purpose of this website? • What is the title and purpose for each page? (Reminder: the site should consist of between 6 and 10 pages. No more than one “product” page can count towards the total.) o Please review the above requirements regarding a form, table, lists, etc. so you do not miss anything. • Create a draft of the text content that will be included on each page . 250 words minimum per page for the six required pages, except the form page. o Extra HTML pages beyond six need not meet the 250 -word requirement. o Remember, maximum of ten HTML pages total. o Please name the home page project.html NOT index.htm l. This will enable me to grade the proj ect. o • What images do you plan to use, and where will you use them? Submit copies of the image files and state where you got each image. Be specific. For each image: did you take it yourself. Where were you when you took it? When did you take it? Is it f rom unSplash? • You may add the image code to the HTML files before you submit this project milestone, or you may wait until you have created the CSS styling so the images display the way you intend them to display. • What type of video content do you plan to use for the one required video? Where will you obtain the video? If you will use a You Tube video, provide a link to the video. If you will create the video yourself, you need not have it completed yet, but provide a detailed description of what it wi ll contain, including the specific text content, if any Submit through Canvas — .docx, .odt, or .pdf file accepted. (Using Google Docs? Export as .pdf. Do not submit a link. ) Page 8 8.1 6.2021 version 1.1 with thanks to tom gutnick _____________________________________ _________________________________________ Milestone #4 . HTML and Project Update Meeting ONE – due before the end of week 10 of 15 -week class Your HTML should be finalized at this point, including content, images, and video. The nav bar and all links should be functional. The HTML for all content, includin g lists, table , and form, should be completed. Each HTML page should be validated. Please name the home page project.html NOT index.htm l. This will enable me to grade the project. • The URL of your web site. (Note that URLs should not have any embedded spac es, whether for file names or directory/folder names.) • A link to the IDE view in repl.it so that I can see all your code • A word document or PDF document specifying which of the project requirements you have completed, and which of the requirements you have left to do. If you have completed a requirement but it is not yet in final form, let me know . • Your sitemap, in PDF form, updated to reflect any changes. • A screenshot for each of your HTML pages showing it has passed HTML5 validation . • Don’t forget to indent your HTML code properly to reflect the DOM. Page 9 8.1 6.2021 version 1.1 with thanks to tom gutnick _____________________________________ _________________________________________ Milestone #5. HTML/CSS and Project Update Meeting Two — due before end of week 13 of 15 -week class Your project should be in final form. Any HTML issues noted at the first meeting have been corrected, you have created the CSS style sheet and styled the required number of tags, classes, and ids. The website should be published on repl.it. The home pag e should be named project .html , not index.html (so the site can be properly graded). Please name the home page project.html NOT index.htm l. This will enable me to grade the project. You will have a Project Update Meeting with me so that I can provide personal feedback. This is a mandatory requirement. See the calendar in Canvas to make an appointment for a Zoom call.Submit the following in Canvas and be prepared to discuss them durin g your appointment: • The URL of your web site. (Note that URLs should not have any embedded spaces, whether for file names or directory/folder names.) • A link to the IDE view in repl.it so that I can see all your code • A word document or PDF document specifyi ng which of the project requirements you have completed, and which of the requirements you have left to do. If you have completed a requirement but it is not yet in final form, let me know . • Your sitemap, in PDF form, updated to reflect any changes. • A scr eenshot for each of your HTML pages showing they have all passed HTML5 validation. • A screenshot for your CSS file showing it has passed CSS validation. • Don’t forget to indent your HTML code properly to reflect the DOM. Page 10 8.1 6.2021 version 1.1 with thanks to tom gutnick _____________________________________ _________________________________________ Milestone #6. Present project to the class — due before the end of week s 14 and 15 (instructor will provide specific dates for each student) Make any needed corrections and be sure repl.it reflects the final project ready for grading. . All pages should be present in the ir final form: meeting all the requirements in these specifications, polished, and passing both HTML and CSS validation. You will present your web site to the class. Explain the purpose of the site and the individual pages. Discuss design issues, such as your choice of colors and fonts and page layouts. Discuss any challenges you encountered in doing the project and how you overcame them. No need to create a PowerPoint presentation — just walk us through the site itself! About 5 -7 minutes is appropriate. For Nova Online classes, this presentation will be done via video. The URL to your website and your video will be provided to the class so you may see each other’s work.
