Website Setup – HTML and Control Panels

The next project we had in class was a mix between individual and group work. The aim for the session was to get to grips with our website setup and learning about web servers and HTML. Personally, this topic was way out of my comfort zone, so it made me immediately lose confidence in myself. It was obvious we all had similar Myers Briggs individual roles that didn’t favour confidence. We had a quick run through tutorial of control panel basics and dove into the initial task.

The three of us in the group had never had any experience in website building so this was very challenging considering the limited time we were given. However, we all surprised ourselves with a somewhat successful result. The first individual task was to create a HTML page and an index document to begin the webpage. This was the easiest task as we used W3schools to give us a basic code and we slightly edited it to our liking. The only thing we needed to change was what we wanted our individual headings and body copy to be. It was recommended that this index page was a ‘Hello World’ post with a small introduction about us. We used BBEdit as our editor as this is the most suitable when using mac’s.

The next task was to design the page more uniquely by creating a style sheet (CSS). This means we can alter any design element of the page all at once which is very effective and timesaving. The main reasons we used a CSS is to alter the colour, font, and size of text on our initial HTML. At first, we all struggled to understand how to add this as an external style sheet due to the link at the top of the HTML page. The actual style sheet was very easy to create and all we had to change was the asset details we wanted for our pages. We all felt this knocked our confidence with taking a few attempts to successfully complete it, but we ignored it and carried on to the final task which was more group related.

Figure 2 – A small style sheet relating to background colour, heading and body colours. This was created in BBedit too.
Figure 3 – A screenshot taken from the W3Schools website importing a CSS into the HTML. https://www.w3schools.com/html/html_css.asp

The final task was to link the rest of the group’s sites onto our personal ones. Luckily, we were given the link format already so all we had to do was edit it for each other’s pages and find where to put them in on the HTML. This sounded very simple; however, we kept getting the links and code wrong so that when we had placed it in, it wasn’t updating. This took us the longest time to try and recreate, and I still didn’t manage to complete it in the time given. The other 2 in the group finished it successfully and we all couldn’t figure out what I was doing wrong. I ended up having a break and restarting when I got home instead which worked in the end.

Figure 4 – Finally, an example link of what we used to add each other’s sites to our pages using BBedit and HTML code.
Figure 5 – An example screenshot from W3School which imports a link into the original HTML code. https://www.w3schools.com/html/html_links.asp

In this instance, group work was extremely beneficial as we could help each other out when we got stuck and share our knowledge to fix any problems that occurred. The team worker Belbin Role shone through with all of us so we could assist any struggling group member. It would’ve been better if we did this, and all had some experience so we could branch out and make our pages more detailed by adding in grids and layouts. Bearing in mind the lack of understanding with this area, I feel it was the most successful project so far as we have learnt new and effective skills for the future. It also helped that we had all worked together in a previous project so there was positive chemistry which impacted the work.