Cognifyz Frontend Internship Project

This repository contains the frontend project I developed during my internship at Cognifyz Technologies. The project showcases my skills and knowledge in HTML, CSS, JavaScript, and advanced frontend practices including Sass preprocessing and Tailwind CSS.

Project Overview

The goal of this project was to build a responsive and interactive webpage while demonstrating the following:

• Basic HTML structure (headings, paragraphs, images)
• Inline CSS styling with responsiveness handled in an external stylesheet
• Responsive design using media queries and Tailwind CSS
• Advanced CSS preprocessing with Sass for enhanced code organization, reusability, and maintainability
• Dynamic content fetching from a public API
• Interactive elements like buttons to change background color
• CSS animations and transitions for a smooth user experience

Technologies Used

• HTML
• CSS
• Tailwind
• scss
• JavaScript

Project Structure

• HTML - Markup structure of the webpage
• CSS - Styling, including Sass preprocessing
• JavaScript - Interactive functionality and API integration
• Tailwind CSS - Utility-first CSS framework for responsive design
• Sass - CSS preprocessor used for organizing styles and defining variables

Key Milestones & Tasks Completed

1. HTML & CSS Basics: Developed the structure and styling of the webpage.
2. Responsive Design: Ensured the webpage adapts to different screen sizes using Tailwind CSS and media queries.
3. Sass Preprocessing: Implemented Sass to enhance the organization of CSS, including variables for colors and font sizes, as well as nested styles.
4. JavaScript Functionality: Added interactive elements like the "Read More" button and dynamic content fetched from a public API.
5. API Integration: Successfully fetched user data from a public API and displayed it dynamically on the webpage.
6. Final Styling Adjustments: Refined the design and layout with Tailwind CSS and animations for a polished look.

How to Run the Project

1. Clone the repository: git clone https://github.com/suhaibmuhd01/cognifyz-frontend-intern.git
2. run npm install in your terminal.
3. Open index.html in your web browser.

Features

• Responsive design that adapts to various screen sizes (mobile, tablet, desktop).
• Dynamic content fetched from a public API and displayed interactively.
• Interactive buttons and hover effects.
• Smooth animations and transitions for a better user experience.
• Sass used for advanced CSS features and better maintainability.

Future Enhancements

• Implement additional API integrations for more dynamic content.
• Add more advanced JavaScript features for interactivity.
• Further improve design and user experience with custom components.

Author

Suhaib Muhammad Babangida (Dev)

Acknowledgments

• Cognifyz Technologies for providing the internship opportunity and valuable guidance throughout the project.
• Muhammad Nadheer (Brother) for his unwavering support, help, and guidance in completing this project.