So this is how it's done - Creating my very first website (from scratch!)

I have always wondered how the internet works and how websites are created since the first day I used it. The first thing I have ever seen online was Yahoo! Messenger and I remember being amazed by how people can talk, without opening their mouths, through a computer real time! Then came Friendster, which basically is the first social networking site online. Fast forward to this day and age, where Facebook, Instagram, Twitter, among others, has essentially became a way of life for most people. Internet has never been this powerful.

Still, I wonder how these websites and apps are made - until I learned about it in school. The secret? Codes.

Since the rudiments of internet, codes have been what was used as building blocks in creating web pages. They are especially formatted and structured to be interpreted by a web browser much like a spoken language. And yes, they are called code languages. The three most common web programming languages are CSS, HTML and Javascript. They are a set of codes that function as complex instructions for your web browser to read, interpret, and follow. They are basically the answer to the burning question I have since then. But how do they work? Working with them to create my very first website for the past 10 weeks or so, I have had the first hand experience of how powerful they can be when used together. Today, we will delve into them one by one.

HTML

The one thing that websites have in common is HTML. It is the foundation of every website, regardless of its simplicity or complexity. Basically, it uses tags for all web contents. The tags identify what purpose a content serve in the web page. To put it simply, the HTML codes are the actual web contents in its raw form - no style, no colour, no flavour - just plain text/image. Through time, HTML versions have been improved to adapt to the latest in multimedia. Just more than a decade ago, the most recent version of HTML (called HTML5) has been released and it has been more powerful than ever.

The World Wide Consortium, the God of the world wide web, introduced semantic elements as HTML5's newest feature. In a nutshell, semantic elements are tags that represent a specific element or content structure in a website. For example, a navigation element is tagged as <nav>, and the website's footer is tagged as <footer>. They basically identify the purpose of each and every element in the website. This is very important, not only for content structure, but also for search engine indexing, which is essential in establishing web presence. If you're running an online business, or you're using your website to advertise your services, consider using semantic elements as it might help push your website up to the Google ladder.

I have used several semantic elements in my website. This include the <nav>, <section>, and <footer> among others. I find them helpful in establishing content hierarchy and structure. I have also used <strong> to highlight certain information. They also make CSS styling easier, as you can select an element easily using a single tag.

CSS

While HTML acts like the canvass of your website, the CSS serves as the embellishment that adds flavour to the overall look and feel of the website. CSS basically adds the style to the web page. As an artist myself, this is my favorite part of the design process. Like painting, the possibilities for styling using CSS is endless.

CSS works in such a way that it directly targets the HTML tag specified. One HTML tag can have multiple CSS codes affecting the way it looks, positioned, or behaves in a webpage. This means that coding CSS can be a hot mess if the developer is not careful. Code maintenance can be an issue especially if we took on a project that has been done a long time ago. Therefore, developers need to know the importance of a clean code, especially for CSS.

According to Cem Eygi's blog entitled 7 Better Tips for Writing Better CSS, coders need to learn to sort out and classify codes to prevent repetition and redundancies. In-line styles should be avoided and short hands should be used to reduce lines of rules. The less cluttered the CSS is, the better.

The key features in my website that used complex CSS elements are the navigation bar, the contact form, and the parallax effect.

JAVASCRIPT

Perhaps the most interesting, but confusing (at least for beginners like me), language of all is the Javascript. But, as intimidating as it sounds, experts say that it is not scary at all and that the basics are very easy to learn.

Interactive and dynamic websites use Javascript. While HTML and CSS is used to add content and style, Javascript is responsible for the web element's behavior. If written correctly, Javascript can breathe life to a web page. There are a number guides available to help coders in writing scripts. Maybe the most used and recommended is the Google Style Code Guide for Javascript. It provides best practices to create clean and stylized scripts. This is helpful particularly for new coders and developers like me.

OTHER LANGUAGES

Bootstrap and JQuery are two of the most common supplementary tools used in building websites. They are both free and easy to use.

Bootstrap offers a wide selection of reusable codes written in HTML, CSS, and Javascript. It saves coders time on writing CSS codes as most of them are precoded, making design decisions flexible and easier. Elements such as navigation bars, dropdowns, and responsive containers are readily available for use, and they can easily be customized!

JQuery, on the other hand, is a collection of Javascript elements. It offers precoded scripts that you can add directly to your web page. Like Bootsrap, it makes coding easier, faster, and accurate. It is also compatible with most browsers so you're rest assured that your behaviors will work smoothly.

I used JQuery on my website specifically the parallax effect I made for one of the photos. With less than 10 lines of code, I was able to add a sophisticated effect on my web page -- that's how easy and simple it is to use.

---

How I came up with Hinuha Creative

Hinuha is a Filipino word for 'inference' or 'logical reasoning'. I chose this name for the website as it reflects the way I carry out my design process. I go by the principle that each design element, big or small, contribute to the overall appeal of an artwork, a website in this case.

Having the basic knowledge of web design and development, I created the Hinuha website from 0, starting with a wireframe (see image above), and then designing (and hand drawing) each element for each section, then putting them in a cohesively laid out web page using development tools -- all while taking into consideration the design principles to make the website successful.

On top of my list is simplicity and accessibility. I opted for a simple, clean design with a consistent colour palette. Readability is also an important aspect of my design. As most of my page contain paragraphs, I used a simple and consistent typeface. Overall, aesthetic wise, I think that the entire design is fresh to the eyes and visually attractive.

Using the basic code languages and JQuery, I was able to execute to the actual website what I envisioned on my wireframe, but with minor challenges particularly in adding meta tags to make it SEO optimized, and making it responsive. I have attempted to make my website SEO optimized but for some reason, Google's indexing algorithm did not allow it to happen. Also, I have struggled making the pages responsive to different screen sizes.

If I would have the luxury of time, I would start creating and optimizing the website for mobile first, and then work my way up to the desktop version. About 80% of users access website on mobile devices, and so I feel that building the website mobile version first makes a lot of sense to make it more accessible. Also, instead of using HTML, CSS, and Javascript alone, I would incorporate Bootstrap as it has a lot of features for responsiveness and mobile optimization. As users shift more and more on mobile devices for web accessibility, I believe that mobile optimization has become the industry's gold standard to date. Other standards revolve around design, accessibility, and consistency in coding.

The web industry's standards on design and accessibility has evolved tremendously over the years but a few basic ones are retained. These include, but not limited to:

1. Logo on the top left

2. Navigation across top

3. Value proposition and marketing high up on page

4. 4:5.1 Color Contrast

Assessing my website, I have met all these standards. For colour contrast, I used the tool Lea Verou's Contrast-Ratio tool which rendered a score of 4.56 (Passed).

Coding wise, I used the W3C Validator to check any errors on coding. It returned less than 40 errors, which were then amended to ensure adherence to coding standards.

---

Web's future technology

There are a number of new development in web design available right now for coders and they are all geared towards making coding easier. One of these is Angular, which was developed by Google. It is basically a library of Javascript codes. Employing this for my website would surely be a big help as it doesn't require much coding like HTML and CSS. It will also make my website more interesting by adding animations and more interactive elements.

---

Where do I go from here?

After 10 weeks of learning how to design and code, I feel that I have gained enough knowledge and skills on the technical aspect of designing and creating websites. Creating a fully working website is already an achievement by itself, but I know I could do more as I continue with the course. Reflecting on what went by for the past 10 weeks, I can definitely say that I am competent and able enough to create digital content. I am looking forward to what's ahead for the next term.

I feel that I need to hone my coding skills more, especially on integration of new web development technologies. I need to gain more knowledge on SEO, responsive design and designing for mobile. Practicing more on coding and reading more about these concepts will be a big help.

---

REFERENCES:

Anon. Kerixa Inc. Different versions of HTML. California. 20 December 2019. http://www.codefreetutorial.com/learn-html/76-different-versions-of-html

Anon. Bit Degree Learn. HTML5 sematic tags: what is semantic markup? Updated 1 October 2019. Visited 20 December 2019. https://www.bitdegree.org/learn/html5-semantic-tags

Ceym Eygi. Free Code Camp. 7 important tips fro writing better CSS. Posted 29 Septemeber 2019. Visited 20 Decemeber 2019. https://www.freecodecamp.org/news/7-important-tips-for-writing-better-css/

Anon. MDN Web Docs. Handling common javascript problems. Posted 24 November 2019. Visited 20 December 2019. https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript

Anon. W3 Schools. Angular JS Animations. Visited 20 December 2019. https://www.w3schools.com/angular/angular_animations.asp

HINUHA CREATIVE REFERENCES:

Parallax Effect: https://www.youtube.com/watch?v=d34GsFz-HkY

Navigation Bar on Scroll: https://www.w3schools.com/howto/howto_js_navbar_slide.asp