{"id":182,"date":"2018-04-30T18:29:11","date_gmt":"2018-04-30T18:29:11","guid":{"rendered":"https:\/\/ucsbwebdev.fzilla.com\/?p=182"},"modified":"2018-04-30T19:23:11","modified_gmt":"2018-04-30T19:23:11","slug":"creating-a-real-website-tutorial","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=182","title":{"rendered":"Creating a real website tutorial"},"content":{"rendered":"

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

We have two options.<\/p>\n

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

    Basic Website<\/h1>\n

    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”<\/p>\n

    Creating folders on a Mac<\/h2>\n

    On a\u00a0Mac you can navigate to your user folder from the left sidebar like this:<\/p>\n

    \"\"<\/p>\n

    Then up in the menu select File -> New Folder<\/strong><\/p>\n

    \"\"<\/p>\n

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

    Creating folders on Windows<\/h2>\n

    On Windows you can navigate to your Documents folder from the left sidebar like this:<\/p>\n

    \"\"<\/p>\n

    Then right click and go to New -> Folder<\/strong><\/p>\n

    \"\"<\/p>\n

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

    Initiating your basic website<\/h2>\n

    You can download\u00a0this basic Zip<\/a> as a boilerplate to create your simple website or follow the steps. To create a basic website we’ll need just two files.<\/p>\n

      \n
    1. An HTML file that holds our website named\u00a0index.html\u00a0<\/strong>(as this is the default file the browser looks for in a folder)<\/li>\n
    2. A CSS file named\u00a0style.css\u00a0<\/strong>which will hold our styles<\/li>\n<\/ol>\n

      Now you can add your HTML inside the index.html<\/strong> file and your styles in the\u00a0style.css<\/strong>. To preview your website you can either open it from WebStorm by hovering over the index.html\u00a0<\/strong>window and clicking on the Chrome icon like this:<\/p>\n

      \"\"<\/p>\n

      Or navigating to Chrome and going to File -> Open File<\/strong><\/p>\n

      \"\"<\/p>\n

      Then navigating to your folder and selecting index.html<\/strong><\/p>\n

      Initiating your advanced website<\/h2>\n

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

      Running advanced boilerplate<\/h3>\n

      Now open your new project folder with WebStorm. Click on the terminal\u00a0<\/strong>panel on the bottom of WebStorm. Inside it type the following:<\/p>\n

      npm install<\/pre>\n
      After that’s complete type<\/p>\n
      gulp<\/pre>\n
      Your browser should automatically open our website. Now you can make changes to your HTML inside\u00a0index.html\u00a0<\/strong>or your styles in\u00a0css\/style.less\u00a0<\/strong>and it will automatically be refreshed in the browser.<\/p>\n
      Advanced initiation with GitHub<\/h2>\n
      To start with our Advanced\u00a0boilerplate using GitHub and creating your own new repository follow these steps:<\/p>\n
        \n
      1. Go to\u00a0https:\/\/github.com\/agrublev\/ucsb-web-boilerplate\u00a0<\/a><\/li>\n
      2. Click the Fork button on the top right\n
        \"\"<\/p>\n<\/li>\n
      3. Then inside your own GitHub repository which should look like https:\/\/github.com\/YOUR_USER_NAME\/ucsb-web-boilerplate get the Clone url\u00a0from the green button\n
        \"\"<\/p>\n<\/li>\n
      4. Now go to WebStorm and select the menu\u00a0VCS -> Checkout from Version Control -> GitHub
        \n<\/strong><\/strong><\/p>\n
        \"\"<\/p>\n<\/li>\n
      5. Enter the URL you copied with your username in it!<\/li>\n
      6. Select a parent directory like Development\/Projects and then change Directory Name to something like MyProject1<\/li>\n<\/ol>\n
        You should now have the advanced project ready. To initiate look for the section above named\u00a0“Running advanced boilerplate”<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
        Now that we’re going to start work on our final projects building a real website (meaning not using Codepen\u00a0or the exercise tool) we need to learn the basics of how we create websites within our computer. We have two options. A basic website without any fancy reloading or LESS (CSS) language AAn advanced website that […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-182","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=182"}],"version-history":[{"count":6,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/182\/revisions"}],"predecessor-version":[{"id":200,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/182\/revisions\/200"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}