# Classic Workflow
In the following guide you'll setup a web-server and you'll be working with .css
, .js
and *.html
files directly which should be fine for beginners.
TIP
If you'd like to take advantage of working with source files (SASS and JS) and use Gulp environment please refer to Developers Workflow
# ▶️️️️️ Step 1.
Install a code editor. I recommend free Visual Studio Code (opens new window) by Microsoft. It's a cross-platform eco-system suitable for both beginner and professional developers.
You are free to use any other text editor or IDE (Integrated Development Environment). But please refrain from using any WYSYWIG editors (e.g. Dreamweaver) since the ones may render the template frontend incorrectly.
# ▶️️️️️ Step 2.
Unzip the downloaded template .zip archive and open the template /📁HTML
folder in the editor. You should see a list of HTML files and several folders in the left sidebar.
# ▶️️️️️ Step 3.
Install a local web-server. There are no specific requirements for a web-server – you can use an external one like MAMP (opens new window) or use a Visual Studio Code extension Live Server (opens new window) as follows:
# ▶️️️️️ Step 4.
Launch web-server. "Live server" extension provides live reload and CSS injection features which will ease your workflow.
Now you can start working with the template. Try to edit files in the left sidebar and see how the changes are reflected in your browser.
# ▶️️️️️ Step 5.
Switch to built-in browser. Visual Studio Code has a built-in browser Simple Browser
so you can better organize your workflow on a single display. To activate it press Ctrl + Shift + P
(win) or Command + Shift + P
(macOS), then type or select "Simple Browser: Show".
👍 You're all set!