thecodermehedi/webdev-starter

🚀 WebDev Starter : Unleash creativity with an organized folder structure, best practices, and a touch of magic for frontend developers.

Table of Contents

• Introduction
• Features
• Folder Structure
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Development Mode
  • Build Process
• License
• Contributing
• Acknowledgements

🌟 Introduction

🚀 WebDev Starter : A structured boilerplate project for frontend developers ⚡️🎨. Unleash your creativity with an organized folder structure and best practices, igniting web development projects like never before! 💪💻 Start your journey now and witness the magic unfold. 🌟🔥

✨ Features

• 🚀 Easy setup and 🔧 configuration
• 📁 Well-organized folder structure for efficient 💼 project management
• 🎨 Modular SCSS architecture using 🧩 BEM methodology
• 🤖 Automated build process with 🌊 Gulp
• 🔍 Minification and concatenation of CSS and JavaScript files
• 🖼️ Image optimization
• 🔨 HTML minification
• 🌐 Responsive design-ready
• ♻️ Live reload for development
• 📄 Suitable for single-page and 📑 multi-page websites
• 🔀 Version control (Git) and hosting 🐙 (GitHub) compatibility
• 📖 Comprehensive documentation for easy reference and usage
• 📜 Licensed under the GPL 3.0 for open-source collaboration

📂 Folder Structure

Here is the folder structure of the project:

webdev-starter           (Project Name)
 ┣━ dist                 (Production files)
 ┃ ┣━ assets             (Static assets)
 ┃ ┃ ┣━ favicons         (Favicon files)
 ┃ ┃ ┣━ fonts            (Fonts directory)
 ┃ ┃ ┗━ img              (Optimized images)
 ┃ ┣━ css                (Minified CSS files)
 ┃ ┣━ js                 (Minified JS files)
 ┃ ┣━ pages              (Minified HTML pages)
 ┃ ┃ ┣━ about.min.html   (Minified about page)
 ┃ ┃ ┗━ contact.min.html (Minified contact page)
 ┃ ┗━ index.html         (Minified index.html)
 ┣━ src                  (Source files)
 ┃ ┣━ assets             (Static assets)
 ┃ ┃ ┣━ favicons         (Favicon files)
 ┃ ┃ ┣━ fonts            (Fonts directory)
 ┃ ┃ ┗━ img              (Images directory)
 ┃ ┣━ js                 (JavaScript files)
 ┃ ┃ ┗━ sctipt.js        (Custom JavaScript code)
 ┃ ┣━ pages              (HTML pages)
 ┃ ┃ ┣━ about.html       (About page source)
 ┃ ┃ ┗━ contact.html     (Contact page source)
 ┃ ┣━ scss               (SCSS files)
 ┃ ┃ ┣━ components       (SCSS components)
 ┃ ┃ ┣━ global           (Global SCSS styles)
 ┃ ┃ ┣━ layout           (SCSS layout styles)
 ┃ ┃ ┣━ util             (Utility SCSS styles)
 ┃ ┃ ┗━ style.scss       (Main SCSS entry point)
 ┃ ┗━ index.html         (Main HTML file)
 ┣━ .gitattributes       (Git attributes file)
 ┣━ .gitignore           (Git ignore file)
 ┣━ gulpfile.js          (Gulp configuration file)
 ┣━ LICENSE              (License information)
 ┣━ package.json         (Package configuration file)
 ┗━ README.md            (Project documentation)

🚀 Getting Started

⚙️ Prerequisites

Before getting started with the project, make sure you have the following prerequisites installed on your system:

In this documentation we are using Windows Operating System :

Open Terminal or Powershell As Admin

This command will install the latest available versions of NodeJS and Git using Winget.

winget install --id OpenJS.NodeJS Git.Git

Winget ?

Winget comes with Windows by deafult, to check type winget -v to get installed version.

If not type this to install:

Set-ExecutionPolicy RemoteSigned -Scope Process -Force; iex "& { $(irm https://aka.ms/winget-cli) }"; Set-ExecutionPolicy <original_execution_policy> -Scope Process -Force

🛠️ Installation

Clone or Download this repository :

git clone https://github.com/devbytemehedi/webdev-starter.git

Navigate to the project directory :

cd webdev-starter

Install the required dependencies :

npm install

📝 Usage

🚧 Development Mode

During development, you can run the project in development mode with live reloading Start the development server :

npm run dev

This will compile the SCSS to CSS, concatenate JavaScript files, optimize images, and launch a local development server. Any changes you make to the source files will automatically trigger a reload in the browser.

🏗️ Build Process

The project uses Gulp for automation. The build process includes:

• Compiling SCSS files to CSS and minifying them.
• Concatenating and minifying JavaScript files.
• Optimizing images for production.
• Minifying HTML files.
• Copying static assets to the dist directory.

To build the project for production, use the following command :

npm run build

This will compile and minify the SCSS and JavaScript files, optimize images, minify HTML files, and copy static assets to the dist directory. The final production-ready files will be available in the dist folder.

📄 License

This project is licensed under the GPL 3.0 License. See the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Feel free to fork this repository and submit pull requests to suggest improvements or add new features.

🙏 Acknowledgements

• Gulp - A popular task runner for web development.
• Sass - A CSS preprocessor that enhances the styling workflow.
• BEM - A methodology for writing maintainable and reusable CSS.
• Node.js - A JavaScript runtime environment for building server-side and networking applications.