Developing this Website



As a new user to anything that has to do with generating a website, I was unsure on how anything works. However, as my lecturer stated: "To know how to do something is to refer to what already has been done/created". Thus I referred to below youtube videos mainly for understanding the concept of each word and how to apply each of it to get the end-product that I want.

  • HTML Tutorial - How to Make a Super Simple Website
  • Learn HTML in 12 Minutes
    		•

    For this website, I used "Sublime Text" to create my html and css files. I first downloaded Sublime text and placed it into my Digital Fabrication & Protoyping folder so as to ensure I do not misplace it. I then proceeded to follow the video step-by-step to set the base of my webpage, which is also called the index or homepage. Before starting Sublime, I created the html pages in my Digital Fabrication & Protoyping folder. This is done by creating a txt file and changing the file name to (name of page).html. I did this for all the pages in this website.


    Once I've created all the needed pages, I opened them on Sublime and input the codes accordingly. The codes for formatting is mainly inspired from the above youtube videos. However, as I go through different content, I incorporated different formatting techniques.


    As shown in the picture above, I tested the HTML codes on a website called W3Schools before i put it into Sublime. As beforementioned, I was not experienced so there were countless tests and trials before I started on other pages for the bebsite. Once I got the hang of it, I started to develop the other pages, namely the ones underneath the Navigation panel. To ensure uniform formatting, i copied and pasted the codes into the other pages. I then changed the titles and the content of each page according to the page name and saved the codes. To ensure that I do not lose any of my codes, I copied the codes into txt files in my folder.


    The following shows the example of the code I've input for this current webpage:



    As seen in the above (2nd) picture, the words are colour coded to show the different fucntions. For this module, I will have to update the website frequently so as to not miss out on anything on my website.