/coffee-page

First project for portfolio

Primary LanguageCSS

Coffee Website Project

This website was made mobile-responsive first, as a lot of network traffic these days are through smartphones. Using modern practices, this project taught me a great deal on how to incorporate modern tools to make a fully functioning site following best practices. Clicking "Get in touch" button opens modal with social networking links.

  1. Used git and made a branch for each individual section and made sure to update constantly locally and remotely to make sure if anything happened, I need not worry.

  2. Used Node.js for writing JS backend and used NPM to install gulp to automate tasks. Also wrapped everything neatly in a package.json file, so all I need to do if something happened and I lost my modules was to run npm install.

  3. Used gulp to automate any changes to my HTML, CSS, and my JS files, that would be compiled to a different folder. As for CSS, helped me use PostCSS to help write clean CSS, with the help of nesting CSS, use variables, and mixins for my media queries (mobile and desktop responsive).

  4. Followed best JS practices using Object Oriented Programming (OOP) and using webpack to make sure all my js files were organized. Then used Babel to make sure ES6 was translated to ES5, as ES6 is still fairly new meaning there are still a lot of computers that cannot translate/use ES6.

  5. Made sure all images and files were compressed to the smallest files with lazyloading from NPM to make sure mobile users did not have to download/use unnecessary data.

https://lawrenceyoon.github.io/coffee-page/