Skip to content →

IXD101 – HTML and CSS


HTML is HyperText Markup Language that makes up the structure of the web. Tim Berners-Lee created the world wide web while working at CERN as a way to easily share and access information between coworkers using Hyperlinks. Today web developers use HTML to create a webpage and set the structure of the content within such as these hyperlinks, text, images, headings and paragraphs.


CCS is Cascading Syle Sheets that was developed to design the layout elements that HTML would set. This can be used to add colour, transitions, backgrounds and even interactive elements to your website. Styles can be specified using CSS making your website more visually impressive or interesting and this can be done through sizing, adding padding and hover effects. From CSS was developed in the later 90’s, it has impacted the world of interaction design massively and continues to evolve alongside technology and interfaces.

First project

In preparation for our my final project using both HTML and CSS we began by creating the first website out of the three we would eventually design. For this I used Visual Code to write and edit my code and as able to see a previous of this unreleased website using Google Chrome. Using the Baskerville text that we edited while learning about typography for screen, we would be expanding on this as the content for our website.

I started with my HTML document first, establishing sections, headings, blockquotes and paragraphs with <p></p> <h1></h1> and <h2></h2>. Once I put the information in the correct sections I then began to give these sections classes, hyperlinks and id phrases so that I could implement a navigation bar at the top of the webpage. This interactive element would allow the user to click on a heading in the nav bar and jump to that section of information. I also added <blockquote> to the paragraphs to separate this information from the other.

From here I began adding the decorative element to my website using CSS. From here I changed colour of titles, the blockquote, navbar and background colours of sections as well as giving the font its typeface which, of course, would be Baskerville. I also added padding between sections as well as around the edges of context utilising the new knowledge of  CSS grid and layout. Additionally I gave <h1> <h2> and <p> each of there own set of sizing qualities. An interactive element that CSS added was that when hovering over the titles in the navigation bar the font would change colour and this was done to use responsive feedback that when the user hovered over the word they would know that it would respond and may be able to do something when clicked on.




Published in Uncategorized


Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to toolbar