A practice project to teach myself responsive web design with Vue. The concept here is a tourism page for a fictional region inspired by Patagonia and Iceland, using this project as a springboard.
Suggestions on how to improve this are welcome!
This uses pnpm instead of npm. However, most of the commands should work roughly the same.
pnpm installinstalls dependencies. Unlike npm, it adds dependencies into a global store instead of a per-project node_modules folder.pnpm run devruns a development build.pnpm run buildruns a production build. This is also used during the automated deployment.pnpm run previewdeploys a local preview of the production build.pnpm updateupdates all outdated dependencies.
The build includes an imagemin task.
The build uses a GitHub Action (view build file) to build the app and then deploys the contents of the dist/ folder as a static page.
I manually run this through the WAVE extension for Firefox. It hasn't reported anything yet, but improvements are welcome (especially ways to automate this).
The targeted screen widths for this are:
- 320 pixels
- 480
- 600
- 800
- 1080
- 1920 pixels (largest).
Some pages use different line lengths.
All images are from pexels.com, except for the logo, which was generated using Canva.
The navbar is derived from this W3Schools example, with some modifications to fix menus hanging open.