CampingApp

Sample website showcasing skillset in Frontent Development. See the Web App here

Description

The web application uses HTML5 syntax along with CSS Grid/Flexbox for layouts. I personally like to use SASS as a preprocessor for productivty and postcss/autoprefixer for broswer compatibility. I implement Mobile first design and use responsive design throughout the development process. You can also see my web development setup which includes Webpack 4 with seperate config files for production and development. A link to my Starter Project Template can be found here.

Folder Structure

There are 3 main folders: dist folder contains production ready files, src folder contains the files I used in development, and config containes webpack configuration files. In order to use github pages I have copied all dist files into root directory as well. Feel free to browse the src folder to see non-minified code.

• config
  • webpack.dev.js
  • webpack.prod.js
• dist
  • assets
    • images
    • videos
  • css
  • js
  • index.html
• src
  • assets
    • fonts
    • images
    • SVG
    • vendor
    • videos
  • js
  • scss
  • index.html
• assets
• css
• js
• index.html

Tools

NPM, Webpack 4