Looking at my current workflow, I honestly feel for those beginner developers. Gone are the days of a simple stylesheet you write yourself based on the references over at w3schools and a messy javascript file that smashed the DOM apart.

Anyway, here is current workflow

Software:

• Terminal (comes with your mac)
• MAMP (server environment)
• Sublime 3 (text-editor)

Workflow:

• Git using Github
• Ruby Gems (enviroment)
• Node.js (enviroment)
• Gulp.js (node.js plugin)
• Gulp Minify CSS (gulp plugin)
• Gulp AutoPrefixer (gulp plugin)
• Gulp-uglify (gulp plugin)
• Gulp SASS (gulp plugin)
• Live Reload (Chrome extension)
• Laravel 4.2 (PHP framework for “Model View Control” based builds)
• SASS (SCSS Language)
• Bootstrap SASS (Responsive framework for CSS)
• jQuery (framework for Javascript)

Javascript plugins:

• iCheck.js (javascript plugin)
• BootstrapValidation.js (javascript plugin)
• Twitter Typeahead.js (javascript plugin)
• Hogan.js (javascript plugin)
• Modernizr.js (javascript plugin)

Third parties:

• Iconmoon (.svg to icons spirtes)
• Typekit (Font sources)
• The Noun Project (.svg icons)

Makes me truly wonder how it got to this? While the above toolkit can produce a lean site, even then it’s still messy. For anyone who is starting out. Welcome to the world of the modern websites, sometimes I still even think I’m just a beginner — Trust me when I say, you don’t want to see what the heavyweight sites are using.