This is a simple starter template (SST for short) I've made for you to have fun with developing with JavaScript as you go through the course.
In this template, when you save your HTML, CSS or JavaScript files, your site will refresh automatically and you'll see the update changes without having to hit reload on your browser, which speeds up development time tremendously!
This starter template is not built for production. If you'd like to see a template that's solidly built and ready for production, consider getting the complete package in my workflow book – Automating Your Workflow. If you're totally new to the command line, I suggest reading through the first three chapters of Automating Your Workflow (it's free) before using this SST. Just head over to this page to grab it.
Here's the table of contents for this README file:
You need to have Node installed onto your system before you use this. If you don't have it yet, you can grab it over on Node's website (get the current version).
Next, downloaded this template onto your computer.
Next, navigate to the template in your command line and run npm install
. You can also run yarn install
(which is a faster package manager for Node) if you use know how to use yarn.
The SST is divided into two main folders:
src
dev
src
is where you would place all your source files. This includes all your code, images, fonts and everything else. Most of the time, this is the only folder you're interested in.
These files will then be treated and copied over to dev
, where you'll be able to see the files that are served up.
To begin developing go to your command line and enter gulp
:
gulp
You should see a log in your command line that looks like this:
[13:40:51] Starting 'broswerSync'...
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://10.0.1.5:3000
----------------------------------
UI: http://localhost:3001
UI External: http://10.0.1.5:3001
----------------------------------
From this point, navigate to localhost:3000 in your browser of choice (chrome, preferably) and you'll see the site.
Create your HTML files in the src
folder. It should end with the .html
extension, like all HTML files do. Copy the ready-made index.html
if you need to create a new one.
Sass files are kept in the src/scss
directory. They are pre-configured to import libraries from the node_modules
folder. You can use the @import
statement to import these modules without having to refer manually refer to the node_modules
folder.
// Importing typi.
// No need to add path to the `node_modules` folder
@import 'typi';
JavaScript files are kept in the src/js
folder. They are automatically ran through Webpack – an asset bundler. The configurations for Webpack have already been done for you to.
One very important thing to note – even though Webpack automatically updates the JavaScript on your site, it cannot refresh your event handlers automatically. If you need to update your event handlers, you'll still want to reload your website! More information here if you're interested to read up on why (hot module replacement with Webpack is complicated, so let's not go there for now. I don't fully understand it myself. This sucks, but 🤷♂️).
All images are to be placed in the src/images
directory.
This SST is here to help make your life better! Use it and have fun! If you love this SST and want to improve your development and production processes, consider getting the complete version by buying Automate Your Workflow!
- Cross-browser testing (particularly menu)
- Add responsive styles to modal
- Implement build process for
/dist
for production