This project is only made to prove my skills and workflow in front-end web development. It is not a real open source project. And the assets that I've used in this project are not mine.
-
Browser Sync - For web browser live refresh development
-
VueJS - For simple javascript UI interaction
-
Animate CSS - My choice of CSS animation library
-
WOWjs - Reveal Animations When You Scroll. Very Animate.css Friend
-
Babel JS - For older browser JS compatibility
-
Pug Templating - The HTML templating of my choice
-
SASS - Professional grade CSS extension language
-
GulpJS - The simple task runner
-
Gulp Zip - To command to zip my source code
-
PostCSS - A tool for transforming CSS with JS plugins
-
Autoprefixier - CSS prefix for other browser
-
CSSNano - Minified the CSS faster
-
- Installation -
$ npm install - Boot up local development server -
$ npm start - If Gulp install globally -
$ gulp serve
-
Making a Folder & File Structure
- First, I make a folder & file structure, so the development will be easy and maintainable.
-
Installing and Configuring Development Environment
- I install all necessary Gulp task packages such as Babel, Pug, Sass etc... And after that I configure Gulp browsers-sync for real time browser development.
-
Developing using Pug and SASS
- I use Pug and SASS for better html and CSS management. And to help maintain code easily.
-
Mobile First Design
- I create layout using mobile first approach for layout responsiveness.
-
Using Vuejs for UI Interaction
- I use Vuejs to make UI interaction more simple and easily extensible.
-
Animating using Wow and AnimateCSS
- Wow and AnimateCSS simplify my UI animation and at the same it can easily use for my future purpose.
-
Committing in Git with understandable message
- I commit my files to Git with understandable message so I can easily maintain my source code.
I believe this source code can still be improve by team effort
or by refactoring.
"We all need people who will give us feedback. That's how we improve." - Bill Gates