A website project from the Udemy course - Git a Web Developer Job: Mastering the Modern Workflow by Brad Schiff
To see the website in action, please go to https://lucasweng.github.io/travel-site/
or
To run that demo on your own computer, please follow the instructions in Getting Started
-
Mobile-first performance:
-
Lazy loading images and icon sprites for faster page load time
-
Responsive images for resolution switching to save bandwidth
-
-
Responsive web design:
- Responsive images for different cropping situations
-
Support for legacy browsers:
-
Use picturefill as a responsive image polyfill
-
Test browser support for SVGs and flexbox with gulp-modernizr
-
Convert SVGs to PNGs with gulp-svg2png
-
-
Reveal page contents on scroll
-
Smooth page scroll to an anchor on the same page
git clone https://github.com/lucasweng/travel-site.gitnpm installor
yarn installgulp watchIt will open a new tab in your browser and run the website. Should it not open, visit http://localhost:3000
The previous command will run Browsersync, and you will find the following in the terminal:
[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.0.10:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.10:3001
-------------------------------------
[Browsersync] Serving files from: appYou can view the website in synchronised action across all your devices with the External URL.
Some comments in the source code are course notes and therefore might not seem necessary from a developer's point of view.