HTML & CSS

_DSC9009-crop-resize_480

An Introduction

Previous to this unit, I had no experience with Hyper Text Markup Language (HTML) or Cascading Style Sheets (CSS). However, I attended a number of intense HTML and CSS workshops. From this, I learnt that HTML is the standard mark-up language for all web pages, elements are represented by <> tags. Whereas, CSS styles the page, describing how HTML elements will appear. During the first workshop, we began analysing the code to build up an understanding of HTML and CSS Markup. I took notes which were helpful to refer back to throughout the process.

_DSC9009-crop-resize_480
HTML wireframe - Design Bridge Website
_DSC9009-crop-resize_480
HTML wireframe - plan for my website

Workshop - CSS grids

_DSC9009-crop-resize_480 _DSC9009-crop-resize_480 _DSC9009-crop-resize_480

During one of Mark’s workshops, we were introduced to CSS grids, using examples from gridbyexample.com. I then played around with different layouts and colours which helped build on my understanding of CSS.

We were also taught how to use the inspector tool on Firefox Developer Edition; this has been an essential tool whilst building my website as it allows me to examine and modify pages of HTML and CSS.

User Testing

During the final week of this project, I attended a user testing workshop where we looked at each other’s websites, testing to see if they were easy to navigate. After receiving mixed feedback from my peers, I made changes to my website.

Improvements included making the navigation bar align to the main heading on the page, as well as removing a link that takes you to the home page when you click on the rollover images, which I previously hadn’t noticed.

_DSC9476-32-crop