Skip to content

Commit 469958a

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #50 from codeharborhub/dev-1
Update: Cards added
2 parents d85817c + 079ff20 commit 469958a

File tree

7 files changed

+450
-26
lines changed

7 files changed

+450
-26
lines changed

‎docs/index.mdx‎

Lines changed: 93 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,115 @@
11
---
2-
title: Welcome to CodeHarborHub
2+
title: CodeHarborHub Tutorials
3+
hide_table_of_contents: false
34
sidebar_position: 1
45
slug: /
56
---
67

7-
Hello, and welcome to CodeHarborHub! Our mission is to provide accessible and comprehensive educational resources to learners of all levels, from beginners to advanced professionals. Whether you're looking to kickstart your career in web development, master a new programming language, or stay updated on the latest tech trends, we've got you covered.
8+
<head>
9+
<title>CodeHarborHub Tutorials | Learn HTML, CSS, JavaScript, and More</title>
10+
<meta
11+
name="description"
12+
content="Explore free tutorials on HTML, CSS, JavaScript, React, Node.js, Python, and more at CodeHarborHub. Learn modern web development and build real-world projects."
13+
/>
14+
<style>{`
15+
:root {
16+
--doc-item-container-width: 60rem;
17+
}
18+
`}</style>
19+
</head>
820

9-
<AdsComponent />
1021

11-
<br />
22+
Hello, and welcome to **CodeHarborHub**!
1223

13-
With a team of experienced instructors and industry experts, we offer a diverse range of courses and learning paths tailored to meet your specific goals and interests. Join our community today and embark on your journey towards success in the tech industry!
24+
Our mission is to provide accessible and comprehensive educational resources for all levels — from beginners to professionals. Whether you want to **kickstart your career**, **master a new language**, or **stay updated with the latest tech**, you’ll find everything you need here.
25+
26+
<AdsComponent />
27+
28+
With a team of experienced instructors and open-source contributors, we offer a wide range of tutorials designed to help you grow your skills with hands-on learning.
1429

1530
## What is CodeHarborHub?
1631

1732
<LiteYouTubeEmbed
18-
id="lI3RBnK8V6Y"
19-
params="autoplay=1&autohide=1&showinfo=0&rel=0"
20-
title="CodeHarborHub Website Introduction | CodeHarborHub Website Overview | CodeHarborHub Website Features"
21-
poster="maxresdefault"
22-
webp />
23-
24-
<br />
33+
id="lI3RBnK8V6Y"
34+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
35+
title="CodeHarborHub Website Overview"
36+
poster="maxresdefault"
37+
webp
38+
/>
2539

26-
CodeHarborHub is an online platform that offers a wide range of tech courses and tutorials to help you learn new skills and advance your career. Our courses cover a variety of topics, including web development, programming languages, data science, and more. Whether you're a beginner looking to get started in tech or an experienced professional looking to expand your skill set, we have something for everyone.
40+
<br />
2741

28-
## Why Choose CodeHarborHub?
42+
**CodeHarborHub** is a free platform that empowers learners with structured tutorials, project-based lessons, and real-world challenges.
43+
We cover topics including **Frontend**, **Backend**, **AI**, **Data Science**, and **Cloud Computing**.
2944

30-
There are many reasons to choose CodeHarborHub for your tech education needs. Here are just a few:
45+
## Why Learn with CodeHarborHub?
3146

32-
- **Quality Content**: Our courses are created by experienced instructors and industry experts who are passionate about teaching and helping others succeed. You can trust that you're getting the most up-to-date and relevant information when you enroll in a course on CodeHarborHub. And most importantly, our courses are designed to be engaging and fun, so you'll enjoy the learning process.
33-
- **Flexibility**: We understand that everyone has different learning styles and schedules, which is why we offer a variety of course formats to suit your needs. Whether you prefer to learn at your own pace or in a structured environment, we have options that will work for you.
34-
- **Community**: When you join CodeHarborHub, you're not just enrolling in a course – you're joining a community of like-minded individuals who are passionate about tech and learning. Our community is a great place to connect with others, ask questions, and share your knowledge and experiences.
35-
- **Free of cost**: All the courses and tutorials on CodeHarborHub are completely free of cost. You can access them anytime, anywhere, without having to worry about subscription fees or hidden costs. We believe that quality education should be accessible to everyone, which is why we're committed to providing our content for free.
36-
- **Beginner-Friendly**: Whether you're brand new to tech or have some experience under your belt, our courses are designed to be beginner-friendly and easy to follow. We break down complex concepts into simple, easy-to-understand lessons, so you can learn at your own pace and build your skills from the ground up.
37-
- **Comprehensive Curriculum**: Our course catalog covers a wide range of topics, from web development and programming languages to data science and machine learning. Whether you're interested in front-end development, back-end development, or something in between, we have courses that will help you achieve your goals.
38-
- **Hands-On Projects**: Learning by doing is one of the most effective ways to master new skills, which is why our courses include hands-on projects and assignments that will help you apply what you've learned in a real-world context. By working on projects, you'll gain practical experience and build a portfolio that showcases your skills to potential employers.
39-
- **Career Opportunities**: By learning new skills on CodeHarborHub, you'll be better equipped to advance your career and pursue new opportunities in the tech industry. Whether you're looking to land your dream job, start your own business, or freelance as a developer, our courses will help you get there.
40-
- **Continuous Learning**: Technology is constantly evolving, which means that there's always something new to learn. CodeHarborHub is committed to helping you stay up-to-date on the latest trends and technologies in the tech industry, so you can continue to grow and thrive in your career.
41-
- **Feedback and Support**: Our instructors and support team are here to help you every step of the way. If you have questions or need assistance, don't hesitate to reach out – we're here to ensure that you have a positive learning experience on CodeHarborHub.
47+
- **Completely Free** — Access all tutorials anytime, anywhere.
48+
- **Project-Based Learning** — Build hands-on projects and grow your portfolio.
49+
- **Beginner to Advanced** — Learn at your own pace with structured paths.
50+
- **Community Support** — Collaborate, share, and contribute to open-source projects.
51+
- **Continuous Updates** — Stay up-to-date with modern frameworks and technologies.
4252

4353
<AdsComponent />
54+
55+
<h2 style={{textAlign:"center"}}>Explore Tutorials by Technology</h2>
56+
57+
<br />
58+
59+
<DocsCards>
60+
61+
<DocsCard header="HTML" href="/tutorial/category/html" icon="/icons/html-5.svg">
62+
<p>Learn the building blocks of the web — HTML. Understand tags, attributes, forms, and layout fundamentals to create structured webpages.</p>
63+
</DocsCard>
64+
65+
<DocsCard header="CSS" href="/tutorial/category/css" icon="/icons/css.svg">
66+
<p>Master styling with CSS. Learn Flexbox, Grid, animations, and responsive design techniques for beautiful interfaces.</p>
67+
</DocsCard>
68+
69+
<DocsCard header="JavaScript" href="/tutorial/category/javascript" icon="/icons/js.svg">
70+
<p>From basics to advanced — learn JavaScript programming, DOM manipulation, and ES6+ features to bring interactivity to your projects.</p>
71+
</DocsCard>
72+
73+
<DocsCard header="React.js" href="/tutorial/category/react" icon="/icons/jsx.svg">
74+
<p>Dive into React and learn how to build modern single-page applications with reusable components and hooks.</p>
75+
</DocsCard>
76+
77+
<DocsCard header="Node.js" href="#" icon="/icons/node-js.svg">
78+
<p>Learn backend development using Node.js and Express. Build RESTful APIs and integrate with databases like MongoDB.</p>
79+
</DocsCard>
80+
81+
<DocsCard header="Python" href="#" icon="/icons/py.svg">
82+
<p>Get started with Python programming. Learn syntax, data structures, and how to build automation scripts or web apps.</p>
83+
</DocsCard>
84+
85+
<DocsCard header="Git & GitHub" href="/tutorial/category/github" icon="/icons/github.svg">
86+
<p>Understand version control, branching, and collaboration with Git and GitHub for open-source development.</p>
87+
</DocsCard>
88+
89+
<DocsCard header="Tailwind CSS" href="#" icon="/icons/tailwind-css.svg">
90+
<p>Build responsive UIs faster with Tailwind CSS. Learn utility-first styling and advanced customization.</p>
91+
</DocsCard>
92+
93+
<DocsCard header="TypeScript" href="#" icon="/icons/ts.svg">
94+
<p>Enhance your JavaScript with static typing. Learn TypeScript to write scalable and maintainable applications.</p>
95+
</DocsCard>
96+
97+
<DocsCard header="Next.js" href="#" icon="/icons/next-js.svg">
98+
<p>Learn server-side rendering and static site generation with Next.js — the React framework for production-ready apps.</p>
99+
</DocsCard>
100+
101+
<DocsCard header="MongoDB" href="#" icon="/icons/mongodb.svg">
102+
<p>Learn NoSQL database concepts with MongoDB. Store, query, and manage data efficiently for modern applications.</p>
103+
</DocsCard>
104+
105+
<DocsCard header="AI & Machine Learning" href="#" icon="/icons/ai-chat.svg">
106+
<p>Explore artificial intelligence, machine learning, and neural networks with beginner-friendly examples.</p>
107+
</DocsCard>
108+
109+
</DocsCards>
110+
44111
<br />
45112

46113
## Get Started Today!
47114

48-
Ready to start your learning journey with CodeHarborHub? Browse our course catalog to find the perfect course for you, or check out our tutorials to learn something new today. We can't wait to see what you'll accomplish with CodeHarborHub – welcome aboard!
115+
Browse the tutorials above to begin your journey with **CodeHarborHub**. Keep learning, keep building, and let’s create the future of technology together.

‎src/components/DocsCard/index.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import Link from '@docusaurus/Link';
4+
import useBaseUrl from '@docusaurus/useBaseUrl';
5+
6+
import styles from './styles.module.css';
7+
8+
interface Props extends React.HTMLAttributes<HTMLDivElement> {
9+
href?: string;
10+
header?: string;
11+
icon?: string;
12+
hoverIcon?: string;
13+
iconset?: string;
14+
ionicon?: string;
15+
img?: string;
16+
size?: 'md' | 'lg';
17+
}
18+
19+
function DocsCard(props: Props): JSX.Element {
20+
const isStatic = typeof props.href === 'undefined';
21+
const isOutbound = typeof props.href !== 'undefined' ? /^http/.test(props.href) : false;
22+
const header = props.header === 'undefined' ? null : <header className="Card-header">{props.header}</header>;
23+
const hoverIcon = props.hoverIcon || props.icon;
24+
25+
const content = (
26+
<>
27+
{props.img && <img src={useBaseUrl(props.img)} className="Card-image" />}
28+
<div className="Card-container">
29+
{(props.icon || hoverIcon) && (
30+
<div className="Card-icon-row">
31+
{/* {props.icon && <img src={useBaseUrl(props.icon)} className="Card-icon Card-icon-default" />} */}
32+
{hoverIcon && <img src={useBaseUrl(hoverIcon)} className="Card-icon Card-icon-hover" />}
33+
</div>
34+
)}
35+
{props.ionicon && <ion-icon name={props.ionicon} className="Card-ionicon"></ion-icon>}
36+
{props.iconset && (
37+
<div className="Card-iconset__container">
38+
{props.iconset.split(',').map((icon, index) => (
39+
<img
40+
src={useBaseUrl(icon)}
41+
className={`Card-icon ${index === props.activeIndex ? 'Card-icon-active' : ''}`}
42+
data-index={index}
43+
key={index}
44+
/>
45+
))}
46+
</div>
47+
)}
48+
<h3>
49+
{props.header && header}
50+
</h3>
51+
<div className="Card-content">
52+
<p>
53+
{props.children}
54+
</p>
55+
</div>
56+
</div>
57+
</>
58+
);
59+
60+
const className = clsx({
61+
'Card-with-image': typeof props.img !== 'undefined',
62+
'Card-without-image': typeof props.img === 'undefined',
63+
'Card-size-lg': props.size === 'lg',
64+
[props.className]: props.className,
65+
});
66+
67+
if (isStatic) {
68+
return (
69+
<docs-card class={className}>
70+
<div className={clsx(styles.card, 'docs-card')}>{content}</div>
71+
</docs-card>
72+
);
73+
}
74+
75+
if (isOutbound) {
76+
return (
77+
<docs-card class={className}>
78+
<a className={clsx(styles.card, 'docs-card')} href={props.href} target="_blank">
79+
{content}
80+
</a>
81+
</docs-card>
82+
);
83+
}
84+
85+
return (
86+
<docs-card class={className}>
87+
<Link to={props.href} className={clsx(styles.card, 'docs-card')}>
88+
{content}
89+
</Link>
90+
</docs-card>
91+
);
92+
}
93+
94+
export default DocsCard;

0 commit comments

Comments
 (0)