• Home
  • Creating a real website tutorial

Creating a real website tutorial

Now that we’re going to start work on our final projects building a real website (meaning not using Codepen or the exercise tool) we need to learn the basics of how we create websites within our computer.

We have two options.

  1. A basic website without any fancy reloading or LESS (CSS) language
  2. AAn advanced website that we can quickly preview without reloading the browser and using LESS for prettier CSS

Basic Website

First create a new folder on your computer, ideally inside a folder that will contain all your web projects. A good name can be “Development” or “Projects”

Creating folders on a Mac

On a Mac you can navigate to your user folder from the left sidebar like this:

Then up in the menu select File -> New Folder

Name it one of the two names Development/Projects. Open it, then create your new project folder. For example “First Sample Project”.

Creating folders on Windows

On Windows you can navigate to your Documents folder from the left sidebar like this:

Then right click and go to New -> Folder

Name it one of the two names Development/Projects. Open it, then create your new project folder. For example “First Sample Project”.

Initiating your basic website

You can download this basic Zip as a boilerplate to create your simple website or follow the steps. To create a basic website we’ll need just two files.

  1. An HTML file that holds our website named index.html (as this is the default file the browser looks for in a folder)
  2. A CSS file named style.css which will hold our styles

Now you can add your HTML inside the index.html file and your styles in the style.css. To preview your website you can either open it from WebStorm by hovering over the index.html window and clicking on the Chrome icon like this:

Or navigating to Chrome and going to File -> Open File

Then navigating to your folder and selecting index.html

Initiating your advanced website

If you want to use GitHub (recommended) please go to the next section for instructions. Otherwise, for a simpler initiation download the following boilerplate and extract it into your Development/Projects folder. Then rename the folder from advanced to the name of your project like “Test Project 1”.

Running advanced boilerplate

Now open your new project folder with WebStorm. Click on the terminal panel on the bottom of WebStorm. Inside it type the following:

npm install

After that’s complete type

gulp

Your browser should automatically open our website. Now you can make changes to your HTML inside index.html or your styles in css/style.less and it will automatically be refreshed in the browser.

Advanced initiation with GitHub

To start with our Advanced boilerplate using GitHub and creating your own new repository follow these steps:

  1. Go to https://github.com/agrublev/ucsb-web-boilerplate 
  2. Click the Fork button on the top right

  3. Then inside your own GitHub repository which should look like https://github.com/YOUR_USER_NAME/ucsb-web-boilerplate get the Clone url from the green button

  4. Now go to WebStorm and select the menu VCS -> Checkout from Version Control -> GitHub

  5. Enter the URL you copied with your username in it!
  6. Select a parent directory like Development/Projects and then change Directory Name to something like MyProject1

You should now have the advanced project ready. To initiate look for the section above named “Running advanced boilerplate”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.