Assignment1-Ver1 (1)
.docx
School
University of Toronto, Victoria College**We aren't endorsed by this school
Course
COIS 3030
Subject
Information Systems
Date
Dec 16, 2024
Pages
7
Uploaded by MagistrateKoupreyPerson1946
COIS 2430H – Web Development I: Front EndAssignment 1: Create a Personal WebsiteObjective: In this assignment, you will create a personal portfolio website using the concepts of HTML and CSS we covered in class so far. The website will display your skills, projects, and a brief introduction about yourself.You will practice using various HTML elements and CSS styling techniques, including forms, responsive images, media elements (audio and video), interactive elements, and advanced layout methods like CSS Grid and Media Queries.Assignment Details:1.Website Structure:oYour website should include at least 4 sections:Home:Introduction and brief personal details.Projects:Display at least two projects with images and brief descriptions.Skills:Create a list of skills with appropriate styling.Contact:A form where users can contact you. The form should include at least four types of input (e.g., text, radio buttons, checkboxes, and drop-downs).2.Responsive Images:oUse normal and responsive images with support for high-density screens (e.g., srcsetattribute for different resolutions).oEnsure that your images are optimized to fit various screensizes.3.Media Elements:Fall 2024
COIS 2430H – Web Development I: Front EndAssignment 1: Create a Personal WebsiteoAdd audioand videoelements to your website (e.g., add an audio file related to your project or a video introduction about yourself).4.Interactive Elements:oAdd interactive HTML elements, such as buttons, links, or image sliders to enhance the user experience.5.CSS Styling:oApply CSS Gridfor layout to ensure the website looks professional and structured.oMake use of Media Queriesto ensure your website is responsive and adjusts to different screen sizes.6.CSS Selectors and Pseudo-classes:oUse class, ID, and descendant selectors to organize and apply styles.oAdd hover effects to hyperlinks and buttons.oStyle different text elements (headings, paragraphs, lists, etc.) using pseudo-selectors like :hover, :focus, and others.7.Layout Considerations:oEnsure your website is responsive.oUse CSS Gridto create flexible, structured layouts.oUse block and inline elements appropriately.oUse the box model to manage padding, margin, and borders.Fall 2024
COIS 2430H – Web Development I: Front EndAssignment 1: Create a Personal Website8.Final Touches:oEnsure all code is clean and properly indented.oValidate your HTML and CSS.oYour website should be accessible and work across different devices and screen sizes.9.Be Creative!oCreativity will play a key role in your grade. Use colors, fonts, layouts, and interactive features that make your website stand out.oFeel free to incorporate animations, transitions, or innovative layout techniques to improve the overall user experience.10.Provide Screenshots:oTake screenshots of each section of your website (Home, Projects, Skills, Contact).oInclude screenshots showing how your website looks on both a desktop and a mobile device.oAdd the screenshots to a separate document or include them in the final submission folder.Submission Requirements:Submit all files (HTML, CSS, and images) in a single zipped folder.Include a document with the screenshots of your website sections.Fall 2024
COIS 2430H – Web Development I: Front EndAssignment 1: Create a Personal WebsiteEnsure your website is functioning properly before submission.Note.Students should use their design skills to make their websites look good. Being creative will also help boost their final grade.Rubric for Evaluation:CriteriaExcellent (90-100%)Good (70-89%)Satisfactory(50-69%)NeedsImprovement (<50%)HTML StructureWell-organized with correct useof semantic elements and a logical structure. No errors. Clear use of audio, video, and interactive elements.Mostly correct structure withminor issues in element use. Includes audio, video, and interactive elements with some inconsistencies.Basic structure with frequenterrors and some missingor misused interactive ormedia elements.Poorly structured HTML, many errors, missing key sections or media/interactive elements.CSS Styling and LayoutAdvanced use of CSS Grid, pseudo-elements, and media queries. Layout is fully responsive withno issues across devices. Creative and visually appealing.Good use of CSS Grid and media queries with minor layout issues. Some creativity, but some inconsistencies in style across devices.Basic CSS and layout. Limited or inconsistent responsiveness. Little creativity, and the layout feels plain or lacks polish.Minimal or ineffective CSS. Layout breaks across devices, no responsiveness. Poorly styled with no creativity.Forms and Includes at least 4 well-Functional form with Basic form with limited Incomplete or non-functionalFall 2024
COIS 2430H – Web Development I: Front EndAssignment 1: Create a Personal WebsiteCriteriaExcellent (90-100%)Good (70-89%)Satisfactory(50-69%)NeedsImprovement (<50%)Inputsstyled, functional inputtypes (e.g., text, radio buttons, checkboxes, dropdowns). Inputs are fully responsive and accessible.most required input types. Some minor issues with styling or responsiveness.input types orissues with functionality or responsiveness.form. Missing required inputtypes and lacks styling or responsiveness.Responsive ImagesWell-implemented responsive images using srcset. Images load properly across differentdevices and resolutions (including high density).Responsive images used but with minor issues in load time or display at different resolutions.Basic images included but not fully responsive. Inconsistent display across devices.No responsiveimages or improperly implemented. Images do notadjust for different screen sizes.Audio, Video, Interactive ElementsAudio and videoare well integrated and functional. Interactive elements (buttons, links, sliders) are engaging and enhance the user experience.Audio and video included but with minor functionality or display issues. Interactive elements are present but lack full engagement.Basic audio and video included but not styled or fully functional. Few interactive elements.Missing or non-functionalaudio, video, or interactive elements.Selectors Effective and Good use of Basic use of Little to no Fall 2024
COIS 2430H – Web Development I: Front EndAssignment 1: Create a Personal WebsiteCriteriaExcellent (90-100%)Good (70-89%)Satisfactory(50-69%)NeedsImprovement (<50%)and Pseudo-classescreative use of class, ID, and pseudo-classes.No redundancy in CSS. Hover and focus states are applied thoughtfully.selectors andpseudo-classes with minor redundancies. Some hover/focus effects applied.selectors andpseudo-classes. Limited use of hover or focus effects.Some redundancy in styling.use of selectors or pseudo-classes. Over-reliance on inline styles orpoor organization.Responsiveness (Media Queries)Website is fully responsive and adjusts perfectly to all screen sizes (mobile, tablet, desktop). Layout and media elementsremain functional and consistent.Mostly responsive with minor issues at certain screen sizes. Layout and media elements are generally functional.Partially responsive but significant layout issues on some devices. Limited media query use.No responsiveness; website breaks completely onsmaller screens. No media queriesused effectively.Screenshots ProvidedClear, high-quality screenshots of all sections (Home, Projects, Skills, Contact) for both desktop and mobile. Screenshots areorganized and labeled.Good screenshots provided for most sectionsbut missing some device views (desktop or mobile). Minor issues in organization or clarity.Basic screenshots provided but missing for key sections or views. Screenshots are unclear or poorly labeled.Screenshots missing or very unclear. Fails to demonstrate the website’s layout or responsiveness.Fall 2024
COIS 2430H – Web Development I: Front EndAssignment 1: Create a Personal WebsiteCriteriaExcellent (90-100%)Good (70-89%)Satisfactory(50-69%)NeedsImprovement (<50%)Code Quality and ValidationCode is clean, well-organized, and fully validated with no errors or warnings. Proper indentation andcomments included.Mostly valid code with some minor warnings. Code is organized butmay lack consistent indentation or comments.Some validation errors. Inconsistent formatting or missing comments.Code has many validation errors and is poorly written.Lacks indentation, comments, and best practices.Creativityand Aesthetic AppealHighly creative design with excellent use ofcolors, fonts, layout, and interactive features. Design is user-friendly, visually appealing, and engaging. Creativity playsa major role in boosting the grade.Good design with some creative elements. Website is visually pleasing but lacks the polish or engagement of a more advanced design.Basic design with minimal creative effort. Visually plain or unappealing. Limited engagement for users.Minimal effort in design. Website looks unprofessional, with poor color choices, inconsistent fonts, and unattractive layout.Total Marks:/100Fall 2024