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).