This project is built with HTML5, CSS, Tailwind,Vanilla JS (ES6), Test driven development and Mocha.
The HTML has:
- Two sections- .quote--section and .image--section
- A button to switch to the next testimonial or go to the previous slide
The CSS has:
-
Mobile first development
-
Tailwind - only used for general styling like margin and padding
-
BEM convention
-
Prefers light or dark mode
-
Variables
-
The organization of the styles.css will be (in descending order):
- Variables
- Resets
- All typography
- Media query for typography
- General styles
- The main tag will have the background image pattern-curve.svg(left bottom)
- Media query for General styles
- The .image--section (will have the background image pattern-bg.svg)
- Media query for .image--section
- The .quote--section (will have the background image pattern-quotes.svg(left top))
- Media query for .quote--section
The JavaScript has:
- Onclick to go to next slide / go to previous slide
- addClass function to add a transition for slide movement
- removeClass function to remove the class added for transition
users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Navigate the slider using either their mouse/track pad or keyboard
- Semantic HTML5 - HTML5 with clear and descriptive tags for better accessibility and search engine optimization
- Tailwind - A utility-first CSS framework
- Mobile-first workflow
- CSS - A utility-first CSS framework
- Mobile-first workflow
- Vanilla JavaScript - JavaScript
- Mocha - JavaScript testing framework
- TDD - Test driven development