# 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.

Template files

# ▶️️️️️ 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:

Click on "Extensions" icon on the left sidebar and search for "Live server"
Select "Live server" in the search results, click "Install" and "Reload required" afterwards.

# ▶️️️️️ Step 4.

Launch web-server. "Live server" extension provides live reload and CSS injection features which will ease your workflow.

Click "Go Live" at the right bottom corner.
Your browser will open "http://localhost" or "http://127.0.0.1" and you should see the template index page.

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'll get prompted to enter a URL to open
Use the URL provided by your web-server
Feel free to drag and drop working panels as you need

👍 You're all set!