Code Monkey home page Code Monkey logo

ecommerce-landing-page's Introduction

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:

  • Implement ARIA (Accessible Rich Internet Applications) attributes to enhance the accessibility of interactive elements such as buttons, menus, and forms.
  • 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

ecommerce-landing-page's People

Contributors

shammaaziz112 avatar yazanalhalabi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.