From a1fa889cfa6eebcee5ef358f709bb7dc1e8667a8 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Fri, 24 Apr 2026 09:10:01 +0530 Subject: [PATCH 1/3] added new docs for full stack/css --- absolute-beginners/full-stack/_category_.json | 9 ++ .../best-practices.mdx} | 0 .../full-stack/authentication/intro.mdx | 1 + .../full-stack/authentication/jwt.mdx | 1 + .../full-stack/authentication/oauth.mdx | 1 + .../authentication/password-hashing.mdx | 1 + .../authentication/sessions-vs-tokens.mdx | 1 + .../full-stack/backend/error-handling.mdx | 1 + .../full-stack/backend/express.mdx | 1 + .../full-stack/backend/introduction.mdx | 1 + .../full-stack/backend/middleware.mdx | 1 + .../full-stack/backend/mini-projects.mdx | 1 + .../full-stack/backend/mvc-pattern.mdx | 1 + .../full-stack/backend/node-basics.mdx | 1 + .../full-stack/backend/routing.mdx | 1 + .../full-stack/career/freelancing.mdx | 1 + .../full-stack/career/github-profile.mdx | 1 + .../full-stack/career/interview-prep.mdx | 1 + .../full-stack/career/linkedin.mdx | 1 + .../full-stack/career/portfolio.mdx | 1 + .../full-stack/career/resume.mdx | 1 + .../full-stack/cloud/aws-overview.mdx | 1 + .../full-stack/cloud/cloudfront.mdx | 1 + .../full-stack/cloud/deployment.mdx | 1 + absolute-beginners/full-stack/cloud/ec2.mdx | 1 + absolute-beginners/full-stack/cloud/intro.mdx | 1 + absolute-beginners/full-stack/cloud/rds.mdx | 1 + absolute-beginners/full-stack/cloud/s3.mdx | 1 + .../full-stack/css/_category_.json | 9 ++ .../full-stack/css/animations.mdx | 125 ++++++++++++++++ .../full-stack/css/box-model.mdx | 104 ++++++++++++++ absolute-beginners/full-stack/css/flexbox.mdx | 120 ++++++++++++++++ absolute-beginners/full-stack/css/grid.mdx | 120 ++++++++++++++++ .../full-stack/css/introduction.mdx | 121 ++++++++++++++++ .../full-stack/css/mini-projects.mdx | 77 ++++++++++ .../full-stack/css/responsive-design.mdx | 114 +++++++++++++++ .../full-stack/css/selectors.mdx | 123 ++++++++++++++++ .../full-stack/databases/introduction.mdx | 1 + .../databases/postgresql/indexing.mdx | 1 + .../databases/postgresql/queries.mdx | 1 + .../databases/postgresql/relationships.mdx | 1 + .../full-stack/databases/postgresql/setup.mdx | 1 + .../full-stack/databases/redis/caching.mdx | 1 + .../full-stack/databases/redis/intro.mdx | 1 + .../full-stack/databases/redis/sessions.mdx | 1 + .../full-stack/devops/api-design.mdx | 1 + .../full-stack/devops/ci-cd/deployment.mdx | 1 + .../devops/ci-cd/github-actions.mdx | 1 + .../full-stack/devops/ci-cd/pipelines.mdx | 1 + absolute-beginners/full-stack/devops/crud.mdx | 1 + .../full-stack/devops/documentation.mdx | 1 + .../full-stack/devops/infra/ansible.mdx | 1 + .../full-stack/devops/infra/infra-as-code.mdx | 1 + .../full-stack/devops/infra/terraform.mdx | 1 + .../full-stack/devops/linux-basics.mdx | 1 + .../full-stack/devops/monitoring/logging.mdx | 1 + .../full-stack/devops/monitoring/monit.mdx | 1 + .../full-stack/devops/process-management.mdx | 1 + .../full-stack/devops/rate-limiting.mdx | 1 + .../full-stack/devops/rest-basics.mdx | 1 + .../full-stack/devops/shell-scripting.mdx | 1 + .../full-stack/devops/validation.mdx | 1 + .../full-stack/frontend/introduction.mdx | 1 + .../full-stack/frontend/mini-projects.mdx | 1 + .../frontend/react/api-integration.mdx | 1 + .../full-stack/frontend/react/components.mdx | 1 + .../full-stack/frontend/react/hooks.mdx | 1 + .../full-stack/frontend/react/intro.mdx | 1 + .../full-stack/frontend/react/performance.mdx | 1 + .../full-stack/frontend/react/props-state.mdx | 1 + .../full-stack/frontend/react/routing.mdx | 1 + .../frontend/tailwind/best-practices.mdx | 1 + .../full-stack/frontend/tailwind/intro.mdx | 1 + .../frontend/tailwind/responsive.mdx | 1 + .../frontend/tailwind/utility-classes.mdx | 1 + .../getting-started/_category_.json | 9 ++ .../getting-started/developer-mindset.mdx | 79 ++++++++++ .../getting-started/first-program.mdx | 97 +++++++++++++ .../getting-started/how-web-works.mdx | 136 ++++++++++++++++++ .../getting-started/introduction.mdx | 93 ++++++++++++ .../getting-started/setup-environment.mdx | 111 ++++++++++++++ .../getting-started/terminal-basics.mdx | 84 +++++++++++ .../getting-started/vs-code-setup.mdx | 79 ++++++++++ .../full-stack/html/_category_.json | 9 ++ .../full-stack/html/accessibility.mdx | 81 +++++++++++ .../full-stack/html/attributes-links.mdx | 102 +++++++++++++ absolute-beginners/full-stack/html/forms.mdx | 130 +++++++++++++++++ .../full-stack/html/html-tables.mdx | 118 +++++++++++++++ .../full-stack/html/introduction.mdx | 112 +++++++++++++++ .../full-stack/html/mini-projects.mdx | 78 ++++++++++ .../full-stack/html/semantic-html.mdx | 105 ++++++++++++++ .../full-stack/html/seo-basics.mdx | 81 +++++++++++ .../full-stack/html/tags-basics.mdx | 104 ++++++++++++++ .../full-stack/internet-basics/02.png | Bin 0 -> 1676698 bytes .../full-stack/internet-basics/03.png | Bin 0 -> 2008370 bytes .../full-stack/internet-basics/04.png | Bin 0 -> 2208252 bytes .../internet-basics/_category_.json | 9 ++ .../full-stack/internet-basics/browsers.mdx | 131 +++++++++++++++++ .../full-stack/internet-basics/dns.mdx | 86 +++++++++++ .../internet-basics/domain-names.mdx | 84 +++++++++++ .../full-stack/internet-basics/hosting.mdx | 84 +++++++++++ .../full-stack/internet-basics/http-https.mdx | 70 +++++++++ .../internet-basics/what-is-internet.mdx | 73 ++++++++++ .../full-stack/javascript/arrays-objects.mdx | 1 + .../full-stack/javascript/async-js.mdx | 1 + .../javascript/dom-manipulation.mdx | 1 + .../full-stack/javascript/events.mdx | 1 + .../full-stack/javascript/fetch-api.mdx | 1 + .../full-stack/javascript/functions.mdx | 1 + .../full-stack/javascript/introduction.mdx | 1 + .../full-stack/javascript/mini-projects.mdx | 1 + .../full-stack/javascript/variables.mdx | 1 + .../full-stack/projects/advanced-projects.mdx | 1 + .../full-stack/projects/beginner-projects.mdx | 1 + .../projects/intermediate-projects.mdx | 1 + .../full-stack/resources/books.mdx | 1 + .../full-stack/resources/cheatsheets.mdx | 1 + .../full-stack/resources/tools.mdx | 1 + .../full-stack/resources/websites.mdx | 1 + .../full-stack/system-design/caching.mdx | 1 + .../full-stack/system-design/case-studies.mdx | 1 + .../full-stack/system-design/databases.mdx | 1 + .../full-stack/system-design/intro.mdx | 1 + .../system-design/load-balancing.mdx | 1 + .../full-stack/system-design/scalability.mdx | 1 + .../full-stack/tools/cli-tools.mdx | 1 + .../full-stack/tools/git-basics.mdx | 1 + .../full-stack/tools/github.mdx | 1 + absolute-beginners/full-stack/tools/npm.mdx | 1 + .../full-stack/tools/package-json.mdx | 1 + .../full-stack/tools/version-control-flow.mdx | 1 + static/img/tutorials/how-browsers-work.png | Bin 0 -> 2258994 bytes 132 files changed, 3159 insertions(+) create mode 100644 absolute-beginners/full-stack/_category_.json rename absolute-beginners/full-stack/{index.mdx => authentication/best-practices.mdx} (100%) create mode 100644 absolute-beginners/full-stack/authentication/intro.mdx create mode 100644 absolute-beginners/full-stack/authentication/jwt.mdx create mode 100644 absolute-beginners/full-stack/authentication/oauth.mdx create mode 100644 absolute-beginners/full-stack/authentication/password-hashing.mdx create mode 100644 absolute-beginners/full-stack/authentication/sessions-vs-tokens.mdx create mode 100644 absolute-beginners/full-stack/backend/error-handling.mdx create mode 100644 absolute-beginners/full-stack/backend/express.mdx create mode 100644 absolute-beginners/full-stack/backend/introduction.mdx create mode 100644 absolute-beginners/full-stack/backend/middleware.mdx create mode 100644 absolute-beginners/full-stack/backend/mini-projects.mdx create mode 100644 absolute-beginners/full-stack/backend/mvc-pattern.mdx create mode 100644 absolute-beginners/full-stack/backend/node-basics.mdx create mode 100644 absolute-beginners/full-stack/backend/routing.mdx create mode 100644 absolute-beginners/full-stack/career/freelancing.mdx create mode 100644 absolute-beginners/full-stack/career/github-profile.mdx create mode 100644 absolute-beginners/full-stack/career/interview-prep.mdx create mode 100644 absolute-beginners/full-stack/career/linkedin.mdx create mode 100644 absolute-beginners/full-stack/career/portfolio.mdx create mode 100644 absolute-beginners/full-stack/career/resume.mdx create mode 100644 absolute-beginners/full-stack/cloud/aws-overview.mdx create mode 100644 absolute-beginners/full-stack/cloud/cloudfront.mdx create mode 100644 absolute-beginners/full-stack/cloud/deployment.mdx create mode 100644 absolute-beginners/full-stack/cloud/ec2.mdx create mode 100644 absolute-beginners/full-stack/cloud/intro.mdx create mode 100644 absolute-beginners/full-stack/cloud/rds.mdx create mode 100644 absolute-beginners/full-stack/cloud/s3.mdx create mode 100644 absolute-beginners/full-stack/css/_category_.json create mode 100644 absolute-beginners/full-stack/css/animations.mdx create mode 100644 absolute-beginners/full-stack/css/box-model.mdx create mode 100644 absolute-beginners/full-stack/css/flexbox.mdx create mode 100644 absolute-beginners/full-stack/css/grid.mdx create mode 100644 absolute-beginners/full-stack/css/introduction.mdx create mode 100644 absolute-beginners/full-stack/css/mini-projects.mdx create mode 100644 absolute-beginners/full-stack/css/responsive-design.mdx create mode 100644 absolute-beginners/full-stack/css/selectors.mdx create mode 100644 absolute-beginners/full-stack/databases/introduction.mdx create mode 100644 absolute-beginners/full-stack/databases/postgresql/indexing.mdx create mode 100644 absolute-beginners/full-stack/databases/postgresql/queries.mdx create mode 100644 absolute-beginners/full-stack/databases/postgresql/relationships.mdx create mode 100644 absolute-beginners/full-stack/databases/postgresql/setup.mdx create mode 100644 absolute-beginners/full-stack/databases/redis/caching.mdx create mode 100644 absolute-beginners/full-stack/databases/redis/intro.mdx create mode 100644 absolute-beginners/full-stack/databases/redis/sessions.mdx create mode 100644 absolute-beginners/full-stack/devops/api-design.mdx create mode 100644 absolute-beginners/full-stack/devops/ci-cd/deployment.mdx create mode 100644 absolute-beginners/full-stack/devops/ci-cd/github-actions.mdx create mode 100644 absolute-beginners/full-stack/devops/ci-cd/pipelines.mdx create mode 100644 absolute-beginners/full-stack/devops/crud.mdx create mode 100644 absolute-beginners/full-stack/devops/documentation.mdx create mode 100644 absolute-beginners/full-stack/devops/infra/ansible.mdx create mode 100644 absolute-beginners/full-stack/devops/infra/infra-as-code.mdx create mode 100644 absolute-beginners/full-stack/devops/infra/terraform.mdx create mode 100644 absolute-beginners/full-stack/devops/linux-basics.mdx create mode 100644 absolute-beginners/full-stack/devops/monitoring/logging.mdx create mode 100644 absolute-beginners/full-stack/devops/monitoring/monit.mdx create mode 100644 absolute-beginners/full-stack/devops/process-management.mdx create mode 100644 absolute-beginners/full-stack/devops/rate-limiting.mdx create mode 100644 absolute-beginners/full-stack/devops/rest-basics.mdx create mode 100644 absolute-beginners/full-stack/devops/shell-scripting.mdx create mode 100644 absolute-beginners/full-stack/devops/validation.mdx create mode 100644 absolute-beginners/full-stack/frontend/introduction.mdx create mode 100644 absolute-beginners/full-stack/frontend/mini-projects.mdx create mode 100644 absolute-beginners/full-stack/frontend/react/api-integration.mdx create mode 100644 absolute-beginners/full-stack/frontend/react/components.mdx create mode 100644 absolute-beginners/full-stack/frontend/react/hooks.mdx create mode 100644 absolute-beginners/full-stack/frontend/react/intro.mdx create mode 100644 absolute-beginners/full-stack/frontend/react/performance.mdx create mode 100644 absolute-beginners/full-stack/frontend/react/props-state.mdx create mode 100644 absolute-beginners/full-stack/frontend/react/routing.mdx create mode 100644 absolute-beginners/full-stack/frontend/tailwind/best-practices.mdx create mode 100644 absolute-beginners/full-stack/frontend/tailwind/intro.mdx create mode 100644 absolute-beginners/full-stack/frontend/tailwind/responsive.mdx create mode 100644 absolute-beginners/full-stack/frontend/tailwind/utility-classes.mdx create mode 100644 absolute-beginners/full-stack/getting-started/_category_.json create mode 100644 absolute-beginners/full-stack/getting-started/developer-mindset.mdx create mode 100644 absolute-beginners/full-stack/getting-started/first-program.mdx create mode 100644 absolute-beginners/full-stack/getting-started/how-web-works.mdx create mode 100644 absolute-beginners/full-stack/getting-started/introduction.mdx create mode 100644 absolute-beginners/full-stack/getting-started/setup-environment.mdx create mode 100644 absolute-beginners/full-stack/getting-started/terminal-basics.mdx create mode 100644 absolute-beginners/full-stack/getting-started/vs-code-setup.mdx create mode 100644 absolute-beginners/full-stack/html/_category_.json create mode 100644 absolute-beginners/full-stack/html/accessibility.mdx create mode 100644 absolute-beginners/full-stack/html/attributes-links.mdx create mode 100644 absolute-beginners/full-stack/html/forms.mdx create mode 100644 absolute-beginners/full-stack/html/html-tables.mdx create mode 100644 absolute-beginners/full-stack/html/introduction.mdx create mode 100644 absolute-beginners/full-stack/html/mini-projects.mdx create mode 100644 absolute-beginners/full-stack/html/semantic-html.mdx create mode 100644 absolute-beginners/full-stack/html/seo-basics.mdx create mode 100644 absolute-beginners/full-stack/html/tags-basics.mdx create mode 100644 absolute-beginners/full-stack/internet-basics/02.png create mode 100644 absolute-beginners/full-stack/internet-basics/03.png create mode 100644 absolute-beginners/full-stack/internet-basics/04.png create mode 100644 absolute-beginners/full-stack/internet-basics/_category_.json create mode 100644 absolute-beginners/full-stack/internet-basics/browsers.mdx create mode 100644 absolute-beginners/full-stack/internet-basics/dns.mdx create mode 100644 absolute-beginners/full-stack/internet-basics/domain-names.mdx create mode 100644 absolute-beginners/full-stack/internet-basics/hosting.mdx create mode 100644 absolute-beginners/full-stack/internet-basics/http-https.mdx create mode 100644 absolute-beginners/full-stack/internet-basics/what-is-internet.mdx create mode 100644 absolute-beginners/full-stack/javascript/arrays-objects.mdx create mode 100644 absolute-beginners/full-stack/javascript/async-js.mdx create mode 100644 absolute-beginners/full-stack/javascript/dom-manipulation.mdx create mode 100644 absolute-beginners/full-stack/javascript/events.mdx create mode 100644 absolute-beginners/full-stack/javascript/fetch-api.mdx create mode 100644 absolute-beginners/full-stack/javascript/functions.mdx create mode 100644 absolute-beginners/full-stack/javascript/introduction.mdx create mode 100644 absolute-beginners/full-stack/javascript/mini-projects.mdx create mode 100644 absolute-beginners/full-stack/javascript/variables.mdx create mode 100644 absolute-beginners/full-stack/projects/advanced-projects.mdx create mode 100644 absolute-beginners/full-stack/projects/beginner-projects.mdx create mode 100644 absolute-beginners/full-stack/projects/intermediate-projects.mdx create mode 100644 absolute-beginners/full-stack/resources/books.mdx create mode 100644 absolute-beginners/full-stack/resources/cheatsheets.mdx create mode 100644 absolute-beginners/full-stack/resources/tools.mdx create mode 100644 absolute-beginners/full-stack/resources/websites.mdx create mode 100644 absolute-beginners/full-stack/system-design/caching.mdx create mode 100644 absolute-beginners/full-stack/system-design/case-studies.mdx create mode 100644 absolute-beginners/full-stack/system-design/databases.mdx create mode 100644 absolute-beginners/full-stack/system-design/intro.mdx create mode 100644 absolute-beginners/full-stack/system-design/load-balancing.mdx create mode 100644 absolute-beginners/full-stack/system-design/scalability.mdx create mode 100644 absolute-beginners/full-stack/tools/cli-tools.mdx create mode 100644 absolute-beginners/full-stack/tools/git-basics.mdx create mode 100644 absolute-beginners/full-stack/tools/github.mdx create mode 100644 absolute-beginners/full-stack/tools/npm.mdx create mode 100644 absolute-beginners/full-stack/tools/package-json.mdx create mode 100644 absolute-beginners/full-stack/tools/version-control-flow.mdx create mode 100644 static/img/tutorials/how-browsers-work.png diff --git a/absolute-beginners/full-stack/_category_.json b/absolute-beginners/full-stack/_category_.json new file mode 100644 index 0000000..2a79439 --- /dev/null +++ b/absolute-beginners/full-stack/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Full-Stack", + "position": 6, + "link": { + "type": "generated-index", + "title": "Full-Stack Development Roadmap", + "description": "A comprehensive roadmap for absolute beginners to learn full-stack development, covering both frontend and backend technologies, along with essential tools and best practices. This roadmap is designed to guide you through the learning process step-by-step, ensuring you build a strong foundation in web development and become proficient in creating dynamic, responsive, and scalable web applications." + } +} \ No newline at end of file diff --git a/absolute-beginners/full-stack/index.mdx b/absolute-beginners/full-stack/authentication/best-practices.mdx similarity index 100% rename from absolute-beginners/full-stack/index.mdx rename to absolute-beginners/full-stack/authentication/best-practices.mdx diff --git a/absolute-beginners/full-stack/authentication/intro.mdx b/absolute-beginners/full-stack/authentication/intro.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/authentication/intro.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/authentication/jwt.mdx b/absolute-beginners/full-stack/authentication/jwt.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/authentication/jwt.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/authentication/oauth.mdx b/absolute-beginners/full-stack/authentication/oauth.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/authentication/oauth.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/authentication/password-hashing.mdx b/absolute-beginners/full-stack/authentication/password-hashing.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/authentication/password-hashing.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/authentication/sessions-vs-tokens.mdx b/absolute-beginners/full-stack/authentication/sessions-vs-tokens.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/authentication/sessions-vs-tokens.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/error-handling.mdx b/absolute-beginners/full-stack/backend/error-handling.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/error-handling.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/express.mdx b/absolute-beginners/full-stack/backend/express.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/express.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/introduction.mdx b/absolute-beginners/full-stack/backend/introduction.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/introduction.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/middleware.mdx b/absolute-beginners/full-stack/backend/middleware.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/middleware.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/mini-projects.mdx b/absolute-beginners/full-stack/backend/mini-projects.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/mini-projects.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/mvc-pattern.mdx b/absolute-beginners/full-stack/backend/mvc-pattern.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/mvc-pattern.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/node-basics.mdx b/absolute-beginners/full-stack/backend/node-basics.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/node-basics.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/backend/routing.mdx b/absolute-beginners/full-stack/backend/routing.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/backend/routing.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/career/freelancing.mdx b/absolute-beginners/full-stack/career/freelancing.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/career/freelancing.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/career/github-profile.mdx b/absolute-beginners/full-stack/career/github-profile.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/career/github-profile.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/career/interview-prep.mdx b/absolute-beginners/full-stack/career/interview-prep.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/career/interview-prep.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/career/linkedin.mdx b/absolute-beginners/full-stack/career/linkedin.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/career/linkedin.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/career/portfolio.mdx b/absolute-beginners/full-stack/career/portfolio.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/career/portfolio.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/career/resume.mdx b/absolute-beginners/full-stack/career/resume.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/career/resume.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/cloud/aws-overview.mdx b/absolute-beginners/full-stack/cloud/aws-overview.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/cloud/aws-overview.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/cloud/cloudfront.mdx b/absolute-beginners/full-stack/cloud/cloudfront.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/cloud/cloudfront.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/cloud/deployment.mdx b/absolute-beginners/full-stack/cloud/deployment.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/cloud/deployment.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/cloud/ec2.mdx b/absolute-beginners/full-stack/cloud/ec2.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/cloud/ec2.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/cloud/intro.mdx b/absolute-beginners/full-stack/cloud/intro.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/cloud/intro.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/cloud/rds.mdx b/absolute-beginners/full-stack/cloud/rds.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/cloud/rds.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/cloud/s3.mdx b/absolute-beginners/full-stack/cloud/s3.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/cloud/s3.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/_category_.json b/absolute-beginners/full-stack/css/_category_.json new file mode 100644 index 0000000..c4a2829 --- /dev/null +++ b/absolute-beginners/full-stack/css/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "CSS", + "position": 4, + "link": { + "type": "generated-index", + "title": "CSS: Styling the Web", + "description": "Cascading Style Sheets (CSS) is the language used to style the HTML structure you've built. Learn how to control colors, fonts, spacing, and layouts to turn plain text into beautiful, responsive web experiences." + } +} \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/animations.mdx b/absolute-beginners/full-stack/css/animations.mdx new file mode 100644 index 0000000..03f8df7 --- /dev/null +++ b/absolute-beginners/full-stack/css/animations.mdx @@ -0,0 +1,125 @@ +--- +title: "CSS Animations & Transitions" +sidebar_label: "8. Animations" +sidebar_position: 8 +description: "Bring your website to life with smooth transitions and keyframe animations." +--- + +A static website is fine, but an **animated** website feels alive. In CSS, we have two main ways to create movement: **Transitions** (simple) and **Animations** (complex). + +## 1. CSS Transitions + +A transition allows you to change a property (like color or size) **smoothly** over a set duration, rather than having it snap instantly. + +### The 4 Parts of a Transition: +1. **Property:** What are you changing? (e.g., `background-color`). +2. **Duration:** How long does it take? (e.g., `0.3s`). +3. **Timing Function:** The "vibe" of the move (e.g., `ease-in-out`). +4. **Delay:** How long to wait before starting? (e.g., `1s`). + +```css +.button { + background-color: blue; + transition: background-color 0.3s ease; +} + +.button:hover { + background-color: red; /* This will now fade smoothly! */ +} +``` + +## 2. Keyframe Animations + +If Transitions are for "Point A to Point B," **Keyframes** are for complex, multi-step movements that can run automatically. + +### Step 1: Define the Animation +We use the `@keyframes` rule to create a "script" for the movement. + +```css +@keyframes slideIn { + from { + transform: translateX(-100px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} +``` + +### Step 2: Apply it to an Element + +```css +.card { + animation: slideIn 1s ease-out forwards; +} +``` + +## 3. Animation Properties + +| Property | Description | +| :--- | :--- | +| `animation-name` | The name of your `@keyframes`. | +| `animation-duration` | How long one cycle takes (e.g., `2s`). | +| `animation-iteration-count` | How many times to repeat (`3` or `infinite`). | +| `animation-direction` | `normal`, `reverse`, or `alternate` (back and forth). | + +## 4. The Power of `transform` + +When animating, we avoid moving items with `margin` or `top/left` because it's slow for the browser. Instead, we use **Transforms**. + + + + * `translate(x, y)`: Moves the item without affecting others. + * `scale(2)`: Makes the item twice as big. + + + * `rotate(45deg)`: Turns the item clockwise. + * `skew()`: Tilts the item. + + + +```mermaid +graph LR + Original[Original Box] -->|rotate 45deg| Rotated[Rotated Box] + Original -->|scale 1.5| Scaled[Bigger Box] + Original -->|translate 50px| Moved[Pushed Box] + + style Original fill:#fff,stroke:#333,color:#333 + style Rotated fill:#e1f5fe,stroke:#01579b,color:#333 + style Scaled fill:#fff9c4,stroke:#fbc02d,color:#333 + style Moved fill:#e8f5e9,stroke:#2e7d32,color:#333 +``` + +## Interactive Practice: The "Pulse" Effect + +Let's create a notification dot that pulses forever: + +```html +
+``` + +```css +.pulse-dot { + width: 20px; + height: 20px; + background-color: red; + border-radius: 50%; + animation: pulse 1.5s infinite; +} + +@keyframes pulse { + 0% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.5); opacity: 0.5; } + 100% { transform: scale(1); opacity: 1; } +} +``` + +:::warning Use Animations Sparingly +A website with too many moving parts is distracting and can cause "motion sickness" for some users. Use animations to **guide** the user, not to annoy them. +::: + +:::info Performance +Always try to animate `transform` and `opacity`. These are "hardware accelerated," meaning the computer's graphics card handles them, keeping your website running at a silky-smooth 60 frames per second. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/box-model.mdx b/absolute-beginners/full-stack/css/box-model.mdx new file mode 100644 index 0000000..7279849 --- /dev/null +++ b/absolute-beginners/full-stack/css/box-model.mdx @@ -0,0 +1,104 @@ +--- +title: "The CSS Box Model" +sidebar_label: "3. The Box Model" +sidebar_position: 3 +description: "Understand how margins, borders, padding, and content work together to create element spacing." +--- + +In CSS, **everything is a box**. Whether it's a circular button, a line of text, or an image, the browser sees it as a rectangular container. + +The Box Model determines exactly how much space an element takes up on your screen. + +## 1. The Four Layers of a Box + +Think of an HTML element like a framed photo you are sending through the mail: + +1. **Content:** The actual "photo" (The text or image). +2. **Padding:** The "bubble wrap" inside the frame. It creates space **between the photo and the frame**. +3. **Border:** The "wooden frame" itself. It wraps around the padding and content. +4. **Margin:** The "safe space" outside the frame. It keeps **other boxes** from touching yours. + +## 2. Visualizing the Layers + +Here is how these layers translate into CSS code: + +```mermaid +graph TD + Margin[Margin: Outer Space] --> Border[Border: The Line] + Border --> Padding[Padding: Inner Space] + Padding --> Content[Content: Text/Image] + + style Margin fill:#f9ebea,stroke:#c0392b,color:#333 + style Border fill:#ebf5fb,stroke:#2e86c1,color:#333 + style Padding fill:#e8f8f5,stroke:#1e8449,color:#333 + style Content fill:#fff,stroke:#333,color:#333 +``` + +### The Breakdown: + + * **`width` & `height`**: Sets the size of the **Content** only. + * **`padding`**: Clears an area around the content. It inherits the background color of the box. + * **`border`**: A line that goes around the padding. You can set its thickness, style, and color. + * **`margin`**: Clears an area outside the border. Margins are always transparent. + +## 3. How to Write Box Model CSS + +You can set these values for all sides at once, or for specific sides. + + + +You can set all four sides in one line. The order is always **Clockwise**: Top, Right, Bottom, Left. +`margin: 10px 20px 10px 20px;` +(Top: 10px, Right: 20px, Bottom: 10px, Left: 20px) + + +Use these for more control: + +`padding-top` / `margin-top` +`padding-right` / `margin-right` +`padding-bottom` / `margin-bottom` +`padding-left` / `margin-left` + + + + +## 4. The "Box-Sizing" Problem + +By default, if you give a box a width of `200px` and then add `20px` of padding, the box actually becomes **240px** wide ($200 + 20 \text{ left} + 20 \text{ right}$). This often breaks layouts! + +### The Fix: `border-box` + +Professional developers use `box-sizing: border-box;`. This tells the browser: "Keep the width at 200px, and put the padding **inside** that space." + +```css +/* Apply this to everything! */ +* { + box-sizing: border-box; +} +``` + +## Practice: Create a "Featured Card" + +Try building this in your `style.css`: + +```css title="style.css" +.card { + width: 300px; + background-color: white; + + /* 1. The Border */ + border: 2px solid #333; + + /* 2. The Bubble Wrap (Inside) */ + padding: 20px; + + /* 3. The Safe Space (Outside) */ + margin: 50px auto; /* Centering the card */ + + box-shadow: 5px 5px 15px rgba(0,0,0,0.1); +} +``` + +:::info Margin "Auto" +Setting `margin: auto;` on a box with a fixed width is the most common way to center an element horizontally on the page! +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/flexbox.mdx b/absolute-beginners/full-stack/css/flexbox.mdx new file mode 100644 index 0000000..4765de7 --- /dev/null +++ b/absolute-beginners/full-stack/css/flexbox.mdx @@ -0,0 +1,120 @@ +--- +title: "CSS Flexbox Layout" +sidebar_label: "5. Flexbox" +sidebar_position: 5 +description: "Learn how to align and distribute space among items in a container with Flexbox." +--- + +**Flexbox** (Flexible Box) is a layout system that makes it easy to align items horizontally or vertically. Before Flexbox, developers had to use hacky tricks to center elements; now, it only takes a few lines of code. + +## 1. The Parent and the Children + +Flexbox works on a **Parent-Child** relationship. +1. The **Flex Container** (Parent) is the box that holds everything. +2. The **Flex Items** (Children) are the boxes inside. + +To start using Flexbox, you simply tell the parent: `display: flex;`. + +```css +.container { + display: flex; /* The magic starts here! */ +} +``` + +## 2. The Two Axes + +Understanding Flexbox is all about understanding direction. + + * **Main Axis:** Usually horizontal (left to right). + * **Cross Axis:** Usually vertical (top to bottom). + +## 3. Main Container Properties + +These are the commands you give to the **Parent** to control the children. + +### A. Justify Content (Main Axis) + +This controls how items are spaced out horizontally. + +| Value | Result | +| :--- | :--- | +| `flex-start` | Items bunch up at the **left**. | +| `flex-end` | Items bunch up at the **right**. | +| `center` | Items bunch up in the **middle**. | +| `space-between` | First item at start, last item at end, even space between. | +| `space-around` | Even space around every item. | + +### B. Align Items (Cross Axis) + +This controls how items are aligned vertically. + +| Value | Result | +| :--- | :--- | +| `stretch` | Items stretch to fill the container (Default). | +| `center` | Items are perfectly centered vertically. | +| `flex-start` | Items align to the **top**. | +| `flex-end` | Items align to the **bottom**. | + +## 4. Changing Direction + +By default, Flexbox puts items in a row. But you can turn your row into a column with one line: + +```css +.container { + display: flex; + flex-direction: column; /* Items now stack vertically! */ +} +``` + +:::warning Note on Axes +When you switch to `flex-direction: column`, the **Main Axis** and **Cross Axis** swap places! Now `justify-content` controls vertical spacing and `align-items` controls horizontal. +::: + +## 5. The "Perfect Center" + +The most famous use for Flexbox is perfectly centering something in the middle of a page. + +```css +.parent { + display: flex; + justify-content: center; /* Horizontal center */ + align-items: center; /* Vertical center */ + height: 100vh; /* Full screen height */ +} +``` + +## Interactive Practice: The Navbar + +Let's build a standard navigation bar for **CodeHarborHub**: + +```html + +``` + +```css +.navbar { + display: flex; + justify-content: space-between; /* Logo on left, links on right */ + align-items: center; + padding: 10px 20px; + background-color: #333; + color: white; +} + +.nav-links { + display: flex; /* Make the list items go in a row too! */ + list-style: none; + gap: 20px; /* Modern way to add space between flex items */ +} +``` + +:::info The `gap` Property +In the past, we used margins to separate flex items. Today, you can just use `gap: 20px;` on the parent container. It is much cleaner and easier to manage\! +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/grid.mdx b/absolute-beginners/full-stack/css/grid.mdx new file mode 100644 index 0000000..76108a7 --- /dev/null +++ b/absolute-beginners/full-stack/css/grid.mdx @@ -0,0 +1,120 @@ +--- +title: "CSS Grid Layout" +sidebar_label: "6. CSS Grid" +sidebar_position: 6 +description: "Learn how to create complex 2D layouts using rows and columns with CSS Grid." +--- + + +**CSS Grid** is the most powerful layout system available in CSS. While Flexbox is for 1D (rows **or** columns), Grid is for 2D (rows **and** columns at the same time). + +Think of it like a graph paper where you can decide exactly which "squares" your content should occupy. + +## 1. Defining the Grid + +Like Flexbox, Grid starts with a **Parent container**. You turn it on by using `display: grid;`. + +```css +.container { + display: grid; + /* Define 3 columns of equal width */ + grid-template-columns: 200px 200px 200px; + /* Define 2 rows */ + grid-template-rows: 100px 100px; +} +``` + +## 2. The "Fraction" Unit (`fr`) + +In modern web design, we rarely use fixed pixels (`px`) for columns. Instead, we use the `fr` unit. It stands for "fractional unit" and represents a piece of the available space. + +```css +.container { + display: grid; + /* Column 1 takes 1 part, Column 2 takes 2 parts */ + grid-template-columns: 1fr 2fr; +} +``` + +This is much better for responsive design because the columns will grow or shrink to fit the screen! + +## 3. Placing Items (Grid Lines) + +Every grid has invisible lines called **Grid Lines**. You can tell a "child" element to stretch across these lines. + +```css +.header { + /* Start at line 1, end at line 4 (Stretches across 3 columns) */ + grid-column: 1 / 4; + + /* Start at row 1, end at row 2 */ + grid-row: 1 / 2; +} +``` + +## 4. Common Grid Properties + + + + +Instead of writing `1fr 1fr 1fr 1fr`, you can use the repeat function to save time. +`grid-template-columns: repeat(4, 1fr);` + + + +Just like Flexbox, you can add space between your grid cells easily. +`gap: 20px;` + + + + +## 5. The "Holy Grail" Layout + +Here is how you build a professional website structure in just a few lines of CSS: + +```html +
+
Header
+ +
Main Content
+ +
Footer
+
+``` + +```css +.parent { + display: grid; + grid-template-columns: 200px 1fr; /* Sidebar and main content */ + grid-template-rows: auto 1fr auto; /* Header, Body, Footer */ + height: 100vh; +} + +header { grid-column: 1 / 3; } +nav { grid-row: 2 / 3; } +main { grid-row: 2 / 3; } +footer { grid-column: 1 / 3; } +``` + +## Interactive Practice: The Photo Gallery + +Create a grid gallery where the images automatically rearrange themselves: + +```css +.gallery { + display: grid; + /* Auto-fill as many columns as will fit, each at least 200px wide */ + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 15px; +} + +.gallery img { + width: 100%; + height: auto; + border-radius: 8px; +} +``` + +:::info Grid or Flexbox? +Use **Flexbox** when you have a simple list of items and you just want to align them. Use **Grid** when you have a full page layout or a design where items need to line up in both directions (like a calendar). +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/introduction.mdx b/absolute-beginners/full-stack/css/introduction.mdx new file mode 100644 index 0000000..e677eaa --- /dev/null +++ b/absolute-beginners/full-stack/css/introduction.mdx @@ -0,0 +1,121 @@ +--- +title: "Introduction to CSS" +sidebar_label: "1. Introduction" +sidebar_position: 1 +description: "Learn how to add colors, fonts, and styles to your HTML structure." +--- + +If HTML is the **skeleton** of a house, **CSS (Cascading Style Sheets)** is the paint on the walls, the style of the furniture, and the layout of the rooms. + +Without CSS, every website would look like a boring plain-text document. With CSS, we can make websites look professional, modern, and beautiful. + +## 1. How CSS Works + +CSS works by "selecting" an HTML element and telling it how to look. + +Think of it like giving a command: *"Hey Browser, find every **Paragraph**, and make the **Text Color Blue**."* + +```mermaid +graph LR + Selector["h1 {"] --> Property["color:"] + Property --> Value["blue;"] + Value --> End["}"] + + style Selector fill:#e1f5fe,stroke:#01579b,color:#333 + style Property fill:#fff9c4,stroke:#fbc02d,color:#333 + style Value fill:#e8f5e9,stroke:#2e7d32,color:#333 +``` + +### The 3 Parts of a CSS Rule: + +1. **Selector:** Which HTML tag are we talking to? (e.g., `h1`, `p`, `button`). +2. **Property:** What do we want to change? (e.g., `color`, `font-size`, `background`). +3. **Value:** What is the new setting? (e.g., `red`, `20px`, `blue`). + +## 2. Three Ways to Add CSS + +There are three ways to link your styles to your HTML. As you grow as a developer, you will almost always use the **External** way. + + + +You create a separate file named `style.css`. This keeps your code clean and organized. +
+ +**In your HTML:** + +```html + +``` + + + + +You put your CSS inside ` +``` + + + +You write the style directly inside the HTML tag. +
+ +**In your HTML:** + +`

Hello

` + +(Avoid this! It makes your code messy.) + + + + +## 3. The "Cascading" Secret + +Why is it called **Cascading** Style Sheets? Because CSS follows a hierarchy (like a waterfall). + +If you tell a paragraph to be **Red** at the top of your file, but then tell it to be **Blue** at the bottom, the browser will choose **Blue**. The last rule usually wins\! + +## 4. Your First Styles + +Here are the most common "paints" you will use first: + +| Property | What it does | Example | +| :--- | :--- | :--- | +| `color` | Changes text color | `color: green;` | +| `background-color` | Changes the box color | `background-color: black;` | +| `font-size` | Makes text bigger/smaller | `font-size: 16px;` | +| `text-align` | Moves text (left/center/right) | `text-align: center;` | + +## Let's Try It! + +1. Open your `index.html` from the HTML track. +2. In the ``, add this line: + `` +3. Create a new file in the same folder called `style.css`. +4. Type this in your CSS file: + +```css title="style.css" +body { + background-color: #f4f4f4; + font-family: sans-serif; +} + +h1 { + color: darkblue; + text-align: center; +} +``` + +5. Refresh your browser and see the transformation! + +:::tip Why learn CSS? +A website with great content but poor design is rarely trusted. CSS allows you to build **trust** with your users by making your work look professional and easy to read. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/mini-projects.mdx b/absolute-beginners/full-stack/css/mini-projects.mdx new file mode 100644 index 0000000..e9c968c --- /dev/null +++ b/absolute-beginners/full-stack/css/mini-projects.mdx @@ -0,0 +1,77 @@ +--- +title: "CSS Mini-Projects" +sidebar_label: "9. Mini-Projects" +sidebar_position: 9 +description: "Apply your CSS skills to transform plain HTML into beautiful, responsive components." +--- + +It's time to put your styling skills to work! We aren't just making things "look pretty"โ€”we are building layouts that work on every screen size and provide a great user experience. + +## Project 1: The Modern Profile Card + +Take the information from your "HTML Resume" and turn it into a sleek, modern UI card. This project tests your knowledge of **Border-radius**, **Box-shadow**, and **Centering**. + +### Requirements: +* **The Container:** A card with a soft shadow and rounded corners. +* **Typography:** Use a Google Font (like 'Inter' or 'Poppins') for a clean look. +* **Layout:** Center the profile picture at the top using `margin: auto`. +* **Interactivity:** Add a `transition` so the card lifts up or grows slightly when you hover over it. + +## Project 2: The Responsive Navigation Bar + +Every website needs a navigation menu. Your challenge is to build one that adapts to the screen. + +### Requirements: +* **Desktop View:** Use **Flexbox** to put the logo on the left and links on the right (`justify-content: space-between`). +* **Mobile View:** Use a **Media Query** to stack the links vertically when the screen is smaller than 600px. +* **Styling:** Remove the default bullet points from the list and add a nice `hover` effect to the links. + +```css +/* Hint for the hover effect */ +.nav-link::after { + content: ''; + display: block; + width: 0; + height: 2px; + background: #007bff; + transition: width 0.3s; +} +.nav-link:hover::after { + width: 100%; +} +``` + +## Project 3: The Dashboard Grid + +This is the ultimate test of your **CSS Grid** skills. You will build a 2D layout for a simple admin dashboard. + +### Requirements: +* **Layout:** Use `grid-template-areas` or `grid-column/row` to create: + * A full-width **Header**. + * A thin **Sidebar** on the left. + * A large **Main Content** area. + * A **Footer** at the bottom. +* **Responsiveness:** On mobile, make the Sidebar disappear or move to the top of the content. + +## Project 4: The Animated Landing Page Hero + +Create the "Hero Section" (the very first part of a website) for **CodeHarborHub**. + +### Requirements: +* **Background:** Use a linear-gradient background. +* **Animation:** Create a `@keyframes` animation that makes the main heading "fade in" and slide up from the bottom when the page loads. +* **Button:** Create a "Call to Action" button that pulses slowly to grab attention. + +## Submission Guidelines + +1. **Refactor:** Don't start from scratch! Go back to your `html-mini-projects` folder. +2. **External CSS:** Create a `style.css` for each project. Do not use inline styles. +3. **The "Squish" Test:** Open your project in the browser, hit `F12` (Inspect), and drag the window width back and forth. If nothing breaks, you've passed! + +:::tip The "Copy-Paste" Trap +It is tempting to find a beautiful button online and copy the code. At **CodeHarborHub**, we encourage you to **type it yourself**. Understanding *why* a property is used is more important than the final result. +::: + +:::info Summary +CSS is a superpower. You've gone from building "skeletons" to building "identities." You are now ready to add logic and make these components actually *do* things. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/responsive-design.mdx b/absolute-beginners/full-stack/css/responsive-design.mdx new file mode 100644 index 0000000..37434a8 --- /dev/null +++ b/absolute-beginners/full-stack/css/responsive-design.mdx @@ -0,0 +1,114 @@ +--- +title: "Responsive Design & Media Queries" +sidebar_label: "7. Responsive Design" +sidebar_position: 7 +description: "Learn how to make your websites look great on desktops, tablets, and smartphones" +--- + +In the early days of the web, people only browsed the internet on bulky desktop monitors. Today, more than half of all web traffic comes from mobile devices. + +**Responsive Design** is the practice of building websites that "respond" to the size of the user's screen. + +## 1. The Viewport Meta Tag + +Before we write any CSS, we have to tell the browser how to handle the screen width. This tag belongs in the `` of your HTML. Without it, your mobile site will look like a tiny, zoomed-out version of your desktop site. + +```html + +``` + +## 2. Media Queries: The "If" Statement of CSS + +A **Media Query** tells the browser: *"If the screen is smaller than 600px, apply these special styles."* + +```css +/* Standard Desktop Styles */ +body { + background-color: white; + font-size: 18px; +} + +/* Tablet and Mobile Styles */ +@media (max-width: 768px) { + body { + background-color: lightgrey; + font-size: 16px; + } +} +``` + +## 3. Mobile-First Approach + +At **CodeHarborHub**, we recommend the **Mobile-First** strategy. This means you write your styles for the smallest screen first, then use media queries to add complexity for larger screens. + +```mermaid +graph LR + Small[Mobile: Base CSS] --> Medium[Tablet: @media 768px] + Medium --> Large[Desktop: @media 1024px] + + style Small fill:#e1f5fe,stroke:#01579b,color:#333 + style Medium fill:#fff9c4,stroke:#fbc02d,color:#333 + style Large fill:#e8f5e9,stroke:#2e7d32,color:#333 +``` + +## 4. Responsive Images & Units + +To make things truly flexible, we avoid fixed pixels (`px`) for widths whenever possible. + + + + * **% (Percentage):** Relative to the parent container. + * **vw/vh:** Relative to the "Viewport" (screen) width/height. + * **em/rem:** Relative to the font size (great for spacing). + + + To keep images from "overflowing" off the screen, always add this to your CSS: + + ```css + img { max-width: 100%; height: auto; } + ``` + + + + +## 5. Flexbox + Media Queries + +The real power of responsive design comes from combining Flexbox with Media Queries. + +**The Goal:** A horizontal navbar on desktop that turns into a vertical list on mobile. + +```css +.nav-links { + display: flex; + flex-direction: row; /* Default: Horizontal */ +} + +@media (max-width: 480px) { + .nav-links { + flex-direction: column; /* Stack vertically on phones */ + } +} +``` + +## Interactive Practice: The "Stacking" Layout + +Try this in your `style.css`. We want two boxes to be side-by-side on a laptop, but on top of each other on a phone. + +```css +.parent { + display: flex; + flex-wrap: wrap; /* Allows items to drop to the next line */ + gap: 20px; +} + +.box { + flex: 1; /* Both boxes take equal space */ + min-width: 300px; /* If the screen gets smaller than 300px, they stack! */ + height: 200px; + background: blue; +} +``` + +:::info Chrome DevTools +You don't need five different phones to test your site. Right-click your page, choose **Inspect**, and click the **Device Toggle** icon (it looks like a phone and tablet). You can now drag the screen to any size to see how your CSS reacts! +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/css/selectors.mdx b/absolute-beginners/full-stack/css/selectors.mdx new file mode 100644 index 0000000..6458dea --- /dev/null +++ b/absolute-beginners/full-stack/css/selectors.mdx @@ -0,0 +1,123 @@ +--- +title: "CSS Selectors" +sidebar_label: "2. Selectors" +sidebar_position: 2 +description: "Learn how to target specific HTML elements using tags, classes, and IDs." +--- + +In the last lesson, we learned how to write a CSS rule. But how do we tell the browser exactly *which* element to style? We use **Selectors**. + +Think of Selectors like a guest list for a party: +* You can invite everyone (Universal). +* You can invite people by their last name (Tag). +* You can invite people wearing a specific badge (Class). +* You can invite one specific person by their ID card (ID). + +## 1. The Basic Three + +These are the selectors you will use 99% of the time. + +### 1. Tag Selector +Targets every element of a specific type. +* **CSS:** `p { color: grey; }` +* **Result:** Every single paragraph on your website turns grey. + +### 2. Class Selector (`.`) +Targets elements with a specific `class` attribute. You can use a class on many different elements. +* **HTML:** `

Hello

` +* **CSS:** `.highlight { background: yellow; }` +* **Note:** Always starts with a **dot** `.` in CSS. + +### 3. ID Selector (`#`) +Targets one unique element. You should only use an ID **once** per page. +* **HTML:** `` +* **CSS:** `#main-menu { background: black; }` +* **Note:** Always starts with a **hashtag** `#` in CSS. + +## 2. Selector Hierarchy (Specificity) + +What happens if a paragraph has a class AND an ID, and they both try to set a different color? CSS has a "Point System" to decide who wins. + +```mermaid +graph TD + ID[#ID: 100 Points] --> Class[.Class: 10 Points] + Class --> Tag[Tag: 1 Point] + Tag --> Universal[*: 0 Points] + + style ID fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#333 + style Class fill:#fff9c4,stroke:#fbc02d,color:#333 + style Tag fill:#e8f5e9,stroke:#2e7d32,color:#333 +``` + +> **The Rule:** The more specific the selector, the more "power" it has. An **ID** will always beat a **Class**, and a **Class** will always beat a **Tag**. + +## 3. Combinators: Targeting Relationships + +Sometimes you only want to style an element if it is *inside* another element. + + + +Targets all `

` tags that are inside a `

`. + +```css +div p { + color: blue; +} +``` + + + +Targets multiple elements at once to save time. Use a comma. + +```css +h1, h2, h3 { + font-family: sans-serif; +} +``` + + + + +## 4. Pseudo-classes: Styling States + +Pseudo-classes allow you to style an element based on a **user's action**, like hovering a mouse or clicking a link. + +```css +/* Change color only when the mouse hovers over a button */ +button:hover { + background-color: orange; + cursor: pointer; +} + +/* Style a link that has already been clicked */ +a:visited { + color: purple; +} +``` + +## Practice: The "Button Challenge" + +Try this in your `style.css`: + +1. Create a button in HTML: `` +2. Give it a base style using the **class** selector: + + ```css title="style.css" + .btn-signup { + background-color: blue; + color: white; + padding: 10px 20px; + border: none; + } + ``` +3. Add a **hover** state to make it turn green: + + ```css title="style.css" + .btn-signup:hover { + background-color: green; + } + ``` + +:::info Avoid IDs for Styling +Even though IDs have high power, professional developers usually stick to **Classes**. Why? Because Classes are reusable and keep your "points system" (specificity) low and easy to manage! +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/introduction.mdx b/absolute-beginners/full-stack/databases/introduction.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/introduction.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/postgresql/indexing.mdx b/absolute-beginners/full-stack/databases/postgresql/indexing.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/postgresql/indexing.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/postgresql/queries.mdx b/absolute-beginners/full-stack/databases/postgresql/queries.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/postgresql/queries.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/postgresql/relationships.mdx b/absolute-beginners/full-stack/databases/postgresql/relationships.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/postgresql/relationships.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/postgresql/setup.mdx b/absolute-beginners/full-stack/databases/postgresql/setup.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/postgresql/setup.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/redis/caching.mdx b/absolute-beginners/full-stack/databases/redis/caching.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/redis/caching.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/redis/intro.mdx b/absolute-beginners/full-stack/databases/redis/intro.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/redis/intro.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/databases/redis/sessions.mdx b/absolute-beginners/full-stack/databases/redis/sessions.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/databases/redis/sessions.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/api-design.mdx b/absolute-beginners/full-stack/devops/api-design.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/api-design.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/ci-cd/deployment.mdx b/absolute-beginners/full-stack/devops/ci-cd/deployment.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/ci-cd/deployment.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/ci-cd/github-actions.mdx b/absolute-beginners/full-stack/devops/ci-cd/github-actions.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/ci-cd/github-actions.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/ci-cd/pipelines.mdx b/absolute-beginners/full-stack/devops/ci-cd/pipelines.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/ci-cd/pipelines.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/crud.mdx b/absolute-beginners/full-stack/devops/crud.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/crud.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/documentation.mdx b/absolute-beginners/full-stack/devops/documentation.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/documentation.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/infra/ansible.mdx b/absolute-beginners/full-stack/devops/infra/ansible.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/infra/ansible.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/infra/infra-as-code.mdx b/absolute-beginners/full-stack/devops/infra/infra-as-code.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/infra/infra-as-code.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/infra/terraform.mdx b/absolute-beginners/full-stack/devops/infra/terraform.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/infra/terraform.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/linux-basics.mdx b/absolute-beginners/full-stack/devops/linux-basics.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/linux-basics.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/monitoring/logging.mdx b/absolute-beginners/full-stack/devops/monitoring/logging.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/monitoring/logging.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/monitoring/monit.mdx b/absolute-beginners/full-stack/devops/monitoring/monit.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/monitoring/monit.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/process-management.mdx b/absolute-beginners/full-stack/devops/process-management.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/process-management.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/rate-limiting.mdx b/absolute-beginners/full-stack/devops/rate-limiting.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/rate-limiting.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/rest-basics.mdx b/absolute-beginners/full-stack/devops/rest-basics.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/rest-basics.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/shell-scripting.mdx b/absolute-beginners/full-stack/devops/shell-scripting.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/shell-scripting.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/devops/validation.mdx b/absolute-beginners/full-stack/devops/validation.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/devops/validation.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/introduction.mdx b/absolute-beginners/full-stack/frontend/introduction.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/introduction.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/mini-projects.mdx b/absolute-beginners/full-stack/frontend/mini-projects.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/mini-projects.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/react/api-integration.mdx b/absolute-beginners/full-stack/frontend/react/api-integration.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/react/api-integration.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/react/components.mdx b/absolute-beginners/full-stack/frontend/react/components.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/react/components.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/react/hooks.mdx b/absolute-beginners/full-stack/frontend/react/hooks.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/react/hooks.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/react/intro.mdx b/absolute-beginners/full-stack/frontend/react/intro.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/react/intro.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/react/performance.mdx b/absolute-beginners/full-stack/frontend/react/performance.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/react/performance.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/react/props-state.mdx b/absolute-beginners/full-stack/frontend/react/props-state.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/react/props-state.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/react/routing.mdx b/absolute-beginners/full-stack/frontend/react/routing.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/react/routing.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/tailwind/best-practices.mdx b/absolute-beginners/full-stack/frontend/tailwind/best-practices.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/tailwind/best-practices.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/tailwind/intro.mdx b/absolute-beginners/full-stack/frontend/tailwind/intro.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/tailwind/intro.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/tailwind/responsive.mdx b/absolute-beginners/full-stack/frontend/tailwind/responsive.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/tailwind/responsive.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/frontend/tailwind/utility-classes.mdx b/absolute-beginners/full-stack/frontend/tailwind/utility-classes.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/absolute-beginners/full-stack/frontend/tailwind/utility-classes.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/_category_.json b/absolute-beginners/full-stack/getting-started/_category_.json new file mode 100644 index 0000000..af5616b --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Getting Started", + "position": 1, + "link": { + "type": "generated-index", + "title": "Getting Started with Full-Stack Development", + "description": "Welcome to CodeHarborHub! Before we dive into code, let's set up your environment, adopt the right mindset, and understand the core fundamentals of the web. This section will guide you through the essential tools, technologies, and concepts you need to kickstart your journey into full-stack development. Whether you're a complete beginner or just looking to solidify your foundation, this roadmap will ensure you're well-prepared to tackle the exciting world of web development." + } +} \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/developer-mindset.mdx b/absolute-beginners/full-stack/getting-started/developer-mindset.mdx new file mode 100644 index 0000000..8935cfb --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/developer-mindset.mdx @@ -0,0 +1,79 @@ +--- +title: "The Developer Mindset" +sidebar_label: "Developer Mindset" +sidebar_position: 3 +description: "Prepare your mind for the challenges of software engineering and learn how to think like a builder." +--- + +Before we install a single tool, we need to upgrade your "Internal Operating System." Learning to code is **10% syntax** and **90% problem-solving**. + +At **CodeHarborHub**, we don't just teach you how to type; we teach you how to think. + +## 1. From "Consumer" to "Creator" + +Most people look at a website and see a page. A developer looks at a website and sees **components, data flows, and logic**. + +* **Consumer:** "This button is blue." +* **Developer:** "How does the server know to change the database when I click this blue button?" + +## 2. Embrace the "Red Error" + +Beginners often feel like they "failed" when they see a screen full of red error text. **At CodeHarborHub, we celebrate errors.** + +An error message isn't a stop sign; it's a **GPS coordinate**. It is Git/Javascript/Python telling you exactly where the problem is. + +### The Debugging Loop: +1. **Read the error** (Don't close the terminal!). +2. **Google the error** (Use Stack Overflow or AI). +3. **Form a Hypothesis** ("Maybe I forgot a semicolon?"). +4. **Test it.** +5. **Repeat.** + +## 3. The 15-Minute Rule + +In our community, we follow a specific rule to keep you moving without getting "stuck" for days: + +> **If you encounter a problem:** +> 1. Try to solve it yourself for **15 minutes**. Document what you tried. +> 2. If you still can't solve it, **ask for help** in the community. +> 3. Show your notes: *"I tried X and Y, but I got Error Z."* + +## Growth vs. Fixed Mindset + +| Aspect | Fixed Mindset | Developer (Growth) Mindset | +| :--- | :--- | :--- | +| **Bugs** | "I'm not good at this." | "The code is logical; I just haven't found the typo yet." | +| **Complexity** | "This is too much to learn." | "I will break this down into 10 small, easy steps." | +| **Documentation** | "Why isn't there a video?" | "I'll read the docs to understand the core logic." | +| **Failure** | "I quit." | "I just found one way that *doesn't* work." | + +## 4. Breaking Down Problems (Decomposition) + +If I ask you to "Build an E-commerce site," your brain will freeze. It's too big. +A developer **decomposes** it: +1. How do I show one product? +2. How do I show a list of products? +3. How do I add one product to a list (the cart)? + +**Big problems are just groups of small problems.** + +## The "Self-Taught" Superpower + +The tech world moves fast. React changes, AWS adds new services, and AI evolves. The most valuable skill you will learn at **CodeHarborHub** is **Learning how to Learn**. + + + + Knowing how to ask Google or AI the right question is 50% of the job. + Tip: Instead of "my code doesn't work," search "Javascript TypeError: Cannot read property 'map' of undefined." + + + Coding is a muscle. 30 minutes every day is 10x better than 10 hours once a week. + + + When your code finally works, don't just move on. Ask: "Why did that fix work?" + + + +:::info +You will experience **Imposter Syndrome** (feeling like you don't belong or aren't smart enough). Even Senior Engineers at Google feel this. It just means you are learning something challenging! +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/first-program.mdx b/absolute-beginners/full-stack/getting-started/first-program.mdx new file mode 100644 index 0000000..3aab000 --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/first-program.mdx @@ -0,0 +1,97 @@ +--- +title: "Your First Program" +sidebar_label: "First Program" +sidebar_position: 7 +description: "The moment of truth. Write, run, and see your first lines of code in action." +--- + +The tradition of every software engineer since the 1970s is to start their journey by making the computer say **"Hello, World!"**. Today, you join that tradition. + +We are going to use **Node.js** (which we installed earlier) to run JavaScript directly on your computer. + +## 1. The Setup + +Open your **Terminal** and follow these commands to create a dedicated space for your first project: + +```bash +# Create a folder for your practice +mkdir hello-world-app + +# Move into that folder +cd hello-world-app + +# Create the JavaScript file +touch app.js + +# Open it in VS Code +code . +``` + +## 2. Writing the Code + +In VS Code, open the `app.js` file you just created. Type the following code exactly as shown: + +```javascript +// This is a comment - the computer ignores it +// It's just for us humans to read! + +const greeting = "Hello, CodeHarborHub!"; +const date = new Date().toLocaleDateString(); + +console.log("*******************************"); +console.log(greeting); +console.log("Today is: " + date); +console.log("I am officially a Developer! ๐Ÿš€"); +console.log("*******************************"); +``` + +### What is happening here? + +* **`const`**: We are creating a "Container" (Variable) to hold our text. +* **`console.log()`**: This is the command that tells the computer to "print" or "speak" the text into our terminal. +* **`new Date()`**: A built-in JavaScript tool that grabs the current time from your system. + +## 3. Running the Program + +Go back to your terminal (inside the `hello-world-app` folder). Type this command and hit Enter: + +```bash +node app.js +``` + +**If you see the stars and the greeting in your terminal, CONGRATULATIONS! You just executed your first piece of backend code.** + +## Troubleshooting: "What if it didn't work?" + +Don't panic! Debugging is part of the job. Check these three things: + +| Problem | Fix | +| :--- | :--- | +| **"node is not recognized"** | Node.js didn't install correctly. Try restarting your terminal. | +| **"cannot find module"** | Make sure you are inside the `hello-world-app` folder (Type `ls` to check). | +| **SyntaxError** | You likely missed a quote `"` or a parenthesis `)`. Check your code again! | + +## 4. Level Up: The Interactive Version + +Let's make it more interesting. Copy-paste this into your `app.js` instead: + +```javascript +const name = "Developer"; + +function welcome(user) { + console.log(`Welcome to the team, ${user}!`); + console.log("Your journey to Full-Stack Mastery starts now."); +} + +welcome(name); +``` + +Run `node app.js` again. Notice how we used a **Function** to reuse our code? This is the foundation of every app at **CodeHarborHub**. + +:::tip You are an Engineer! +You just took an idea, wrote it in a language the computer understands, and executed it. That is the definition of Software Engineering. +::: + +:::info What's Next? +Now that you've conquered your first program, we need to understand the "Pipe System" that allows millions of these programs to talk to each other. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/how-web-works.mdx b/absolute-beginners/full-stack/getting-started/how-web-works.mdx new file mode 100644 index 0000000..38efe19 --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/how-web-works.mdx @@ -0,0 +1,136 @@ +--- +title: "How the Web Works" +sidebar_label: "How the Web Works" +sidebar_position: 2 +description: "A deep dive into the journey of a website from a server to your screen. " +--- + +Ever wondered what happens behind the scenes when you type `www.codeharborhub.com` into your browser and hit Enter? In less than a second, a complex global dance happens. + +To build great websites, you first need to understand the **Infrastructure** of the internet + +## The 3 Main Players + +Imagine the Internet as a giant **Restaurant**: + +1. **The Client (You/The Customer):** The web browser on your computer or phone. You are the one making the "order." +2. **The Server (The Kitchen):** A powerful computer sitting in a data center. It "cooks" the data and sends it back to you. +3. **The Request/Response (The Waiter):** The message that travels between the Client and the Server. + + + +[Image of client server model diagram] + +```mermaid +graph LR + subgraph Client_Side [The Client - 'The Customer'] + A[Web Browser] + B[Mobile App] + end + + subgraph Internet [The Network - 'The Waiter'] + C{HTTP Request} + D{HTTP Response} + end + + subgraph Server_Side [The Server - 'The Kitchen'] + E[Web Server - Node.js/Express] + F[(Database - PostgreSQL)] + G[File Storage - S3/Images] + end + + %% Flow logic + A -->|1. Request| C + B -->|1. Request| C + C -->|2. Delivers Request| E + E <-->|3. Fetches Data| F + E <-->|4. Grabs Assets| G + E -->|5. Prepares Response| D + D -->|6. Delivers Response| A + D -->|6. Delivers Response| B + + %% Styling + style Client_Side fill:#e1f5fe,stroke:#01579b,color:#333 + style Server_Side fill:#fff3e0,stroke:#e65100,color:#333 + style Internet fill:#f3e5f5,stroke:#4a148c,color:#333 +``` + +## The Step-by-Step Journey + +When you request a page, your computer follows these **6 critical steps**: + +### 1. The DNS Lookup (The Phonebook) +Computers don't understand names like `google.com`; they understand numbers called **IP Addresses** (e.g., `142.250.190.46`). +* The **DNS (Domain Name System)** acts like a phonebook, translating the URL you typed into an IP address. + +### 2. TCP/IP Handshake (The Greeting) +Before sending data, your browser and the server must "introduce" themselves. +* **Client:** "Hello! Are you there?" +* **Server:** "Yes, I'm here. Are you ready to receive data?" +* **Client:** "Ready!" + +### 3. HTTP Request (The Order) +Your browser sends an **HTTP Request** message. Itโ€™s like saying: *"Hey Server, please give me the file called `index.html`."* + +### 4. Server Processing (The Cooking) +The server looks at the request, finds the file in its database or storage, and prepares the "ingredients" (HTML, CSS, Images). + +### 5. HTTP Response (The Delivery) +The server sends back an **HTTP Response**. If everything is fine, it sends a `200 OK` status code along with the website code. + +### 6. Rendering (The Plating) +Your browser receives the raw code and turns it into a beautiful, clickable website. + +## Visualizing the Flow + +```mermaid +sequenceDiagram + participant Browser as ๐Ÿ’ป Browser (Client) + participant DNS as ๐Ÿ“– DNS Server + participant Server as ๐Ÿ  Web Server + + Note over Browser: User types URL + Browser->>DNS: Where is codeharborhub.com? + DNS-->>Browser: It's at IP 104.21.74.204 + + Browser->>Server: HTTP GET /index.html + Note right of Server: Server finds files + Server-->>Browser: HTTP 200 OK (HTML/CSS/JS) + + Note over Browser: Browser renders the page +``` + +## The "Big Three" Files + +Every website you visit is made of three fundamental technologies: + +| Technology | Role | Analogy | +| :--- | :--- | :--- | +| **HTML** | **Structure** | The skeleton and bricks of a house. | +| **CSS** | **Style** | The paint, furniture, and decorations. | +| **JavaScript** | **Behavior** | The electricity, plumbing, and smart locks. | + +## Common Questions (FAQ) + + + +An IP Address is a unique set of numbers that identifies your computer on the internet. Think of it as your digital home address. + + + +HTTP is the standard protocol. HTTPS is the Secure version. It encrypts the data so hackers can't "eavesdrop" on your password or credit card info. +
(At CodeHarborHub, we always use HTTPS!) + + + +Hosting is basically renting a space on a powerful computer (Server) that stays on 24/7 so anyone in the world can visit your site at any time. + + + +:::danger Why does this matter? +As a Full-Stack Engineer, you will face "Bugs." Understanding this flow helps you realize if the bug is in the **Client** (UI issue), the **Server** (Logic issue), or the **Network** (Connection issue). +::: + +:::tip The Network Tab +Want to see this in real action? Open your browser, right-click anywhere, select **Inspect**, and go to the **Network** tab. Refresh the page and watch the "Waiters" (Requests) flying back and forth! +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/introduction.mdx b/absolute-beginners/full-stack/getting-started/introduction.mdx new file mode 100644 index 0000000..3adf67f --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/introduction.mdx @@ -0,0 +1,93 @@ +--- +title: "Welcome to Full-Stack Engineering" +sidebar_label: "Introduction" +sidebar_position: 1 +description: "Start your journey at CodeHarborHub to become a versatile Full-Stack Software Engineer. This introduction will set the stage for your learning path, covering what it means to be a full-stack developer, the roadmap ahead, and how to make the most of these resources." +tags: ["Full-Stack Development", "Introduction", "Getting Started", "Roadmap", "Developer Mindset"] +keywords: ["Full-Stack Development", "Introduction", "Getting Started", "Roadmap", "Developer Mindset", "Web Development", "Software Engineering"] +--- + +Welcome to **CodeHarborHub**! You are about to embark on a journey that transforms you from a code enthusiast into a **Full-Stack Software Engineer**. + +In the modern tech world, being "Full-Stack" means you possess the superpower to take an idea from a simple sketch to a fully functional, globally deployed application. + +## What is a Full-Stack Engineer? + +A Full-Stack Engineer is a developer who can handle both the **client-side** (what users see) and the **server-side** (the hidden logic and databases). + +```mermaid +graph TD + User((User)) -->|Interacts with| Frontend[Frontend: HTML/CSS/React] + Frontend -->|Requests Data| Backend[Backend: Node.js/Express] + Backend -->|Queries/Saves| DB[(Database: PostgreSQL/Redis)] + Backend -->|Responds| Frontend + Frontend -->|Displays| User +``` + +At **CodeHarborHub**, we believe that mastering both sides of the stack gives you a deeper understanding of how web applications work and makes you a more versatile developer. + +## The Mastery Roadmap + +Our curriculum is divided into three major pillars to ensure you build a rock-solid foundation: + + + + +Focuses on the User Experience (UX). You'll learn how to build beautiful, responsive interfaces using: + +* HTML5 & Semantic Web +* CSS3 & Tailwind CSS +* React.js & State Management + + + +Focuses on the Logic & Data. You'll learn how to build the "brain" of the application using: + +* Node.js & Express +* RESTful APIs & JWT Auth +* PostgreSQL & Redis + + + +Focuses on Deployment & Scale. You'll learn how to ship your code to the world using: + +* Linux & AWS Services +* GitHub Actions (CI/CD) +* Infrastructure as Code (Terraform/Ansible) + + + + +## Why CodeHarborHub? + +| Feature | What You Get | +| :--- | :--- | +| **Project-Based** | You don't just watch; you build real-world SaaS, E-commerce, and Auth systems. | +| **Industry Ready** | We teach tools used by top tech companies (AWS, Redis, Ansible). | +| **Open Source** | Learn to collaborate on GitHub, just like real engineering teams. | +| **Clean Code** | We emphasize software design patterns and system design from day one. | + +## Prerequisites + +Before you start, make sure you have: + +1. **A Curious Mind:** The ability to ask "How does this work?" +2. **Persistence:** Coding involves a lot of trial and error. +3. **Hardware:** A laptop/PC with at least 8GB RAM (preferred) and a stable internet connection. + +## How to Use These Docs + + * **Follow the Sequence:** The modules are sequenced to build on each other. Start with "Getting Started". Try not to skip ahead! + * **Check the Callouts:** Pay attention to the special boxes throughout the tutorials: + +:::tip +Look for these boxes to find industry shortcuts and "clean code" advice. They contain insights that will save you hours of frustration and help you write better code. +::: + +:::danger Warning +Pay attention to these to avoid common security pitfalls or performance bottlenecks. +::: + +:::info Community First +If you get stuck, remember that **CodeHarborHub** is a community. Reach out on our GitHub Discussions or join our developer community to seek help from mentors and peers. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/setup-environment.mdx b/absolute-beginners/full-stack/getting-started/setup-environment.mdx new file mode 100644 index 0000000..a85fa80 --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/setup-environment.mdx @@ -0,0 +1,111 @@ +--- +title: "Setting Up Your Environment" +sidebar_label: "Setup Environment" +sidebar_position: 4 +description: "Prepare your machine for full-stack development by installing the essential tools of the trade." +--- + +To build professional software, you need professional tools. Think of this as setting up your workshop. We need a place to write code, a place to run code, and a way to manage our versions. + +## The Essential Toolkit + +We will be installing four core components today. Don't worry about how they work yetโ€”we will master each one in the coming modules. + +### 1. The Browser (The Viewer) +While you likely have a browser, we recommend **Google Chrome** or **Firefox Developer Edition**. Their "DevTools" are the industry standard for debugging. + +### 2. Node.js (The Engine) +Node.js allows us to run JavaScript outside of a browser. It is the heart of our backend and our tooling. +* **Current Recommendation:** Use the **LTS (Long Term Support)** version. + +### 3. Git (The Time Machine) +Git tracks every change you make to your code. If you break something, Git allows you to "travel back in time" to when it worked. + +### 4. VS Code (The Workbench) +Visual Studio Code is the world's most popular code editor. Itโ€™s where you will spend 90% of your time. + +## Installation Guide + +Follow the instructions for your specific Operating System: + + + + +### 1. Install Package Manager (Optional but Recommended) +Open PowerShell as Administrator and install **Winget** or **Chocolatey**. This makes installing dev tools much easier. + +### 2. Install Tools +Run these commands or download the installers manually: +* **Node.js:** [Download LTS](https://nodejs.org/) +* **Git:** [Download for Windows](https://git-scm.com/) +* **VS Code:** [Download](https://code.visualstudio.com/) + +### 3. Terminal Setup +Windows users should use **PowerShell** or install **WSL2 (Windows Subsystem for Linux)** for a more "pro" experience later in the course. + + + + +### 1. Install Homebrew (The Mac Package Manager) +Open your Terminal and paste: +```bash +/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" +``` + +### 2. Install Tools + +Run these commands in your terminal: + +```bash +brew install node +brew install git +brew install --cask visual-studio-code +``` + + + + +Most Linux users already have a preferred way, but for Ubuntu/Debian: + +```bash +sudo apt update +sudo apt install nodejs npm git +# For VS Code, download the .deb package from their site +``` + + + + +## Verification: Is it Working? + +Once installed, we need to make sure your computer "knows" these tools exist. Open your **Terminal** (Command Prompt on Windows, Terminal on Mac/Linux) and type these commands: + +```bash +# Check Node.js version +node -v + +# Check NPM (Node Package Manager) version +npm -v + +# Check Git version +git -v +``` + +:::tip Success! +If you see version numbers (e.g., `v20.x.x`), congratulations! Your workshop is ready. If you see "command not found," try restarting your computer to refresh the system paths. +::: + +## CodeHarborHub Extensions + +Make your life easier! Open VS Code, go to the Extensions view (`Ctrl+Shift+X`), and install these "Must-Haves": + +| Extension | Purpose | +| :--- | :--- | +| **Prettier** | Automatically formats your code to look clean. | +| **ESLint** | Flags errors in your JavaScript as you type. | +| **Auto Close Tag** | Automatically adds HTML close tags. | +| **Live Server** | Launches a local development server with a live reload feature. | + +:::danger Don't Skip This! +Many beginners try to code in "Notepad" or a simple text editor. Modern development relies on the features of an IDE (Integrated Development Environment) like VS Code. Using the right tools is half the battle won. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/terminal-basics.mdx b/absolute-beginners/full-stack/getting-started/terminal-basics.mdx new file mode 100644 index 0000000..82728dc --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/terminal-basics.mdx @@ -0,0 +1,84 @@ +--- +title: "Terminal & CLI Basics" +sidebar_label: Terminal Basics +sidebar_position: 6 +description: "Learn the essential commands to navigate your computer like a professional engineer." +--- + +To the average person, a black screen with white text looks like "hacking." To a developer, the **Terminal** (also called the Command Line Interface or CLI) is the most powerful tool in the shed. + +Instead of clicking through folders with a mouse, you can move, create, and delete files with a few keystrokes. At **CodeHarborHub**, we use the terminal for everything from running servers to deploying apps. + +## 1. GUI vs. CLI + +* **GUI (Graphical User Interface):** Point, click, and drag. Easy to learn, but slow for repetitive tasks. +* **CLI (Command Line Interface):** Typing commands. Faster, scriptable, and allows you to control remote servers (like those on AWS). + +## 2. Navigation: Finding Your Way + +Think of the terminal as a "You Are Here" map. You are always inside a specific folder (the **Working Directory**). + +| Command | Name | What it does | +| :--- | :--- | :--- | +| `pwd` | Print Working Directory | "Where am I right now?" | +| `ls` | List | "Show me all files and folders in here." | +| `cd ` | Change Directory | "Go inside this folder." | +| `cd ..` | Go Back | "Move up one level to the parent folder." | + +## 3. File Operations: Building & Cleaning + +Now let's learn how to manage your project files without a mouse. + + + + +* **`mkdir `**: Make Directory (Create a new folder). +* **`touch `**: Create a new empty file (e.g., `touch index.html`). + + + + +* **`rm `**: Remove a file. +* **`rm -rf `**: Remove a folder and everything inside it. + +:::danger Warning +The terminal has no "Recycle Bin." When you delete something here, it is gone forever. Double-check before hitting Enter! +::: + + + + +## 4. Terminal "Superpowers" + +Professional developers use these tricks to work at lightning speed: + +1. **Tab Completion:** Start typing a folder name and hit `Tab`. The terminal will finish the name for you! +2. **Up/Down Arrows:** Press the Up arrow to see the last command you typed. No need to re-type long commands. +3. **`clear`**: Use this when your screen gets too messy and you want a fresh start. +4. **`Ctrl + C`**: The "Emergency Stop." If a program is stuck or a server is running, this forces it to stop. + +## 5. The Full-Stack Workflow + +Here is a real-world example of how you will use these commands at **CodeHarborHub**: + +```bash +# 1. Create a project folder +mkdir my-cool-app + +# 2. Go inside it +cd my-cool-app + +# 3. Create your main files +touch index.html style.css script.js + +# 4. Open it in VS Code immediately +code . +``` + +:::tip Which Terminal? + +* **Windows:** Use **PowerShell** or **Git Bash**. +* **Mac/Linux:** Use the built-in **Terminal** (Zsh or Bash). + +At CodeHarborHub, we recommend learning **Bash/Zsh** commands as they are the standard for web servers and cloud environments. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/getting-started/vs-code-setup.mdx b/absolute-beginners/full-stack/getting-started/vs-code-setup.mdx new file mode 100644 index 0000000..820dcac --- /dev/null +++ b/absolute-beginners/full-stack/getting-started/vs-code-setup.mdx @@ -0,0 +1,79 @@ +--- +title: "VS Code Mastery" +sidebar_label: "VS Code Setup" +sidebar_position: 5 +description: "Optimize your editor for speed, productivity, and a beautiful coding experience." +--- + +**Visual Studio Code (VS Code)** is more than just a text editor; it is the industry-standard environment where you will build, debug, and deploy your projects. Setting it up correctly today will save you hundreds of hours over your career. + +## 1. The Interface at a Glance + +Before we customize, let's learn the "Geography" of your new home: + +1. **Activity Bar:** Left side icons (Explorer, Search, Git, Extensions). +2. **Side Bar:** Shows your project files and folders. +3. **Editor Area:** Where you write your code. +4. **Panel:** Bottom area for the Terminal and Debugging logs. +5. **Status Bar:** Bottom blue/purple bar showing git branches and errors. + +## 2. Themes & Aesthetics + +A developer's eyes are their most important asset. You need a theme that reduces strain and looks great. + +### Recommended Themes: +* **One Dark Pro:** The classic, clean look. +* **Dracula Official:** High contrast and very popular. +* **Night Owl:** Designed specifically for coding in low light. + +**How to change:** Press `Ctrl + K` then `Ctrl + T` (or `Cmd` on Mac) and browse the installed themes. + +## 3. The CodeHarborHub "Power Pack" + +To work efficiently in our full-stack track, install these specific extensions from the Marketplace (`Ctrl + Shift + X`): + +| Extension | Why you need it | +| :--- | :--- | +| **Material Icon Theme** | Gives unique icons to every file type (HTML, CSS, JS). | +| **Bracket Pair Colorizer** | Makes it easy to see which `{}` belong together. | +| **Tailwind CSS IntelliSense**| Autocompletes classes for our styling phase. | +| **Thunder Client** | An alternative to Postman for testing your APIs. | +| **GitLens** | See exactly who changed which line of code and when. | + +## 4. Keyboard Shortcuts (The Speed Hacks) + +Professional engineers rarely touch their mouse. Master these 5 shortcuts first: + +| Action | Windows/Linux | macOS | +| :--- | :--- | :--- | +| **Quick Open File** | `Ctrl + P` | `Cmd + P` | +| **Command Palette** | `Ctrl + Shift + P` | `Cmd + Shift + P` | +| **Integrated Terminal**| ``Ctrl + ` `` | ``Ctrl + ` `` | +| **Multi-Cursor Edit** | `Alt + Click` | `Opt + Click` | +| **Toggle Side Bar** | `Ctrl + B` | `Cmd + B` | + + +## 5. Settings for Clean Code + +We want VS Code to help us stay organized. Open your **Settings** (`Ctrl + ,`) and search/check these: + +1. **Format On Save:** Automatically runs *Prettier* every time you save your work. +2. **Auto Save:** Set this to `onFocusChange` so you never lose work. +3. **Font Size:** Set it to something comfortable (usually `14` or `16`). +4. **Font Family:** Consider "JetBrains Mono" or "Fira Code" for better readability. + +## 6. The "Command Palette" Trick + +If you forget a shortcut, don't worry. The **Command Palette** is your "Global Search" for VS Code features. + +* Press `Ctrl + Shift + P`. +* Type what you want to do (e.g., "Change Color Theme" or "Restart Extension Host"). +* It will show you the command and the shortcut for it. + +:::tip Synced Settings +If you have multiple computers, turn on **Settings Sync** (bottom-left gear icon). This will backup your themes, extensions, and shortcuts to your GitHub account so they follow you everywhere! +::: + +:::danger Warning +Avoid "Extension Bloat." Installing 50+ extensions will slow down VS Code and make it crash. Only install what you actually use. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/html/_category_.json b/absolute-beginners/full-stack/html/_category_.json new file mode 100644 index 0000000..7dea060 --- /dev/null +++ b/absolute-beginners/full-stack/html/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "HTML", + "position": 3, + "link": { + "type": "generated-index", + "title": "HTML: The Skeleton of the Web", + "description": "HyperText Markup Language (HTML) is the foundation of every website on the planet. Learn how to structure content using tags, attributes, and semantic elements to build accessible and SEO-friendly sites." + } +} \ No newline at end of file diff --git a/absolute-beginners/full-stack/html/accessibility.mdx b/absolute-beginners/full-stack/html/accessibility.mdx new file mode 100644 index 0000000..27319b9 --- /dev/null +++ b/absolute-beginners/full-stack/html/accessibility.mdx @@ -0,0 +1,81 @@ +--- +title: "Web Accessibility (a11y)" +sidebar_label: "7. Accessibility" +sidebar_position: 7 +description: "Learn how to make your websites usable for everyone, including people with disabilities." +--- + +In the real world, we build ramps for wheelchairs and put braille on elevator buttons. On the web, we do the same thing! + +**Web Accessibility** means making sure your website can be used by **everyone**, including people who: +* Are blind or have low vision. +* Cannot use a mouse (they use only a keyboard). +* Are colorblind. +* Have temporary injuries (like a broken arm). + +## 1. The "Screen Reader" Perspective + +A screen reader is software that reads the code of a website out loud. Imagine trying to use your favorite app with your eyes closedโ€”that is how many people experience your work. + +### How to help the Screen Reader: +* **Use Semantic Tags:** As we learned, using `
` instead of a `
` tells the reader exactly where the top of the page is. +* **The "Alt" Rule:** Always describe your images. + * โŒ `` โ†’ The reader just says "Image." + * โœ… `A golden retriever playing with a ball` โ†’ The reader describes the scene. + +## 2. The Keyboard Test + +Some users cannot use a mouse due to motor disabilities. They navigate the web using the **Tab** key. + +### How to be Keyboard Friendly: +1. **Never remove the "Focus Outline":** You know that blue box that appears around a button when you click it? That tells keyboard users where they are. Don't hide it! +2. **Use Buttons for Actions:** If something is clickable, use a ` +``` + +## Putting it All Together: A Registration Form + +Copy this into your `index.html` to see a real-world example: + +```html +

Join CodeHarborHub

+
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ + +
+ +
+ + +
+``` + +:::info Validation +Did you notice the `required` attribute in the code above? This is called **HTML5 Validation**. It tells the browser not to let the user submit the form if the field is emptyโ€”all without needing any JavaScript! +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/html/html-tables.mdx b/absolute-beginners/full-stack/html/html-tables.mdx new file mode 100644 index 0000000..4a5f26f --- /dev/null +++ b/absolute-beginners/full-stack/html/html-tables.mdx @@ -0,0 +1,118 @@ +--- +title: "HTML Tables" +sidebar_label: "4. HTML Tables" +sidebar_position: 4 +description: "Learn how to organize and display complex data sets using rows, columns, and headers." +--- + +Tables are used to display **tabular data**โ€”information that is best understood in a grid format, like a bus schedule, a price list, or a leaderboard. + +## 1. The Table Hierarchy + +An HTML table is built using a "Nested" structure. You can't just throw data into a table; you have to define the table, then the row, and then the specific cell. + +```mermaid +graph TD + Table[table: The Container] --> TR[tr: Table Row] + TR --> TH[th: Table Header] + TR --> TD[td: Table Data] + + style Table fill:#e1f5fe,stroke:#01579b,color:#333 + style TR fill:#fff,stroke:#333,color:#333 + style TH fill:#c8e6c9,stroke:#2e7d32,color:#333 + style TD fill:#fff9c4,stroke:#fbc02d,color:#333 +``` + +### The Basic Tags: + + * **``**: The main wrapper for all table content. + * **``**: Stands for **Table Row**. Every horizontal line of data needs a row. + * **``**: Wraps the header rows. + * **``**: Wraps the main body of data. + * **``**: Wraps the summary or total row at the bottom. + +```html +
`**: Stands for **Table Header**. These cells are bold and centered by default. + * **``**: Stands for **Table Data**. These are the standard cells in your table. + +## 2. Building a Simple Table + +```html + + + + + + + + + + + + + + + + +
CourseDurationInstructor
HTML Basics2 WeeksCodeHarborHub
CSS Styling3 WeeksJohn Doe
+``` + +## 3. Advanced Structure: Thead, Tbody, and Tfoot + +For larger tables, we group rows into semantic sections. This helps screen readers and allows developers to style the header and footer differently. + + * **`
+ + + + + + + + + + + + + + + + + + +
ProductPrice
Web Hosting$10
Total$10
+``` + +## 4. Spanning Rows and Columns + +Sometimes a cell needs to take up more than one "slot." We use two special attributes for this: + + + +**Column Span:** Merges cells horizontally across multiple columns. +
+<td colspan="2">Double Wide Cell</td> + + +**Row Span:** Merges cells vertically across multiple rows. +
+<td rowspan="2">Double Tall Cell</td> + + + +## Interactive Practice + +Try to create a "Student Gradebook" in your `index.html`: + +1. Create a table with 3 columns: **Subject**, **Marks**, and **Grade**. +2. Add at least 3 rows of data. +3. Use `` for the top row to make the titles stand out. +4. Add a `border="1"` attribute to the `` tag just to see the grid (Note: We usually do this in CSS, but it helps for learning\!). + +:::warning A Critical Rule +**Never use tables for page layouts.** In the 1990s, developers used tables to place sidebars and headers. Today, we use **Flexbox** or **Grid** in CSS for layouts. Tables should only be used for actual data! +::: + +:::info Accessibility +Always include a `
` tag immediately after the opening `` tag. It acts like a title for the table, helping users with screen readers understand what they are about to read. +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/html/introduction.mdx b/absolute-beginners/full-stack/html/introduction.mdx new file mode 100644 index 0000000..27aa66e --- /dev/null +++ b/absolute-beginners/full-stack/html/introduction.mdx @@ -0,0 +1,112 @@ +--- +title: "Introduction to HTML" +sidebar_label: "1. Introduction" +sidebar_position: 1 +description: "Learn the fundamental building blocks of the web and write your first HTML structure." +--- + +**HTML** stands for **HyperText Markup Language**. It is the standard language used to create the structure of web pages. + +Think of a website like a human body: +* **HTML** is the **Skeleton** (The bones and structure). +* **CSS** is the **Skin/Clothes** (The beauty and style). +* **JavaScript** is the **Muscle/Brain** (The movement and logic). + +## 1. What is "Markup"? + +Markup is a way of "tagging" plain text so that a web browser knows how to display it. + +If you just type text, the browser doesn't know if it's a heading, a link, or a list. We use **Tags** to provide that context. + +## 2. The Anatomy of an HTML Element + +Most HTML elements follow a simple pattern: an **Opening Tag**, the **Content**, and a **Closing Tag**. + +```mermaid +graph LR + subgraph Element ["The HTML Element"] + direction LR + Opening["<p>"] + Content["This is a paragraph."] + Closing["</p>"] + + Opening --- Content --- Closing + end + + %% Labels and Pointers + OpenLabel["Opening Tag
(Starts the element)"] + ContentLabel["Content
(What the user sees)"] + CloseLabel["Closing Tag
(Ends the element)"] + + OpenLabel -.-> Opening + ContentLabel -.-> Content + CloseLabel -.-> Closing + + %% Styling + style Opening fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#333 + style Content fill:#fff,stroke:#333,stroke-dasharray: 5 5,color:#333 + style Closing fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#333 + style Element fill:#f9f9f9,stroke:#666,stroke-width:1px,color:#333 +``` + +:::warning Don't Forget the Slash! +The closing tag is identical to the opening tag but starts with a forward slash `/`. Forgetting this is the #1 reason why beginners' websites look "broken." +::: + +## 3. The Standard Page Structure + +Every HTML document must follow a specific "Boilerplate" structure. Without these tags, the browser might get confused about how to render your page. + +```html title="index.html" + + + + + + My First Web Page + + +

Hello CodeHarborHub!

+

I am learning how to build the web.

+ + +``` + +### Breaking it Down: + + * **``**: Tells the browser "Hey, I'm using the latest version of HTML (HTML5)." + * **``**: The "Root" element that wraps everything. + * **``**: Contains metadata (info about the page) that doesn't show up on the screen. + * **``**: Everything inside here is what the user actually sees. + +## Block vs. Inline Elements + +HTML elements generally fall into two categories. Understanding this will save you hours of CSS frustration later! + + + +These always start on a **new line** and take up the full width available. +* <h1> to <h6> +* <p> (Paragraph) +* <div> (Generic container) + + +These do **not** start on a new line. They only take up as much width as necessary. +* <a> (Links) +* <span> (Small text bits) +* <img> (Images) + + + +## Your First Task: "The Boilerplate" + +Let's use the environment we set up in the previous module! + +1. Open **VS Code**. +2. Create a new file named `index.html`. +3. **Pro Tip:** Type `!` (exclamation mark) and hit `Tab`. +4. VS Code will automatically generate the entire boilerplate for you! This is called **Emmet**, and it's a developer's best friend. + +:::info Why HTML is Important +Even if you become a world-class React or Vue developer, you are still ultimately writing HTML. A solid understanding of HTML structure leads to better **SEO** (Search Engine Optimization) and **Accessibility** (helping blind or visually impaired users read your site). +::: \ No newline at end of file diff --git a/absolute-beginners/full-stack/html/mini-projects.mdx b/absolute-beginners/full-stack/html/mini-projects.mdx new file mode 100644 index 0000000..c75c325 --- /dev/null +++ b/absolute-beginners/full-stack/html/mini-projects.mdx @@ -0,0 +1,78 @@ +--- +title: "HTML Mini-Projects" +sidebar_label: "9. Mini-Projects" +sidebar_position: 9 +description: "Put your HTML skills to the test with these structure-only projects." +--- + +It's time to take off the training wheels! To master HTML, you need to build. These projects focus purely on **structure, semantics, and accessibility**. + +**The Challenge:** Build these using *only* HTML. No CSS allowed yet! + +## Project 1: The Professional Technical Resume + +Every developer needs a resume. Instead of using a Word document, you will build yours using semantic HTML. This makes it readable by "Applicant Tracking Systems" (ATS). + +### Requirements: +* **Header:** Use `
` for your name, a professional title, and links to your GitHub/LinkedIn. +* **Experience:** Use `
` for each job and `
    ` for your responsibilities. +* **Education:** Use a `
` to list your Degree, Institution, and Year. +* **Skills:** Use a "Description List" (`
`, `
`, `
`) to categorize your skills. + +```mermaid +graph TD + Resume[Resume Container] --> Head[Header: Contact Info] + Resume --> Summary[Section: About Me] + Resume --> Experience[Section: Work History] + Resume --> Education[Section: Table of Degrees] + Resume --> Footer[Footer: Links] +``` + +## Project 2: The "Survey & Feedback" Form + +Forms are the most complex part of HTML. This project ensures you know how to handle different types of user data. + +### Requirements: + + * **Personal Info:** Text inputs for Name and Email (use `required`). + * **Rating:** A group of `radio` buttons (1 to 5 stars). + * **Features:** `checkboxes` for "Which topics do you want to learn?" (HTML, CSS, JS). + * **Feedback:** A `