Podcast
Questions and Answers
What is the duration of the exam?
What is the duration of the exam?
3 days
Which of the following are requirements for the homepage?
Which of the following are requirements for the homepage?
- Navigation bar with at least 4 links.
- Hero section (carousel) with background image and call-to-action button.
- Adaptable to both mobile and desktop screens using bootstrap 5.3.
- All of the above. (correct)
The product listing page should only display 10 products.
The product listing page should only display 10 products.
False (B)
What elements should each product listing include?
What elements should each product listing include?
List the fields that should be included in the 'Contact Us' from?
List the fields that should be included in the 'Contact Us' from?
Which of the following sections are required in the footer design?
Which of the following sections are required in the footer design?
The footer must not stick to the bottom of the page.
The footer must not stick to the bottom of the page.
Describe the optional bonus task?
Describe the optional bonus task?
Flashcards
Navigation Bar
Navigation Bar
A bar at the top with links to different parts of a website.
Hero Section
Hero Section
A visually prominent section often using images and text to grab attention.
Carousel
Carousel
A rotating set of images or content.
Call-to-action (CTA)
Call-to-action (CTA)
Directs the user to take a specific immediate action.
Signup and view all the flashcards
Responsive Design
Responsive Design
Designing a website to look good on all devices.
Signup and view all the flashcards
Bootstrap
Bootstrap
A popular CSS framework for responsive web design.
Signup and view all the flashcards
Grid Layout
Grid Layout
A method of arranging content in rows and columns.
Signup and view all the flashcards
Visual Appeal
Visual Appeal
The visual style and appeal of a website.
Signup and view all the flashcards
Form Validation
Form Validation
The process of checking if form data is correct.
Signup and view all the flashcards
Footer
Footer
A section at the bottom of a website containing company information.
Signup and view all the flashcards
About Us (Description)
About Us (Description)
Concise summary of what the website/company is about.
Signup and view all the flashcards
Quick Links
Quick Links
Links that allow users to easily navigate to essential pages.
Signup and view all the flashcards
Contact Information
Contact Information
Ways for customers to directly reach out for help.
Signup and view all the flashcards
Social Media Icons
Social Media Icons
Visual symbols that link to a company's social media pages.
Signup and view all the flashcards
Hover Effect
Hover Effect
An element on a website that changes when the mouse hovers over it.
Signup and view all the flashcards
Code Quality
Code Quality
Well-organized, readable, and documented code.
Signup and view all the flashcards
User-Friendliness
User-Friendliness
How easy it is for users to use and navigate a website.
Signup and view all the flashcards
Functionality
Functionality
Making sure all parts of the website work correctly.
Signup and view all the flashcards
Website Accessibility
Website Accessibility
The practice of making a website accessible to people with disabilities.
Signup and view all the flashcards
Layout Design
Layout Design
The process of arranging elements on a page in a visually appealing way.
Signup and view all the flashcards
Color Palette
Color Palette
The art of choosing appropriate colors for a website.
Signup and view all the flashcards
Typography
Typography
The style and typeface used for text on a website.
Signup and view all the flashcards
Multimedia Integration
Multimedia Integration
Using multimedia elements to enhance the user experience.
Signup and view all the flashcards
Page Load Time
Page Load Time
The speed at which a website's pages load in a web browser.
Signup and view all the flashcards
SEO Keywords
SEO Keywords
Keywords or phrases that help search engines understand your website's content.
Signup and view all the flashcards
Creative Commons License
Creative Commons License
A license that allows others to use, share, and modify your work.
Signup and view all the flashcards
Cross-Browser Compatibility
Cross-Browser Compatibility
A method of ensuring a website looks consistent across different browsers.
Signup and view all the flashcards
Web Security
Web Security
A practice of securing a website from potential security threats, e.g., XSS.
Signup and view all the flashcards
HTML Semantics
HTML Semantics
Structure and semantic meaning of the code using HTML tags.
Signup and view all the flashcards
Ad Placement
Ad Placement
The placement of ads on a website to generate revenue.
Signup and view all the flashcardsStudy Notes
- The exam duration is 3 days.
Exam Task 1: Responsive Homepage Design (30 Marks)
- Create a responsive homepage for a fictional e-commerce website selling gadgets.
- A navigation bar with at least 4 links must be included (e.g., Home, Products, About Us, and Contact).
- A hero section (carousel) with a background image and left-center text above the carousel, including a call-to-action button (e.g., "Shop Now") is required.
- The page adapts to both mobile and desktop screens using bootstrap 5.3.
Exam Task 2: Product Listing Page (30 Marks)
- Design a product listing page for the same website.
- The page must display at least 16 products using a bootstrap grid.
- Each product must show an image, name, price, and a button (e.g., "Add to Cart"). Style the page using CSS to ensure visual appeal.
Exam Task 3: Form Validation (20 Marks)
- Create a "Contact Us" form that includes fields for name, email, phone number, and message.
Exam Task 4: Footer Design (20 Marks)
- Design a professional footer for the e-commerce website, including an "About Us" section with a short description of the website or company.
- Include quick links to key pages (e.g., Home, Products, Contact Us, FAQ).
- Add contact information (email, phone number, and address).
- Include social media icons or links to at least 3 social media platforms.
- Style the footer to match the overall design of the website.
- Ensure the footer is responsive and sticks to the bottom of the page.
Bonus Task: Interactivity (10 Marks)
- Create a hover effect for the product listing page to display additional details (e.g., a short description or discount).
Submission Instructions
- Save all work in a folder named: Midterm_.
- Submit the folder or hosted project link via the provided submission method.
Evaluation Criteria
- Code Quality: Readability, structure, and comments.
- Responsiveness: Pages should work well on different devices.
- Aesthetics: Visual design and user-friendliness.
- Functionality: Ensure all features work as expected.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
