{"id":18255902,"url":"https://github.com/nothingnothings/hostcorpswebpackversion","last_synced_at":"2026-05-07T06:36:15.680Z","repository":{"id":150002674,"uuid":"532636373","full_name":"nothingnothings/HostCorpsWebpackVersion","owner":"nothingnothings","description":"Website of a fictional hosting company, built with vanilla HTML5, CSS3 and JavaScript (with Webpack workflow and GitHub Actions usage).","archived":false,"fork":false,"pushed_at":"2024-10-02T21:49:43.000Z","size":5148,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-11T17:08:11.491Z","etag":null,"topics":["css3","desktop","flexbox","github-actions","html5","javascript","mobile","multi-page-site","webpack"],"latest_commit_sha":null,"homepage":"https://nothingnothings.github.io/HostCorpsWebpackVersion/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nothingnothings.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-04T19:22:54.000Z","updated_at":"2024-10-02T21:49:47.000Z","dependencies_parsed_at":"2024-11-05T10:35:07.296Z","dependency_job_id":null,"html_url":"https://github.com/nothingnothings/HostCorpsWebpackVersion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nothingnothings/HostCorpsWebpackVersion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FHostCorpsWebpackVersion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FHostCorpsWebpackVersion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FHostCorpsWebpackVersion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FHostCorpsWebpackVersion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nothingnothings","download_url":"https://codeload.github.com/nothingnothings/HostCorpsWebpackVersion/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FHostCorpsWebpackVersion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32726266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","desktop","flexbox","github-actions","html5","javascript","mobile","multi-page-site","webpack"],"created_at":"2024-11-05T10:19:01.374Z","updated_at":"2026-05-07T06:36:15.644Z","avatar_url":"https://github.com/nothingnothings.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![logo](/src/assets/images/HostCorps.png)\n\n# HostCorps\n\nWebsite of a fictional hosting provider company. Built with HTML5, CSS3 and vanilla JavaScript.\n\nThis version of the app made use of a Webpack workflow to bundle its content. The webApp can be acessed [here](https://nothingnothings.github.io/HostCorpsWebpackVersion).\n\n![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/nothingnothings/HostCorpsWebpackVersion/master?style=flat-square)\n[![en](https://img.shields.io/badge/lang-en-red.svg?style=flat-square)](https://github.com/nothingnothings/HostCorpsWebpackVersion)\n[![pt-br](https://img.shields.io/badge/lang-pt--br-green.svg?style=flat-square)](https://github.com/nothingnothings/HostCorpsWebpackVersion/blob/master/README.pt-br.md)\n\n## Technologies\n\nSome of the Languages, Libraries and packages employed:\n\n- Node Package Manager (for Webpack and webpack-related packages)\n- HTML5\n- CSS3 (animations, Flexbox, media queries)\n- Vanilla JavaScript (no JavaScript frameworks; usage of `var`, normal functions and common eventListeners)\n- Form validation logic (basic input validation, logic for adding and removing \"focus\" and \"invalid\" styles, etc)\n- Responsive mobile design (sidebar, Flexbox, media queries)\n\n## Project Directory Structure\n\nThe development environment (with the use of a Webpack workflow), as seen in the `master` branch:\n\n```\n.\n│\n├── assets\\\n│   │\n│   ├── css\\\n│   │   ├── common.css\n│   │   ├── customers.css\n│   │   ├── index.css\n│   │   ├── packages.css\n│   │   └── start-hosting.css\n│   │\n│   ├── fonts\\\n│   │   ├── UniSansHeavyCAPS.woff\n│   │   ├── UniSansHeavyCAPS.woff2\n│   │   ├── anonymousPro-Bold.ttf\n│   │   └── anonymousPro-Regular.ttf\n│   │\n│   └── images\\\n│       ├── HostCorps.png\n│       ├── HostCorps.svg\n│       ├── customer-1.jpg\n│       ├── customer-2.jpg\n│       ├── customer-3.jpg\n│       ├── freedom.jpg\n│       └── plan.jpg\n│\n│\n├── js\\\n│   ├── index.js\n│   └── start-hosting.js\n│\n├── customers.html\n├── index.html\n├── packages.html\n└── start-hosting.html\n```\n\nThe Webpack workflow's production output, as shown in the `gh-pages` branch (tasked with the deployment of the app):\n\n```\n.\n│\n├── assets\\\n│   │\n│   ├── fonts\\\n│   │   ├── UniSansHeavyCAPS.woff\n│   │   ├── UniSansHeavyCAPS.woff2\n│   │   ├── anonymousPro-Bold.ttf\n│   │   └── anonymousPro-Regular.ttf\n│   │\n│   └── images\\\n│       ├── HostCorps.png\n│       ├── customer-1.jpg\n│       ├── customer-2.jpg\n│       ├── customer-3.jpg\n│       ├── freedom.jpg\n│       └── plan.jpg\n│\n│\n├── bundle.js\n├── customers.html\n├── index.html\n├── packages.html\n└── start-hosting.html\n```\n\n## Webpack and package.json Configuration Files\n\nThe webpack.config.js file used in the project:\n\n```\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nconst { CleanWebpackPlugin } = require('clean-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  entry: ['./src/js/index.js', './src/js/start-hosting.js'],\n\n  mode: 'production',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n    assetModuleFilename: (pathData) =\u003e {\n      const filePath = path\n        .dirname(pathData.filename)\n        .split('/')\n        .slice(1)\n        .join('/');\n      return `${filePath}/[name][ext]`;\n    },\n  },\n  resolve: {\n    extensions: ['.js'],\n  },\n\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: ['style-loader', 'css-loader'],\n      },\n      {\n        test: /\\.(woff|woff2|ttf|eot)$/,\n        type: 'asset/resource',\n      },\n\n      {\n        test: /\\.(?:ico|gif|png|jpg|jpeg)$/i,\n        type: 'asset/resource',\n      },\n    ],\n  },\n\n  plugins: [\n    new HtmlWebpackPlugin({\n      filename: 'index.html',\n      template: 'src/index.html',\n    }),\n    new HtmlWebpackPlugin({\n      filename: 'customers.html',\n      template: 'src/customers.html',\n    }),\n    new HtmlWebpackPlugin({\n      filename: 'packages.html',\n      template: 'src/packages.html',\n    }),\n    new HtmlWebpackPlugin({\n      filename: 'start-hosting.html',\n      template: 'src/start-hosting.html',\n    }),\n\n    new CleanWebpackPlugin(),\n  ],\n\n  performance: {\n    hints: false,\n  },\n};\n\n```\n\n## Setup\n\nTo use this project, clone it using Git:\n\n1. Run `git clone` to clone the project into your local Git repository\n2. Serve the files with the help of a hosting provider (frontend-only)\n\n## Features\n\n- Multiple pages (different HTML pages, normal page serving)\n- Form validation logic in the \"Start Hosting\" page\n- Responsive design (mobile and desktop) created with Flexbox and media queries\n- Addition/removal of CSS classes (\"slide-in\" animation) implemented with JavaScript\n- Custom favicon, compatible with multiple devices\n\n## Inspiration\n\nInspired by the \"JavaScript - The Complete Guide\" course by Maximilian Schwarzmüller.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fhostcorpswebpackversion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnothingnothings%2Fhostcorpswebpackversion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fhostcorpswebpackversion/lists"}