https://github.com/nothingnothings/hostcorpswebpackversion
Website of a fictional hosting company, built with vanilla HTML5, CSS3 and JavaScript (with Webpack workflow and GitHub Actions usage).
https://github.com/nothingnothings/hostcorpswebpackversion
css3 desktop flexbox github-actions html5 javascript mobile multi-page-site webpack
Last synced: 2 months ago
JSON representation
Website of a fictional hosting company, built with vanilla HTML5, CSS3 and JavaScript (with Webpack workflow and GitHub Actions usage).
- Host: GitHub
- URL: https://github.com/nothingnothings/hostcorpswebpackversion
- Owner: nothingnothings
- License: mit
- Created: 2022-09-04T19:22:54.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-02T21:49:43.000Z (almost 2 years ago)
- Last Synced: 2026-01-11T17:08:11.491Z (6 months ago)
- Topics: css3, desktop, flexbox, github-actions, html5, javascript, mobile, multi-page-site, webpack
- Language: HTML
- Homepage: https://nothingnothings.github.io/HostCorpsWebpackVersion/
- Size: 4.91 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HostCorps
Website of a fictional hosting provider company. Built with HTML5, CSS3 and vanilla JavaScript.
This 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).
[](https://github.com/nothingnothings/HostCorpsWebpackVersion)
[](https://github.com/nothingnothings/HostCorpsWebpackVersion/blob/master/README.pt-br.md)
## Technologies
Some of the Languages, Libraries and packages employed:
- Node Package Manager (for Webpack and webpack-related packages)
- HTML5
- CSS3 (animations, Flexbox, media queries)
- Vanilla JavaScript (no JavaScript frameworks; usage of `var`, normal functions and common eventListeners)
- Form validation logic (basic input validation, logic for adding and removing "focus" and "invalid" styles, etc)
- Responsive mobile design (sidebar, Flexbox, media queries)
## Project Directory Structure
The development environment (with the use of a Webpack workflow), as seen in the `master` branch:
```
.
│
├── assets\
│ │
│ ├── css\
│ │ ├── common.css
│ │ ├── customers.css
│ │ ├── index.css
│ │ ├── packages.css
│ │ └── start-hosting.css
│ │
│ ├── fonts\
│ │ ├── UniSansHeavyCAPS.woff
│ │ ├── UniSansHeavyCAPS.woff2
│ │ ├── anonymousPro-Bold.ttf
│ │ └── anonymousPro-Regular.ttf
│ │
│ └── images\
│ ├── HostCorps.png
│ ├── HostCorps.svg
│ ├── customer-1.jpg
│ ├── customer-2.jpg
│ ├── customer-3.jpg
│ ├── freedom.jpg
│ └── plan.jpg
│
│
├── js\
│ ├── index.js
│ └── start-hosting.js
│
├── customers.html
├── index.html
├── packages.html
└── start-hosting.html
```
The Webpack workflow's production output, as shown in the `gh-pages` branch (tasked with the deployment of the app):
```
.
│
├── assets\
│ │
│ ├── fonts\
│ │ ├── UniSansHeavyCAPS.woff
│ │ ├── UniSansHeavyCAPS.woff2
│ │ ├── anonymousPro-Bold.ttf
│ │ └── anonymousPro-Regular.ttf
│ │
│ └── images\
│ ├── HostCorps.png
│ ├── customer-1.jpg
│ ├── customer-2.jpg
│ ├── customer-3.jpg
│ ├── freedom.jpg
│ └── plan.jpg
│
│
├── bundle.js
├── customers.html
├── index.html
├── packages.html
└── start-hosting.html
```
## Webpack and package.json Configuration Files
The webpack.config.js file used in the project:
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: ['./src/js/index.js', './src/js/start-hosting.js'],
mode: 'production',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: (pathData) => {
const filePath = path
.dirname(pathData.filename)
.split('/')
.slice(1)
.join('/');
return `${filePath}/[name][ext]`;
},
},
resolve: {
extensions: ['.js'],
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff|woff2|ttf|eot)$/,
type: 'asset/resource',
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
}),
new HtmlWebpackPlugin({
filename: 'customers.html',
template: 'src/customers.html',
}),
new HtmlWebpackPlugin({
filename: 'packages.html',
template: 'src/packages.html',
}),
new HtmlWebpackPlugin({
filename: 'start-hosting.html',
template: 'src/start-hosting.html',
}),
new CleanWebpackPlugin(),
],
performance: {
hints: false,
},
};
```
## Setup
To use this project, clone it using Git:
1. Run `git clone` to clone the project into your local Git repository
2. Serve the files with the help of a hosting provider (frontend-only)
## Features
- Multiple pages (different HTML pages, normal page serving)
- Form validation logic in the "Start Hosting" page
- Responsive design (mobile and desktop) created with Flexbox and media queries
- Addition/removal of CSS classes ("slide-in" animation) implemented with JavaScript
- Custom favicon, compatible with multiple devices
## Inspiration
Inspired by the "JavaScript - The Complete Guide" course by Maximilian Schwarzmüller.