This repository contains the frontend projects that I've built, with a focus on various web development frameworks and tools such as React, Tailwind CSS, and more.
- Introduction
- Naming Conventions
- Projects
- Installation
- Usage
- Features
- Demo
- Contributing
- License
This repository is a collection of frontend projects that I've built using various web development frameworks and tools. Each project has its own directory, containing its source code and related files. The goal of this repository is to showcase my frontend development skills and provide examples of my work.
The projects in this repository follow the following naming conventions:
- Mini Project: Projects that start with "Mini Project" are focused on HTML, CSS, and CSS frameworks like Bootstrap or Tailwind.
- Small Project: Projects that start with "Small Project" are focused on HTML, CSS, JavaScript, and CSS frameworks like Bootstrap or Tailwind
- Medium Project: Projects that start with "Medium Project" are focused on HTML, CSS, JavaScript, frontend frameworks such as (Vue) and CSS frameworks like Bootstrap or Tailwind
- Project: Projects that start with "Project" are focused on HTML, CSS, JavaScript, frontend frameworks such as (React), Uses 3rd party api/library and CSS frameworks like Bootstrap or Tailwind
- Design Project: Projects that start with "Design Project" are focused on creative design work using HTML and CSS, such as creating an image of a character or a flag using only CSS.
->So the "Project" titled Projects contains every aspect of frontend development
This repository contains the following projects:
- Mini Project 1: A responsive Qr Code Component with Bootstrap and Minimal CSS | Visit Url >>
- Mini Project 2: Responsive Nft Card Component with Bootstrap and Minimal CSS | Visit Url >>
- Mini Project 3: Order Summary Card Component with TailwindCSS and Minimal CSS | Visit Url >>
- Mini Project 4: Results Summary Component with TailwindCSS and Minimal CSS | Visit Url >>
- Mini Project 5: Fully Fledged HTML CSS & BootstrapCss integrated Landing page | Visit Url >>
- Mini Project 6: Stats Preview Component with HTML, CSS, DaisyUI & TailwindCSS | Visit Url >>
- Mini Project 7: Testimonials Grid Section with TailwindCSS | Visit Url >>
- Mini Project 8: 3-col's preview card with TailwindCSS | Visit Url >>
- Mini Project 9: Fully Fledged Responsive Single Price Grid Component with TailwindCSS | Visit Url >>
- Mini Project 10: Responsive Product Preview Card component with TailwindCSS | Visit Url >>
- Mini Project 11: Profile card component with TailwindCSS | Visit Url >>
- Mini Project 12: Four card section with TailwindCss | Visit Url >>
- Mini Project 13: Faq Accordition Section with Typescript and TailwindCSS | Visit Url >>
- Mini Project 14: Vue app that checks how many days you have been on earth. | Visit Url >>
- Medium Project 1: Interactive Rating Component with VueJs, vue-router and TailwindCSS | Visit Url>>
- Project 1: Advice generator that uses VuejsCLI as framework with tailwindCSS as CSS framework with axios that fetches the advice api | Visit Url >>
- Project 2: Shortly Landing page with axios, Vuejs+Vite & Tailwindcss it makes your links shorter | Visit Url>>
- Project 1: Check it out from the link cryptocurrency loading animation with CSS | Visit Url >>
The installation process for each project may vary depending on its requirements. Please refer to the project's README.md file for detailed instructions on how to install and set up the project on your local machine.
In general, you may need to have certain software or tools installed, such as:
- Node.js
- npm (Node Package Manager)
- Yarn
- Git
- Vue
Again, please refer to the project's README.md file for detailed instructions on how to install and set up the project on your local machine.
To start the project, navigate to the project directory and run:
npm start or yarn start
This will launch the project in your default browser.
If the project requires React, you may also need to run:
npm install or yarn install
to install the required dependencies before starting the project.
Again, please refer to the project's README.md file for project-specific instructions on how to run and use the project.
Each project has its own set of features and functionalities, which are described in the project's README.md file. Some of the common features that I've implemented in my projects include:
- Responsive design using CSS frameworks like Bootstrap or Tailwind
- Building user interfaces with React
- Integrating charting libraries like Chart.js for data visualization
- Consuming APIs to display dynamic content
- Implementing form validation with client-side JavaScript
- Optimizing website performance using techniques like lazy loading and code splitting
Please note that these projects do not cover authentication and authorization as their main focus. If you're interested in learning more about those topics, there are other resources and tutorials available that can guide you through implementing them in your frontend projects.
Each project has its own demo, which can be accessed by visiting the project's live website or by running the project locally on your machine. The live website links are provided in the project's README.md file.
If you'd like to contribute to any of the projects, feel free to open an issue or submit a pull request.
This repository is licensed under the MIT License.