The code in this repository is based on Traversy Media's video tutorial on building a Responsive Portfolio Website. The aim of the tutorial is to build reusable CSS components with Sass that can be used throughout the website. Note that I use typescript here instead of javascript. However, the javascript is a minimal part of this tutorial as you will see in the video.
- Install nodejs.
- Install Visual Studio Code (optional).
- If you open up the code folder in Visual Studio Code you may be prompted to install the recommended extensions if you don't already have them installed. Go ahead and install these if you'ld like. They are
Bracket Pair Colorizer 2
,Live Server
andPrettier
. All these extensions are optional. The recommended extensions can be found in theextensions.json
file in the.vscode
directory should you wish to edit these. Likewise in the same directory you can find thesettings.json
file should you wish to edit the recommended settings. - Run
npm install
to install the dependencies listed in thepackage.json
file. - Run
npm run tsc
in a terminal to perform live compilation of typescript to javascript. See thetsconfig.json
file if you would live to change any of the typescript settings. - Run
npm run sass
in a separate terminal to perform live compilation of SCSS to CSS. - Open
dist/index.html
, right click on the text editor area and selectOpen With Live Server
(or run your preferred development server) to launch the application in your default web browser.
If you wish to deploy the website to Github pages then:
- Replace the
github-username
with your actual github username in thehomepage
value in thepackage.json
file. - Run
npm run deploy
from a terminal. - Visit the URL in your browser to see the deployed website.