This task aimed to gain a simple understanding of how to use HTML and CSS.

Previous to this task, I was fortunate enough to have some background knowledge due to having work experience as a Product Designer. Close relations also work within an industry that requires the skill to code; therefore, I learned the ins and outs of Web Servers, Control Panels, HTML, CSS and Scripts.

Creating HTML pages

Whilst I had the background knowledge of the subjects we were exploring, I had never physically put my learning into practice until this task. Although I had seen plenty of coding before, it became relatively overwhelming when trying to understand and do it myself. Luckily the task was pretty simple, and I had two other people to help me along the way.

Caroline and Rana joined me in exploring CPanel, FileZilla, File Manager and essential file naming. Together we created an about me page which would help showcase our skills. Because Rana has previously studied Computer Science, she was appointed the leader role.

With the help of W3schools, I created a simple index page. I used the HTML introduction code, which set me off to a good start.

Figure 2 is the view I had once I chose to try the HTML introduction for myself. From here, I tried to gather some understanding of what was appearing on my screen with the help of Rana.

Still struggling to understand, I searched the basics of HTML. I stumbled across a post on MDN Web Docs which summed up the basics; they provide many images within their explanations which helped me massively. Figure 3 showcases some of the Information I used to help me with this task.

I progressed a little further with the knowledge I had just obtained. Figure 4 displays this progress. I changed the heading to contain my name and coloured the background, Violet. I did something similar to the following line on the page; I switched to text to say “Graphic Design” with the background coloured pink.

If I were to go back and change anything about this design, I would have used a subheading beneath the heading instead of leaving it as body text. However, at this point in the task, I explored a few elements for my first attempt.

For the final step of the task, we each added links to our other member’s sites. I recall that this happened towards the end of the lesson when Rana had to leave due to medical reasons. This is more than likely why her link didn’t appear on my site and instead was replaced by Amber’s link as she was seated next to me during the final stages of the task.

What we had achieved as a group overall

The benefit of this task is that whilst we worked as a group, we could work as individuals. It worked great in this circumstance as we could help one another, but we also had to create our work, allowing us to understand the software personally.

We all helped each other if we found ourselves coming to a halt during the individual part of the task. Having a member of the group with an academic history in computer science allowed the task to run seamlessly.

I wish we could have spent more time with Rana in the final steps of the task, as she was a great asset to the team, and there became a point where her knowledge would have been helpful.

Further exploration into HTML & CSS

Beyond the task completed in class, I decided to explore HTML and CSS further from home. I had help from a distance from 2 software developers, 1 of which specialises as a front-end developer, which proved helpful.

I wanted to expand my skills by exploring CSS further and CSS frameworks such as Bootstrap, which is compiled up of commonly used actions/assets. I used an IDE (Integrated Development Environment), which allowed me to edit my CSS and HTML files. I used an extension that allowed me to use FTP (File Transfer Protocol) directly upon saving, thus making it quicker and easier to edit and upload my files to the server.

All of the following figures contain original work that was created by myself. They have images of my progress, displaying the site and the code beside it. The index page I created was more used to show my progress than to make it look attractive.

---

References

• Mdn Web Docs. 2022. HTML: HyperText Markup Language. [ONLINE] Available at: https://developer.mozilla.org/en-US/docs/Web/HTML. [Accessed 26 October 2022].