Udemy Project: Travel Site

This is a hands-on project from the Udemy course - Git a Web Developer Job: Mastering the Modern Workflow by Brad Schiff.

Demo

You can see a complete working example here. Or you can run the demo on your local machine, please follow the instructions in Getting Started.

Features

• Responsive web design (RWD): mobile-first approach, responsive images (resolution switching / different cropping situations)
• Support for legacy browsers
• Lazy loading images and SVG sprites for faster page loading
• Smooth scrolling to anchor links in header bar
• Revealing contents on scroll
• Classes follow the CSS Architecture with B.E.M rules

Technologies

Frontend

• jquery
• jquery-smooth-scroll
• waypoints
• lazysizes
• picturefill
• normalize.css
• postcss

Utils

• gulp
• webpack
• babel
• browsersync

Check package.json file for more information.

Getting Started

Follow the instructions below to set up the environment and run this project on your local machine.

1. Clone this repository.

# Clone repository
$ git clone https://github.com/Hsins/udemy_Travel-Site.git

2. Install dependencies via NPM or Yarn

# Install dependencies via npm
$ npm install

# Install dependencies via yarn
$ yarn install

3. Install gulp globally, run the server and open a browser to visit http://localhost:3000/.

# Install gulp globally via npm
$ npm install gulp -g

# Install gulp globally via yarn
$ yarn install gulp -g

# Run server
$ gulp watch

4. Build the deploying files (all the files would be put in the docs folder)

# Build with gulp
$ gulp build

# Preview
$ gulp previewDist

More Information

All the notes I took in Markdown (.md) format. You can find them in my Udemy-Notes repository. The note for this course is here.

License

Licensed under the MIT License, Copyright © 2017-present Hsins.