https://github.com/solygambas/html-css-travel-site

A travel website to understand BEM architecture, PostCSS and Webpack.
https://github.com/solygambas/html-css-travel-site

bem css3 html5 javascript postcss react webpack

Last synced: about 1 month ago
JSON representation

A travel website to understand BEM architecture, PostCSS and Webpack.

• Host: GitHub
• URL: https://github.com/solygambas/html-css-travel-site
• Owner: solygambas
• Created: 2020-03-30T07:39:42.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T18:35:15.000Z (about 2 years ago)
• Last Synced: 2024-10-27T22:31:26.268Z (3 months ago)
• Topics: bem, css3, html5, javascript, postcss, react, webpack
• Language: HTML
• Homepage: https://clear-view-escapes-demo.netlify.com/
• Size: 4.47 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# Travel site

A travel website to understand BEM architecture, PostCSS and Webpack.

## Demo

[See Demo deployed on Netlify](https://clear-view-escapes-demo.netlify.com)



  

    

  



## 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](https://www.udemy.com/course/git-a-web-developer-job-mastering-the-modern-workflow/) by Brad Schiff (2019).