https://github.com/sagorranait/fronted-test-task
I converted the Figma design into clean, well-structured code, implementing the design elements and front-end functionality while ensuring cross-browser compatibility and responsiveness.
https://github.com/sagorranait/fronted-test-task
css globals html html-css-javascript javascript postcss react-dom reactjs tailwindcss vite
Last synced: 3 months ago
JSON representation
I converted the Figma design into clean, well-structured code, implementing the design elements and front-end functionality while ensuring cross-browser compatibility and responsiveness.
- Host: GitHub
- URL: https://github.com/sagorranait/fronted-test-task
- Owner: sagorranait
- Created: 2024-12-19T18:27:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-19T19:17:47.000Z (over 1 year ago)
- Last Synced: 2025-02-13T08:35:13.168Z (over 1 year ago)
- Topics: css, globals, html, html-css-javascript, javascript, postcss, react-dom, reactjs, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 749 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Assignment (Front End)
I converted the Figma design into clean, well-structured code, implementing the design elements and front-end functionality while ensuring cross-browser compatibility and responsiveness.
Frontend Test Task (HTML): [https://frontend-task-html.netlify.app](https://frontend-task-html.netlify.app/)
Frontend Test Task (Reactjs): [https://fronted-task-reactjs.netlify.app](https://fronted-task-reactjs.netlify.app/)
## Project Features
1. **Responsive Design**
- I created a fully responsive design that ensures usability across all device sizes, including mobile, tablet, and desktop.
- Pixel-perfect layout and design implementation as per the Figma design.
2. **Cross-Browser Compatibility**
- I have ensured a consistent user experience across all modern browsers.
3. **Styling Options**
- I've utilized custom CSS along with Tailwind CSS for efficient development and a cohesive design.
4. **Interactive Elements**
- Follows ES6 standards, I write clean, modern JavaScript code.
5. **Scalable Codebase**
- Code is well-structured and maintainable for future scalability and ease of modifications.
6. **Pixel-Perfect Conversion**
- High attention to detail to match every design element, ensuring the webpage mirrors the Figma design exactly.
7. **Static Webpage**
- Converts the Figma design into plain HTML with static front-end functionality using Vanilla JavaScript.
8. **React/Vue Implementation**
- I have implemented the design in both plain HTML and a component-based framework like React for improved reusability and adherence to modern development practices.