During the group project of the module, I was assigned to the marketing team to present our final product to the audience in an interesting way. While brainstorming we thought it would be a great idea to have a website that people could visit and view or progress on. I wanted to take on this task because in year one for our portfolio site we had the option to create a site from scratch yourself or use a template with WordPress. At the time I chose the latter because creating a website from scratch got me intimidated. Now I have developed a different thought process where I take on a challenge instead of backing down and sticking to the comfort zone. This creation process has made me aware of my technical capabilities and definitely boosted my confidence when entering unknown territory.
I had to do some research on how to make a website from scratch, and asked my fellow peers for help. They recommended me to work in Jetbrains Webstorm IDE, which is a development environment that will allow me to work in HTML and CSS with ease thanks to intelligent code completion and the IDE running dozens of inspections as you type detecting potential errors pretty much instantly. I think that a lot of time has been saved thanks to its advanced features.
Together with the marketing team we already defined a color palette that would be used for the project. In addition I designed the logos and wave pattern that can be seen on the web page
In order to have the website work on all kinds of devices it had to be responsive. Bootstrap is a popular HTML, CSS and JS library that allows you to divide your site up into sections with rows and columns. When the window size is adjusted, bootstrap will adjust the contents respectively keeping everything inside its boxes nicely ordered(and scaled if you added the correct class and CSS to it).
During the creation process I noticed that if you would look for creating a website, a vast amount of the search results will be paid services that offer templates and hosting plans. There is quite a lack of video tutorials out there but luckily there were alternatives to obtaining knowledge. There are a lot of questions of those who came before about HTML and CSS using Bootstrap with various possible solutions given on websites like Stack Overflow. Also w3schools.com and the official bootstrap site itself offered very detailed information regarding the coding of the web page. Something that was challenging at times was formulating my search query correctly. I was not familiar with the terminology in the beginning but as time went by I quickly adapted to the jargon and managed to search for answers more effectively.
The total creation process took 3-4 days, working from early morning till afternoon. Creating a website is a process of trial and error. You add a new piece of code, save the file and refresh the browser to see if the code gave the result you were hoping to achieve. One source that was the most helpful was a man going through the process of creating a simple web page with bootstrap 4. This gave me great insight in syntax, semantics, the various elements and the overall structure that the code should be in.
The only thing that I didn’t manage was getting the website online. I don’t have the hardware to run a server on and hosting plans were not something I wanted to purchase. Creating your own server for hosting does seem like a fun project to follow up on in the future. You are still able to view the website by downloading the .zip from the link and then opening the “index.html” file in google chrome.
***Note that the contact information on the website is fake and should not be used for contacting me.***
See me going through the website here:
Download the .zip here