Travel site
A travel website to understand BEM architecture, PostCSS and Webpack.
Demo
See Demo deployed on Netlify
Git
- developing new features with git branch and integrating them with git merge and --no-ff option.
CSS
- using BEM architecture to organize CSS blocks.
- identifying design patterns (wrapper, page section, row, columns, etc.).
- applying PostCSS syntax for nested CSS, variables and mixins.
- designing with the mobile-first philosophy in mind.
- handling responsive images with art direction (cropping), srcset and sizes.
- leveraging the power of flexbox.
- building a header, a footer, a testimonial section and a features section.
- creating a primary-nav menu and a sticky header on desktop.
- adding CSS effects with transition and transform properties.
JavaScript
- organizing JavaScript code with classes in an Object-Oriented Programming approach.
- revealing elements on scroll for features and testimonials.
- limiting function calls with lodash throttle and debounce.
- showing active link on scroll in the primary-nav menu.
- building a modal lightbox overlay for getting in touch.
- splitting JavaScript code to load Modal.js only when needed.
- lazy loading images with lazysizes.
- integrating React in an existing project.
Webpack
- enabling webpack-dev-server for hot reload.
- configuring npm run dev and npm run build in webpack.config.js.
- using mini-css-extract-plugin and cssnano to extract, minify and compress CSS.
- using html-webpack-plugin to copy index.html with proprer chunkhash for CSS and JS files.
- using fs-extra to copy assets in docs directory.
Netlify
- deploying on Netlify.
- granting access to a secret area with Axios and Netlify Functions.
- testing requests with Postman.
Based on Git a Web Developer Job: Mastering the Modern Workflow by Brad Schiff (2019).