Assignment 1 HTML CSS Landing Page-1
pdf
keyboard_arrow_up
School
University of Calgary *
*We aren’t endorsed by this school
Course
541
Subject
Information Systems
Date
Feb 20, 2024
Type
Pages
4
Uploaded by JudgeFieldRook23
Assignment 1: HTML & CSS Enhanced Landing Page Course: Web-Based Systems Number: SENG 513 Semester: Winter 2024 Due Date: Week of Jan 29th Instructor: Steve Sutcliffe <steve dot sutcliffe at ucalgary dot ca> Version: 1.0.0 Weight: 5% Objective: Create a responsive and visually engaging landing page using HTML and CSS, demonstrating proficiency in various CSS techniques and principles. Individual Assignment: This assignment is meant to be done individually. Do not alter the styles.css, but build your own CSS to override anything you need to. You can alter the *.html, which contains hints for constructing the landing page. Part 1: Responsive Design 1.
Implement a design that adapts to different screen sizes. 2.
Functionality and aesthetics should be maintained across devices. 3.
Consistent branding across devices. Part 2: Flexbox and Grid 1.
Use a flexbox for component alignment and positioning. 2.
Use a CSS grid for complex layout patterns. Part 3: Selectors, Pseudo-Classes, and Pseudo-Elements 1.
Demonstrate the use of advanced selectors. 2.
Creatively employ pseudo-classes and pseudo-elements for stylistic enhancements. Part 4: Image Handling and Optimization 1.
Research, justify and use the best method for adapting foreground images with appropriate resizing. 2.
Apply different background images for different viewport sizes using the best method. Part 5: Cascading and Specificity 1.
Successfully override styles from the provided CSS file using an additional CSS file. 2.
Demonstrate a clear understanding of CSS specificity and the cascade.
Part 6: Inheritance and Reusability 1.
Apply CSS inheritance effectively to minimize redundancy. 2.
Create reusable styles and components. Part 7: Demonstration In your tutorial, each individual will demonstrate the working application and explain their decisions and implementations. 1.
Demonstration: 1.1.
Launch your application through a server and show its responsiveness in various screen sizes. 1.2.
Show the CSS files and HTML code. 2.
Explain: 2.1.
Identify and explain the mobile strategy used. 2.2.
Identify and explain how you used grids and flexbox. 2.3.
Identify and explain the use of Selectors, Pseudo-classes and Pseudo-elements. 2.4.
Identify and explain the image resizing methods used. 2.5.
Identify and explain the CSS rules you used. 2.6.
Identify and explain the corrections you made to the HTML page. D2L/GitLab Submission Please follow these guidelines for submitting your application to D2L: 1.
Name your HTML file UCID_landing_page.html. 2.
Name your custom CSS file as UCID_styles.css. 3.
Add your UCID_landing_page.html, the styles.css, your UCID_styles.css page, and the images folder to a zipped folder called UCID_landpage.zip and upload it to Dropbox on D2L. Grading [30 Points] F
UNCTIONALITY OF THE W
EB A
PP [7
P
OINTS
] [1 pt] The page is run on a server of some kind. [3 pts] Appropriate foreground images are selected at each size. [3 pts] Appropriate background images at each size. [3 pts] Appropriate breakpoints have been selected. A
ESTHETICS [5
P
OINTS
] [5 pts] Evaluation of your aesthetic choices.
E
XPLANATION AND U
NDERSTANDING [15
P
OINTS
] [3 pts] Quality of explanation of Grids/Flexbox. [3 pts] Quality of explanation about mobile strategy. [3 pts] Quality of explanation about image resizing methods. [3 pts] Quality of explanation about the HTML corrections. [3 pts] Quality of explanation of Selectors/Pseudo-elements/Pseudo-classes. A
CHIEVEMENT P
OINTS [U
P TO 3
P
OINTS
] Achievement points play a crucial role in securing full marks for this assignment. These points are designed to challenge your understanding and application of the course material, pushing you beyond the foundational requirements. To successfully earn these points, you will need to engage in independent research and demonstrate a higher level of mastery. These tasks are deliberately more complex and may not have straightforward solutions. They are intended to stimulate critical thinking, creativity, and a deeper exploration of the subject matter. The answers we are looking for here go beyond the basics; we aim to see how you can apply your knowledge innovatively and effectively in less conventional scenarios. Remember, the journey to these points is as valuable as the points themselves. This is an opportunity for you to excel and showcase the breadth and depth of your understanding. [1 pt] Hi-res display breakpoints. [1 pt] Flourish appears over the background colours but behind the text. [1 pt] `logo.svg` file is unaltered and set up correctly for a responsive site. Penalties As part of our commitment to academic integrity and adherence to intellectual property laws, it is crucial that all submitted work strictly respects copyright laws and guidelines. This includes, but is not limited to, the use of copyrighted materials, code, images, or any other content without proper authorization or attribution. Please be aware that any instance of copyright infringement will be taken very seriously. The following penalties apply: Immediate Deduction: If any part of your submitted work is found to violate copyright rules, a significant deduction will be applied to your assignment grade. This deduction can range from a partial to a full loss of marks, depending on the severity of the infringement. Retroactive Application: Importantly, this penalty can be applied at any point during the course, including during the final grade calculation. If it is discovered post-submission –
even after initial grading –
that your assignment contains copyrighted material used inappropriately, a retroactive deduction will be applied to your grade.
Your preview ends here
Eager to read complete document? Join bartleby learn and gain access to the full version
- Access to all documents
- Unlimited textbook solutions
- 24/7 expert homework help
Severe Cases: In severe cases or in instances of repeated infringement, further disciplinary action may be taken in accordance with university policies, which could include failure in the course or referral to a disciplinary committee. Responsibility and Vigilance: You must ensure that all materials used in your assignments are properly licensed or fall under fair use provisions and are correctly attributed. Please seek guidance before submission if you are unsure about using any material. Honesty and Integrity: We encourage honesty and integrity in all academic endeavours. This policy is in place to uphold these values and to ensure a fair and legitimate educational environment for all students. A
DDITIONAL P
ENALTY
:
S
TYLES
.
CSS IS MODIFIED [-2] “styles.css” should not be modified. All CSS changes should happen in your custom *.css document. A
DDITIONAL P
ENALTY
:
U
SE OF !
IMPORTANT [-2] The use of `!important` is generally discouraged in the industry and demonstrates a lack of knowledge in structuring quality CSS. Using `!important` in this assignment will result in the deduction of 2 marks. L
ATE A
SSIGNMENTS
Assignments must be demonstrated to the TAs during your scheduled tutorial sessions. If you need to submit an assignment late, you must arrange this directly with your TA, subject to their availability. Late assignments will be graded on a simplified scale: they will receive either a passing grade of D+ (50%) or a failing grade of F (0). In cases of special circumstances, such as illness or personal emergencies, accommodations may be made regarding submission deadlines. These will be considered on a case-by-case basis. Students facing such circumstances are encouraged to contact me as soon as possible to discuss potential adjustments.