Skip to content

A simple E-commerce landing page developed using HTML & SASS.

Notifications You must be signed in to change notification settings

Ifamunas/E-commerce-landing-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Assignment: E-commerce Landing Page - HTML/CSS/SASS/Animation

Sub-Assignment: Develop an Ecommerce Landing Page (HTML & Web Accessibility)

Level 1: Basic Requirements

  • Create a basic Ecommerce landing page with HTML which should include:
  • A header section with a logo and navigation menu.
  • A hero section with a catchy headline, subheading, and a call-to-action button.
  • A product showcase section with images, titles, and brief descriptions of featured products.
  • Incorporate customer reviews or testimonials to build trust and credibility.
  • Integrate a newsletter subscription form to capture user email addresses for marketing purposes.
  • A footer section with links to important pages, contact information, and social media icons.
  • Conduct accessibility testing using automated tools and assistive technologies, and fix any identified issues.

Level 2: Additional Requirements

Implement the following in addition to the basic requirements:

  • Use proper form labeling techniques, associating labels with their respective form controls.
  • Ensure that the website is fully navigable and usable using only a keyboard, without relying on mouse interactions.

Level 3: Bonus Requirements (Optional)

Peer Review:

  • Review the code and implementation of 2 assignments from other participants.
  • Provide constructive feedback and suggestions for improvement.

Please note that the bonus requirements and reviews are optional and can be completed if you have additional time and advanced skills.

Happy coding!

Sub-assignment: CSS Styling

Level 1: Basic Requirements

  • Implement a sticky header or footer to ensure navigation or important information remains visible while scrolling.
  • Create a responsive layout using CSS Grid or Flexbox to ensure proper alignment and positioning of page elements.

Level 2: Additional Requirements

  • Implement a responsive design that adapts to different screen sizes and devices using media queries.
  • Implement CSS animations or transitions to enhance user interactions and visual feedback.

Level 3: Bonus Requirements (Optional)

Peer Review

Sub-assignment 3: Sass Integration

Level 1: Basic Requirements

  • Use variables in Sass to define and reuse common values like colors, fonts, or spacing.
  • Use nesting to organize styles within different sections or components of the landing page.

Level 2: Additional Requirements

  • Utilize Sass mixins to create reusable styles for buttons, forms, or other UI components.
  • Implement Sass partials to separate styles for different sections or components into separate files.

Level 3: Bonus Requirements (Optional)

Peer Review

About

A simple E-commerce landing page developed using HTML & SASS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published