Inspiration: I had been studying bits and pieces about front end developer workflows, but came across too many holes in the process. Then someone told me about this course on Facebook, and I had to check it out. It was on sale at Udemy for $10, and I just couldn't pass it up. Well, it is worth MUCH more than that. I just finished the project today and had to share here.
What it does: It's a mock travel agency website that has buttons that when you press them reveal a "Get In Touch" modal, beautiful fade ins, and equal height columns created with Flexbox. The best part is the workflow I built.
Challenges I ran into: Occasionally, I encountered issues with outdated code due to plugin updates/deprecations. But the fun part was figuring out what the issue was and then figuring out a fix!
Accomplishments that I'm proud of: Instead of doing both global and local installs of npm packages, I only did local installs. Very proud of getting that down by creating my own scripts in my package.json. In addition, I decided to go the gulp-gh-pages route and deploy my dist folder onto a gh-pages branch created via gulp-gh-pages instead of simply pressing a button in my repo's settings to simulate the existence of a gh-pages branch, as was done in the course. I then proceeded to create my own gulp deploy task and customize my build task to adapt to the requirements of gulp-gh-pages. I also discovered discrepencies in code that was due to changes in npm packages. For example, because there was a total revamp of Modernizr with Modernizr 3, testing for feature detection with Modernizr classes in Chrome DevTools. I caught that and found the fixes. Then there was a jQuery issue that caused problems with the waypoints devDependency which I used in conjunction with the jQuery Smooth Scroll plugin for smooth navigation scrolling, because when the course was created, jQuery npm was using jQuery 2.x.x, and the jQuery .load() method was compatible with jQuery .load() method. However, now jQuery npm has jQuery 3.x.x, and that no longer supports .load method(). I recognized the issue, and as a result, he came up with the fix.
What I learned: A LOT in detail about the Front End Development Workflow and specifically how to modularize my code and workflow so it could be re-used in other projects.
What's next for travel-agency-site: It has already been deployed to gh-pages, and I am now getting ready to apply this knowledge to other existing projects in order to improve upon them and streamline them.