Fully responsive front-end demo website for a Travel Agency.
-
HTML: responsive images with data-srcset attributes
-
BEM naming conventions
-
CSS: column layout with floats and flexbox
-
JS/JQUERY:
- OOP class based modules,
- sticky header on scroll,
- animated hamburger menu,
- full screen modal,
- reveal elements on scroll (Waypoints),
- lazy loading images (LazySizes),
- smooth scrolling to page section (Waypoints and JQUERY smooth scroll).
-
Icon management: Gulp, Gulp-sprites
-
SASS: mixins for media queries, color variables
-
SASS compilation with auto-prefixing and sourcemaps
-
JS bundling with webpack + babel loader
-
BrowserSync
-
Build task:
- Optimize images with Imagemin,
- Modernizr feature detection,
- Static asset revisioning by appending content hash to filenames,
- Update assets path in html with replace-in-file
Automated Build and Cloud functions with AWS/Netlify. Axios for HTTP requests.
The design is based upon the course by Brad Schiff: Git a Web Developer Job: Mastering the Modern Workflow.
The design and site features are as featured in the course but the folder structure is different. Also, the Gulp task setup is fully customized for Gulp version 4 where the original was based on version 3.
Similarly, the original course project relies heavily on gulp-postCSS where this project uses Gulp-Sass as it requires less dependencies.