diff --git a/.gitignore b/.gitignore index 254d4d4..ea74c01 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,7 @@ node_modules build .env -.docusaurus \ No newline at end of file +# Ignore docusaurus generated cache +.docusaurus/ +dist/ + diff --git a/docs/CSS/_category_.json b/docs/CSS/_category_.json new file mode 100644 index 0000000..6e84374 --- /dev/null +++ b/docs/CSS/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "CSS", + "position": 3 +} diff --git a/docs/CSS/box-model.md b/docs/CSS/box-model.md new file mode 100644 index 0000000..8d6d2eb --- /dev/null +++ b/docs/CSS/box-model.md @@ -0,0 +1,42 @@ +--- +title: Box Model +sidebar_position: 3 +--- + +# Box Model + +Every HTML element is a box! The box model is the secret to spacing, borders, and layout. + +## Parts of the Box Model +- **Content**: The actual text or image +- **Padding**: Space inside the box, around the content +- **Border**: The edge of the box +- **Margin**: Space outside the box, separating it from others + +Example: +```css +div { + margin: 20px; + border: 2px solid #333; + padding: 10px; +} +``` + +## Display Property +- `block`: Starts on a new line, takes full width (e.g., `
`, `

`) +- `inline`: Flows with text (e.g., ``, ``) +- `flex`, `grid`: Modern layouts + +Example: +```css +span { + display: inline; +} +div { + display: block; +} +``` + +## What's Next? + +Let’s learn layout techniques: [Layout Techniques](./layout-techniques.md). diff --git a/docs/CSS/introduction-to-css.md b/docs/CSS/introduction-to-css.md new file mode 100644 index 0000000..e7238fd --- /dev/null +++ b/docs/CSS/introduction-to-css.md @@ -0,0 +1,36 @@ +--- +title: Introduction to CSS +sidebar_position: 1 +--- + +# Introduction to CSS + +Welcome, style wizard! 🎨 Now that you know HTML, it’s time to make your web pages beautiful with CSS (Cascading Style Sheets). If HTML is the structure of your house, CSS is the paint, wallpaper, and decorations that make it shine. + +## What is CSS? +CSS controls colors, fonts, spacing, layout, and more. It separates content (HTML) from presentation (styles). + +- **Inline styles**: Directly on an element (not recommended for big projects) +- **Internal styles**: In a ` + +``` +Example (external): +```html + +``` + +## What's Next? + +Ready to learn how to target elements? Next up: [Selectors & Properties](./selectors-and-properties.md). Let’s style like a pro! diff --git a/docs/CSS/layout-techniques.md b/docs/CSS/layout-techniques.md new file mode 100644 index 0000000..00079cf --- /dev/null +++ b/docs/CSS/layout-techniques.md @@ -0,0 +1,48 @@ +--- +title: Layout Techniques +sidebar_position: 4 +--- + +# Layout Techniques + +CSS gives you powerful tools to arrange elements on the page. + +## Flexbox +- Align, justify, and wrap items easily + +Example: +```css +.container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} +``` + +## Grid +- Create rows, columns, and areas + +Example: +```css +.grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} +``` + +## Positioning +- `relative`, `absolute`, `fixed`, `sticky` + +Example: +```css +.sticky { + position: sticky; + top: 0; +} +``` + +## What's Next? + +Let’s style your site: [Styling](./styling.md). diff --git a/docs/CSS/layout.md b/docs/CSS/layout.md new file mode 100644 index 0000000..bb045ba --- /dev/null +++ b/docs/CSS/layout.md @@ -0,0 +1,41 @@ +--- +title: CSS Layout +sidebar_position: 4 +--- + +# CSS Layout + +You’re doing great! Now, let’s arrange elements on the page. CSS layout is how you build headers, sidebars, footers, and more. + +## Common Layout Techniques + +- **Block & Inline**: Block elements (like `
`) stack; inline elements (like ``) flow in a line. +- **Float**: Old-school way to move elements left or right. +- **Flexbox**: Modern, easy way to align and distribute space. +- **Grid**: Powerful for two-dimensional layouts. + +Example (Flexbox): + +```css +.container { + display: flex; + justify-content: space-between; +} +``` + +Example (Grid): + +```css +.grid { + display: grid; + grid-template-columns: 1fr 1fr; +} +``` + +:::info +Flexbox is great for navbars; Grid is perfect for page layouts. +::: + +## What's Next? + +Time to practice! Try a mini project: [CSS Projects](./projects.md). diff --git a/docs/CSS/projects.md b/docs/CSS/projects.md new file mode 100644 index 0000000..49e2949 --- /dev/null +++ b/docs/CSS/projects.md @@ -0,0 +1,31 @@ +--- +title: CSS Projects +sidebar_position: 5 +--- + +# CSS Projects + +Congratulations! 🎉 You’ve learned the basics of CSS. Now it’s time to practice with some fun projects. + +## Project Ideas + +1. **Personal Bio Page (Styled)** + - Take your HTML bio page and add colors, fonts, and layout. +2. **Navigation Bar** + - Build a horizontal menu using Flexbox. +3. **Photo Gallery** + - Create a grid of images with hover effects. + +## Tips + +- Use all the selectors and box model tricks you’ve learned. +- Experiment with colors, spacing, and layout. +- Use browser dev tools to tweak styles live. + +:::tip +Share your styled pages with friends or on GitHub for feedback! +::: + +## What's Next? + +Want to level up? Try combining your HTML and CSS skills, or move on to [Introduction to Git](../../Git/Beginner/introduction-to-git.md) to learn about version control! diff --git a/docs/CSS/selectors-and-properties.md b/docs/CSS/selectors-and-properties.md new file mode 100644 index 0000000..d991371 --- /dev/null +++ b/docs/CSS/selectors-and-properties.md @@ -0,0 +1,51 @@ +--- +title: Selectors & Properties +sidebar_position: 2 +--- + +# Selectors & Properties + +Selectors are how you target HTML elements to style them. Properties are what you change (like color, font, size). + +## Basic Selectors +- `element` (e.g., `h1`, `p`): All elements of that type +- `.class`: Elements with a specific class +- `#id`: A unique element with an ID +- `*`: Everything + +Example: +```css +.highlight { + background: yellow; +} +#main-title { + font-size: 2em; +} +``` + +## Pseudo-classes +- `:hover`, `:nth-child(2)`, etc. + +Example: +```css +a:hover { + color: red; +} +li:nth-child(2) { + font-weight: bold; +} +``` + +## Pseudo-elements +- `::before`, `::after`, etc. + +Example: +```css +p::before { + content: "★ "; +} +``` + +## What's Next? + +Let’s understand the box model: [Box Model](./box-model.md). diff --git a/docs/CSS/selectors.md b/docs/CSS/selectors.md new file mode 100644 index 0000000..d7f32ba --- /dev/null +++ b/docs/CSS/selectors.md @@ -0,0 +1,48 @@ +--- +title: CSS Selectors +sidebar_position: 2 +--- + +# CSS Selectors + +Great start! Now, let’s learn how to target specific HTML elements with selectors. Selectors are like magic wands—you point at what you want to style. + +## What is a Selector? + +A selector tells CSS which element(s) to style. + +Example: + +```css +p { + color: green; +} +``` + +This makes all `

` elements green. + +## Common Selectors + +- `element` (e.g., `h1`, `p`): Targets all elements of that type +- `.class`: Targets elements with a specific class +- `#id`: Targets a unique element with an ID +- `*`: Targets everything + +Example: + +```css +.highlight { + background: yellow; +} +#main-title { + font-size: 2em; +} +``` + +:::info +You can combine selectors for more power: `div p` targets all `

` inside `

`. +::: + +## What's Next? + +Let’s dive into how elements are sized and spaced: [CSS Box Model](./box-model.md). diff --git a/docs/Git/_category_.json b/docs/Git/_category_.json new file mode 100644 index 0000000..04a55ac --- /dev/null +++ b/docs/Git/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Git", + "position": 3 +} diff --git a/docs/Git/basic-commands.md b/docs/Git/basic-commands.md new file mode 100644 index 0000000..acc687e --- /dev/null +++ b/docs/Git/basic-commands.md @@ -0,0 +1,34 @@ +--- +title: Basic Git Commands +sidebar_position: 2 +--- + +# Basic Git Commands + +Great start! Now, let’s learn the most important Git commands. These are your tools for saving, viewing, and sharing your work. + +## Common Commands + +- `git init`: Start a new Git repository +- `git status`: See what’s changed +- `git add`: Stage changes for commit +- `git commit`: Save your changes +- `git log`: View commit history + +Example workflow: + +```bash +git init +git add index.html +git commit -m "Add homepage" +git status +git log +``` + +:::tip +Use clear commit messages so you remember what changed! +::: + +## What's Next? + +Ready to work on different features? Next: [Branching in Git](./branching.md). diff --git a/docs/Git/branching.md b/docs/Git/branching.md new file mode 100644 index 0000000..8df8090 --- /dev/null +++ b/docs/Git/branching.md @@ -0,0 +1,38 @@ +--- +title: Branching in Git +sidebar_position: 3 +--- + +# Branching in Git + +Awesome! Now, let’s learn how to work on new features without breaking your main code. Branches are like parallel universes for your project. + +## What is a Branch? + +A branch is a separate line of development. You can experiment, then merge changes back when ready. + +## Common Branch Commands + +- `git branch`: List branches +- `git checkout -b feature`: Create and switch to a new branch +- `git merge feature`: Combine changes from another branch + +Example: + +```bash +git branch +git checkout -b new-feature +# Make changes +git add . +git commit -m "Add new feature" +git checkout main +git merge new-feature +``` + +:::info +Branches help you work safely and try new ideas. +::: + +## What's Next? + +Let’s share your code with the world! Next: [GitHub Workflow](./github-workflow.md). diff --git a/docs/Git/github-workflow.md b/docs/Git/github-workflow.md new file mode 100644 index 0000000..095c349 --- /dev/null +++ b/docs/Git/github-workflow.md @@ -0,0 +1,38 @@ +--- +title: GitHub Workflow +sidebar_position: 4 +--- + +# GitHub Workflow + +You’re doing great! Now, let’s learn how to share your code online and collaborate with others using GitHub. + +## What is GitHub? + +GitHub is a website for hosting Git repositories. It lets you: +- Store your code in the cloud +- Collaborate with others +- Track issues and pull requests + +## Typical Workflow + +1. **Create a repository on GitHub** +2. **Clone it to your computer** + ```bash + git clone https://github.com/your-username/your-repo.git + ``` +3. **Make changes, commit, and push** + ```bash + git add . + git commit -m "Describe your changes" + git push + ``` +4. **Open a pull request** to suggest changes + +:::tip +Always pull the latest changes before you start working: `git pull` +::: + +## What's Next? + +Time to practice! Try a mini project: [Git Projects](./projects.md). diff --git a/docs/Git/introduction-to-git.md b/docs/Git/introduction-to-git.md new file mode 100644 index 0000000..e215d35 --- /dev/null +++ b/docs/Git/introduction-to-git.md @@ -0,0 +1,30 @@ +--- +title: Introduction to Git +sidebar_position: 1 +--- + +# Introduction to Git + +Welcome, version control hero! 🦸‍♂️ Ready to save your code and track every change? Git is your time machine for projects. It lets you record, rewind, and collaborate—so you never lose your work. + +Git is a tool that helps you manage changes to files over time. It’s used by developers everywhere, from solo coders to huge teams. By the end of this section, you’ll know what Git is and why it’s essential for every coder. + +## What is Git? + +- **Created in 2005** by Linus Torvalds (the creator of Linux). +- **Distributed**: Everyone has a full copy of the project history. +- **Tracks changes**: See who changed what, when, and why. + +## Why Use Git? + +- Undo mistakes easily +- Work with others without overwriting each other +- Keep a history of your project + +## How Git Works (Quick Analogy) + +Think of Git as a save system in a video game. Each time you save, you can go back to that point if something goes wrong. Git calls these saves "commits." + +## What's Next? + +Let’s get hands-on! Next: [Basic Git Commands](./basic-commands.md) to start using Git for real. diff --git a/docs/Git/projects.md b/docs/Git/projects.md new file mode 100644 index 0000000..9b8d757 --- /dev/null +++ b/docs/Git/projects.md @@ -0,0 +1,31 @@ +--- +title: Git Projects +sidebar_position: 5 +--- + +# Git Projects + +Congratulations! 🎉 You’ve learned the basics of Git and GitHub. Now it’s time to practice with some real-world projects. + +## Project Ideas + +1. **Personal Website Repo** + - Create a GitHub repo for your website and track all changes. +2. **Collaborative Story** + - Work with a friend: each person adds a chapter to a story using branches and pull requests. +3. **Bug Tracker** + - Use GitHub Issues to track bugs or ideas for a project. + +## Tips + +- Commit often with clear messages. +- Try branching for new features. +- Share your repo and get feedback. + +:::tip +Explore open source projects on GitHub to see how others use Git! +::: + +## What's Next? + +You’re now ready to manage code like a pro! Keep practicing and explore more advanced Git features as you grow. diff --git a/docs/GitHub/_category_.json b/docs/GitHub/_category_.json new file mode 100644 index 0000000..de3854f --- /dev/null +++ b/docs/GitHub/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "GitHub", + "position": 4 +} diff --git a/docs/GitHub/actions-cicd.md b/docs/GitHub/actions-cicd.md new file mode 100644 index 0000000..3dc2324 --- /dev/null +++ b/docs/GitHub/actions-cicd.md @@ -0,0 +1,3 @@ +# GitHub Actions (CI/CD Basics) + +GitHub Actions lets you automate tasks like testing and deploying code. CI/CD stands for Continuous Integration and Continuous Deployment, which means automatically building, testing, and releasing your code when you make changes. diff --git a/docs/GitHub/best-practices.md b/docs/GitHub/best-practices.md new file mode 100644 index 0000000..c222c5e --- /dev/null +++ b/docs/GitHub/best-practices.md @@ -0,0 +1,8 @@ +# Best Practices + +- Write clear commit messages +- Use branches for new features or fixes +- Review code before merging +- Keep your repository organized +- Write a good README file +- Protect important branches diff --git a/docs/GitHub/code-reviews.md b/docs/GitHub/code-reviews.md new file mode 100644 index 0000000..0f3a32a --- /dev/null +++ b/docs/GitHub/code-reviews.md @@ -0,0 +1,3 @@ +# Code Reviews + +Code reviews let team members check each other's work before merging changes. This helps catch bugs, improve code quality, and share knowledge. diff --git a/docs/GitHub/collaboration.md b/docs/GitHub/collaboration.md new file mode 100644 index 0000000..2f2cde5 --- /dev/null +++ b/docs/GitHub/collaboration.md @@ -0,0 +1,12 @@ +# Collaboration on GitHub + +GitHub makes it easy to work with others. Common collaboration features include: + +## Forking +Copy someone else's repository to your own account to make changes without affecting the original. + +## Cloning +Download a repository to your computer to work on it locally. + +## Pull Requests +Suggest changes to a repository. The owner can review and merge your changes if approved. diff --git a/docs/GitHub/creating-cloning-repos.md b/docs/GitHub/creating-cloning-repos.md new file mode 100644 index 0000000..201cc14 --- /dev/null +++ b/docs/GitHub/creating-cloning-repos.md @@ -0,0 +1,11 @@ +# Creating & Cloning Repositories + +A repository (repo) is where your project lives on GitHub. You can create a new repo to start a project or clone an existing one to your computer. + +## Creating a Repository +1. Click the "+" icon in the top right and select "New repository". +2. Fill in the repo name and details. +3. Click "Create repository". + +## Cloning a Repository +To work on a project locally, you clone it using Git. diff --git a/docs/GitHub/example-auto-deploy.md b/docs/GitHub/example-auto-deploy.md new file mode 100644 index 0000000..3a21e9c --- /dev/null +++ b/docs/GitHub/example-auto-deploy.md @@ -0,0 +1,3 @@ +# Example: Auto-Deploying a Site + +You can use GitHub Actions to automatically deploy your website when you push changes. For example, you can set up a workflow to deploy to GitHub Pages or another hosting service every time you update your code. diff --git a/docs/GitHub/git-clone.md b/docs/GitHub/git-clone.md new file mode 100644 index 0000000..c51f3fb --- /dev/null +++ b/docs/GitHub/git-clone.md @@ -0,0 +1,9 @@ +# git clone + +The `git clone` command copies a repository from GitHub to your local computer. This lets you work on the project offline. + +**Example:** +```bash +git clone https://github.com/username/repository.git +``` +Replace the URL with your repository's URL. diff --git a/docs/GitHub/hosting-github-pages.md b/docs/GitHub/hosting-github-pages.md new file mode 100644 index 0000000..a1ac186 --- /dev/null +++ b/docs/GitHub/hosting-github-pages.md @@ -0,0 +1,7 @@ +# Hosting a Static Website on GitHub Pages + +1. Push your website files (HTML, CSS, JS) to a GitHub repository. +2. Go to the repository settings. +3. Find the "Pages" section. +4. Select the branch (usually `main`) and folder (usually `/root` or `/docs`). +5. Save and visit the provided URL to see your site live! diff --git a/docs/GitHub/introduction.md b/docs/GitHub/introduction.md new file mode 100644 index 0000000..0690f2d --- /dev/null +++ b/docs/GitHub/introduction.md @@ -0,0 +1,3 @@ +# Introduction to GitHub + +GitHub is a web-based platform that helps developers store, manage, and collaborate on code. It uses Git, a version control system, to track changes and enable teamwork. With GitHub, you can work on projects with others, contribute to open source, and showcase your work to the world. diff --git a/docs/GitHub/issues-discussions.md b/docs/GitHub/issues-discussions.md new file mode 100644 index 0000000..4e8dce1 --- /dev/null +++ b/docs/GitHub/issues-discussions.md @@ -0,0 +1,7 @@ +# Issues & Discussions + +## Issues +Issues are used to track bugs, tasks, or feature requests. You can create, assign, and comment on issues to organize work. + +## Discussions +Discussions are for open-ended conversations, questions, or ideas. They help teams and communities communicate outside of code changes. diff --git a/docs/GitHub/pages.md b/docs/GitHub/pages.md new file mode 100644 index 0000000..095028d --- /dev/null +++ b/docs/GitHub/pages.md @@ -0,0 +1,3 @@ +# GitHub Pages + +GitHub Pages lets you host static websites directly from your GitHub repository. It's free and great for personal, project, or documentation sites. diff --git a/docs/GitHub/projects-kanban.md b/docs/GitHub/projects-kanban.md new file mode 100644 index 0000000..a585c72 --- /dev/null +++ b/docs/GitHub/projects-kanban.md @@ -0,0 +1,3 @@ +# GitHub Projects (Kanban Boards) + +GitHub Projects help you organize and track work using Kanban boards. You can create columns like "To do", "In progress", and "Done" to visualize tasks and progress. diff --git a/docs/GitHub/protecting-branches.md b/docs/GitHub/protecting-branches.md new file mode 100644 index 0000000..9ffcdfc --- /dev/null +++ b/docs/GitHub/protecting-branches.md @@ -0,0 +1,3 @@ +# Protecting Branches + +Protecting branches helps prevent unwanted changes. You can set rules so only certain people can push, or require code reviews before merging. This keeps your main code safe. diff --git a/docs/GitHub/uploading-project.md b/docs/GitHub/uploading-project.md new file mode 100644 index 0000000..47c283d --- /dev/null +++ b/docs/GitHub/uploading-project.md @@ -0,0 +1,26 @@ +# Uploading a Project to GitHub + +To upload (push) your project to GitHub: +1. Create a new repository on GitHub. +2. On your computer, open a terminal in your project folder. +3. Initialize Git: + ```bash + git init + ``` +4. Add your files: + ```bash + git add . + ``` +5. Commit your changes: + ```bash + git commit -m "Initial commit" + ``` +6. Link your repo: + ```bash + git remote add origin https://github.com/username/repository.git + ``` +7. Push to GitHub: + ```bash + git push -u origin main + ``` +Replace the URL with your repository's URL. diff --git a/docs/GitHub/what-is-github.md b/docs/GitHub/what-is-github.md new file mode 100644 index 0000000..d8b8c70 --- /dev/null +++ b/docs/GitHub/what-is-github.md @@ -0,0 +1,9 @@ +# What is GitHub & Why Use It? + +GitHub is a hosting service for Git repositories. It makes it easy to share code, collaborate with others, and manage projects. Developers use GitHub to: +- Track changes in their code +- Work with teammates +- Contribute to open source +- Showcase their work + +GitHub also provides tools for issue tracking, code review, and automation. diff --git a/docs/GitHub/workflows.md b/docs/GitHub/workflows.md new file mode 100644 index 0000000..75f426a --- /dev/null +++ b/docs/GitHub/workflows.md @@ -0,0 +1,3 @@ +# What are Workflows? + +A workflow is a set of automated steps that run on GitHub Actions. Workflows can build, test, or deploy your code whenever you push changes or open a pull request. diff --git a/docs/GitHub/writing-good-readme.md b/docs/GitHub/writing-good-readme.md new file mode 100644 index 0000000..9005b9d --- /dev/null +++ b/docs/GitHub/writing-good-readme.md @@ -0,0 +1,10 @@ +# Writing Good README Files + +A good README helps others understand and use your project. Include: +- Project name and description +- Installation instructions +- Usage examples +- Contribution guidelines +- License information + +Keep it clear and up to date! diff --git a/docs/HTML/_category_.json b/docs/HTML/_category_.json new file mode 100644 index 0000000..dfeca2b --- /dev/null +++ b/docs/HTML/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "HTML", + "position": 2 +} diff --git a/docs/HTML/accessibility-seo.md b/docs/HTML/accessibility-seo.md new file mode 100644 index 0000000..356174a --- /dev/null +++ b/docs/HTML/accessibility-seo.md @@ -0,0 +1,41 @@ +--- +title: Accessibility & SEO Basics +sidebar_position: 6 +--- + +# Accessibility & SEO Basics + +Make your site usable for everyone and easy to find! Accessibility means everyone—including people with disabilities—can use your site. SEO (Search Engine Optimization) helps your site show up in search results. + +## Accessibility +- Always use `alt` attributes for images: + ```html + A cute cat + ``` +- Use semantic HTML (like `