├── .vite └── deps_temp │ └── package.json ├── icon.png ├── postcss.config.js ├── src ├── App.css ├── styles │ ├── main.css │ ├── errorpage.css │ ├── allcourse.css │ ├── sidemenu.css │ ├── featured.css │ ├── navbar.css │ └── footer.css ├── main.jsx ├── components │ ├── NaviBar.jsx │ ├── titleTop.jsx │ ├── main.jsx │ ├── footer.jsx │ ├── ErrorPage.jsx │ ├── Layout.jsx │ ├── Dashboard.jsx │ ├── Outsideclick.jsx │ ├── featured.jsx │ ├── data │ │ ├── featured.json │ │ └── allcourses.json │ ├── allcourse.jsx │ ├── sidemenu.jsx │ ├── AboutPage.jsx │ └── navbar.jsx ├── hooks │ └── useDashboard.js ├── App.jsx └── index.css ├── .github └── FUNDING.yml ├── vite.config.js ├── .gitignore ├── package.json ├── LICENSE ├── public └── vite.svg ├── index.html ├── CONTRIBUTING.md ├── tailwind.config.js ├── CODE_OF_CONDUCT.md └── README.md /.vite/deps_temp/package.json: -------------------------------------------------------------------------------- 1 | {"type":"module"} -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FarhaKousar1601/Free-courses-with-Certificates/main/icon.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap"); 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [avinash201199] 4 | 5 | custom: ["https://paypal.me/Avinash425"] 6 | -------------------------------------------------------------------------------- /src/styles/main.css: -------------------------------------------------------------------------------- 1 | .main { 2 | width: 85vw; 3 | } 4 | 5 | .margin-left-for-fixed { 6 | margin-left: 16vw; 7 | } 8 | 9 | .spacing { 10 | /* margin: 50px 60px 0px 60px; */ 11 | } 12 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render(); 7 | -------------------------------------------------------------------------------- /src/components/NaviBar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UserCircle } from "lucide-react"; 3 | const NaviBar = () => { 4 | return ( 5 | 13 | ); 14 | }; 15 | 16 | export default NaviBar; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/components/titleTop.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function titleTop() { 4 | return ( 5 |
6 | code 7 | Free Courses with Certificates 8 | code_off 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Featured from "./featured"; 3 | import AllCourse from "./allcourse"; 4 | import "../styles/main.css"; 5 | 6 | export default function main(props) { 7 | return ( 8 |
9 |
10 | 11 | 12 |
13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/components/footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "../styles/footer.css"; 3 | export default function Footer() { 4 | return ( 5 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/hooks/useDashboard.js: -------------------------------------------------------------------------------- 1 | export default function useDashboard(courseData) { 2 | let coursesArray = courseData.map((eachCourse) => { 3 | return { 4 | name: eachCourse.title, 5 | "Number Of Courses": eachCourse.cards.length, 6 | }; 7 | }); 8 | return coursesArray; 9 | } 10 | 11 | const chartdata = [ 12 | { 13 | name: "Amphibians", 14 | "Number of threatened species": 2488, 15 | }, 16 | { 17 | name: "Birds", 18 | "Number of threatened species": 1445, 19 | }, 20 | { 21 | name: "Crustaceans", 22 | "Number of threatened species": 743, 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /src/components/ErrorPage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "../styles/errorpage.css"; 3 | import { Link } from "react-router-dom"; 4 | const ErrorPage = () => { 5 | return ( 6 |
7 |
8 |
9 |

404

10 |
11 |
12 |

The page you are looking for was not found.

13 | 14 | Back to Home 15 | 16 |
17 |
18 |
19 | ); 20 | }; 21 | 22 | export default ErrorPage; 23 | -------------------------------------------------------------------------------- /src/styles/errorpage.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .four_zero_four_bg { 4 | background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif); 5 | height:500px; 6 | background-position: center; 7 | background-repeat: no-repeat; 8 | } 9 | 10 | .four_zero_four_bg h1 { 11 | font-size: 80px; 12 | } 13 | 14 | .four_zero_four_bg h3 { 15 | font-size: 80px; 16 | } 17 | 18 | .link_404 { 19 | color: #fff !important; 20 | padding: 10px 20px; 21 | background: #2a66df; 22 | margin: 20px 0; 23 | display: inline-block; 24 | } 25 | .contant_box_404 { 26 | /* margin-top: -50px; */ 27 | text-align: center; 28 | } 29 | 30 | .flex-custom { 31 | display: flex; 32 | flex-direction: column; 33 | justify-content: center; 34 | margin:auto; 35 | width: 100%; 36 | height: 100vh; 37 | } 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "free-courses-with-certificates", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tremor/react": "^3.8.2", 13 | "bootstrap": "^5.2.2", 14 | "framer-motion": "^10.16.4", 15 | "lucide-react": "^0.279.0", 16 | "react": "^18.2.0", 17 | "react-bootstrap": "^2.5.0", 18 | "react-collapsible": "^2.10.0", 19 | "react-dom": "^18.2.0", 20 | "react-icons": "^4.11.0", 21 | "react-router-dom": "^6.4.2" 22 | }, 23 | "devDependencies": { 24 | "@types/react": "^18.0.17", 25 | "@types/react-dom": "^18.0.6", 26 | "@vitejs/plugin-react": "^2.1.0", 27 | "autoprefixer": "^10.4.16", 28 | "postcss": "^8.4.31", 29 | "tailwindcss": "^3.3.3", 30 | "vite": "^3.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/styles/allcourse.css: -------------------------------------------------------------------------------- 1 | .Collapsible { 2 | margin-bottom: 20px; 3 | } 4 | 5 | .collapse-main > span, 6 | .is-open { 7 | font-size: 1.1rem; 8 | width: 88% !important; 9 | display: block; 10 | padding: 20px 40px; 11 | transition: all 0.3s ease-in-out; 12 | text-transform: uppercase; 13 | background: #fff; 14 | margin: 0 auto; 15 | border-top: 1px solid rgb(177, 177, 177); 16 | border-left: 1px solid rgb(177, 177, 177); 17 | border-right: 1px solid rgb(177, 177, 177); 18 | border-radius: 20px 20px 0 0; 19 | z-index: 2; 20 | overflow: hidden; 21 | box-shadow: 0 0 10px rrgb(177, 177, 177); 22 | } 23 | 24 | .collapse-main > span:hover, 25 | .collapse-main > span, 26 | .is-open { 27 | background: #219bff; 28 | color: #fff; 29 | } 30 | 31 | .Collapsible__contentOuter { 32 | background: #fff; 33 | width: 88%; 34 | margin: 0 auto; 35 | } 36 | 37 | .Collapsible__contentInner { 38 | padding: 20px 40px; 39 | } 40 | -------------------------------------------------------------------------------- /src/components/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "../App.css"; 3 | import "../index.css"; 4 | import { Outlet, useLocation } from "react-router-dom"; 5 | import SideMenu from "./sidemenu"; 6 | import TitleTop from "./titleTop"; 7 | // import Navbar from "./navbar"; 8 | import Footer from "./footer"; 9 | 10 | const Layout = (props) => { 11 | const [active, inactive] = useState(false); 12 | const [query, setQuery] = useState(""); 13 | const location = useLocation(); 14 | 15 | const toggleSideMenu = () => { 16 | inactive(!active); 17 | // console.log("yo"); 18 | }; 19 | 20 | return ( 21 | <> 22 | 23 | {/* */} 24 | {/* {location.pathname !== "/about" && ( */} 25 | 26 | {/* )} */} 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default Layout; 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Avinash Singh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import { Card, Title, BarChart, Subtitle } from "@tremor/react"; 2 | import useDashboard from "../hooks/useDashboard"; 3 | import courseData from "./data/allcourses.json"; 4 | import Footer from "./footer"; 5 | 6 | const dataFormatter = (number) => { 7 | return number.toString(); 8 | }; 9 | 10 | export default function Dashboard() { 11 | const dashBoardData = useDashboard(courseData); 12 | return ( 13 |
14 | Dashboard 15 | 16 | Number of courses 17 | 18 | 28 | 29 |
30 | 31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /src/components/Outsideclick.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | /** 5 | * Hook that alerts clicks outside of the passed ref 6 | */ 7 | function useOutsideAlerter(ref, closeSearch) { 8 | useEffect(() => { 9 | /** 10 | * Alert if clicked on outside of element 11 | */ 12 | function handleClickOutside(event) { 13 | if (ref.current && !ref.current.contains(event.target)) { 14 | closeSearch(); 15 | } 16 | } 17 | // Bind the event listener 18 | document.addEventListener("mousedown", handleClickOutside); 19 | return () => { 20 | // Unbind the event listener on clean up 21 | document.removeEventListener("mousedown", handleClickOutside); 22 | }; 23 | }, [ref]); 24 | } 25 | 26 | /** 27 | * Component that alerts if you click outside of it 28 | */ 29 | function OutsideAlerter(props) { 30 | const wrapperRef = useRef(null); 31 | useOutsideAlerter(wrapperRef, props.closeSearch); 32 | 33 | return
{props.children}
; 34 | } 35 | 36 | OutsideAlerter.propTypes = { 37 | children: PropTypes.element.isRequired, 38 | }; 39 | 40 | export default OutsideAlerter; 41 | -------------------------------------------------------------------------------- /src/styles/sidemenu.css: -------------------------------------------------------------------------------- 1 | .sidemenu-bar { 2 | padding: 20px 0; 3 | background: #216fff; 4 | z-index: 100; 5 | height: 100%; 6 | width: 15vw; 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | font-weight: 400; 11 | z-index: 101; 12 | /* display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: space-between; */ 16 | } 17 | 18 | .sidemenu-close { 19 | display: none; 20 | } 21 | 22 | .sidemenu-bar-title { 23 | font-size: 1.2rem; 24 | font-weight: 700; 25 | text-transform: uppercase; 26 | padding: 10px; 27 | text-align: center; 28 | color: #fff; 29 | margin-bottom: 150px; 30 | } 31 | 32 | .sidemenu-bar-list { 33 | padding-left: 20px; 34 | width: 100%; 35 | } 36 | 37 | .sidemenu-bar-items { 38 | color: #fff; 39 | list-style: none; 40 | cursor: pointer; 41 | margin-bottom: 10px; 42 | text-align: center; 43 | font-weight: 400; 44 | text-transform: uppercase; 45 | display: flex; 46 | align-items: center; 47 | justify-content: flex-start; 48 | transition: all 0.2s ease; 49 | padding: 10px 15px; 50 | border-radius: 10px 0 0 10px; 51 | } 52 | 53 | .sidemenu-bar-items > span { 54 | margin-right: 4px; 55 | } 56 | 57 | .sidemenu-bar-items:hover { 58 | background: #fff; 59 | color: #216fff; 60 | } 61 | -------------------------------------------------------------------------------- /src/components/featured.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import featuredData from "../components/data/featured.json"; 3 | import "../styles/featured.css"; 4 | import Navbar from "./navbar"; 5 | 6 | const Data = featuredData.map((data, key) => { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 |
14 | {data.name} 15 |
16 |
17 |
Source: {data.source}
18 |
19 |
Price: Free
20 | 21 | Go to Course 22 | 23 |
24 |
25 | ); 26 | }); 27 | 28 | export default function featured() { 29 | return ( 30 |
31 | 32 |
33 |
34 | Featured Courses 35 |
36 |
37 |
38 |
{Data}
39 |
40 |
41 |
42 |
43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /src/components/data/featured.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "icon": "fab fa-android", 4 | "name": "Android Application Development", 5 | "source": "Great Learning", 6 | "link": "https://www.greatlearning.in/academy/learn-for-free/courses/android-application-development" 7 | }, 8 | { 9 | "icon": "fa-solid fa-desktop", 10 | "name": "Machine Learning", 11 | "source": "Sololearn", 12 | "link": "https://www.sololearn.com/learning/1094" 13 | }, 14 | { 15 | "icon": "fab fa-linux", 16 | "name": "Free Linux course", 17 | "source": "Geek University", 18 | "link": "https://geek-university.com/course/free-linux-course/" 19 | }, 20 | { 21 | "icon": "fab fa-github", 22 | "name": "GitHub Tutorial for Beginners", 23 | "source": "Great Learning Academy", 24 | "link": "https://www.greatlearning.in/academy/learn-for-free/courses/github-tutorial-for-beginners" 25 | }, 26 | { 27 | "icon": "fab fa-react", 28 | "name": "React + Redux", 29 | "source": "Sololearn", 30 | "link": "https://www.sololearn.com/learning/1097" 31 | }, 32 | { 33 | "icon": "fab fa-docker", 34 | "name": "Docker Best Practices", 35 | "source": "Great Learning Academy", 36 | "link": "https://www.greatlearning.in/academy/learn-for-free/courses/docker-best-practices" 37 | } 38 | ] -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/allcourse.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Collapsible from "react-collapsible"; 3 | import courses from "../components/data/allcourses.json"; 4 | import "../styles/allcourse.css"; 5 | import Footer from "./footer"; 6 | 7 | const Data = courses.map((data, key) => { 8 | return ( 9 | 15 | {data.cards.map((card, key) => { 16 | return ( 17 |
22 |
23 |
24 | 25 |
26 |
27 | {card.name} 28 |
29 |
30 |
31 |
Price: Free
32 | 33 | Go to Course 34 | 35 |
36 |
37 | ); 38 | })} 39 | 40 | ); 41 | }); 42 | 43 | export default function allcourse() { 44 | return ( 45 |
46 |
47 |
All Courses
48 |
49 | {Data} 50 |
51 |
52 |
53 |
54 |
55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Link, BrowserRouter, Routes, Route, Outlet } from "react-router-dom"; 2 | 3 | import Layout from "./components/Layout"; 4 | import Dashboard from "./components/Dashboard"; 5 | // function App() { 6 | 7 | // return ( 8 | // <> 9 | // 10 | //