HTML Workshop

In todays workshop we moved away from Programming and Processing and moved onto HTML & CSS. In order to create this HTML webpage we used the program ‘Brackets‘. First of all we went to getbootstrap.com/css which allows you to download a basic template for your webpage. This saves time and means that you can be as productive as possible – streamlining your workflow. Once everyone had downloaded this, we began to insert various lines of code.

Screen Shot 2014-11-09 at 18.39.20

Brackets is a great program to use as when you begin to type in the code you want, it comes up with a drop down list for you to choose from – this ensure that you are typing everything quickly and, again, saves time. The download folder from Bootstrap is saved in your documents and you can insert images/processing files into this folder and then onto your website. I inserted a previous processing file that was on my computer already. The code looks very complicated but I am starting to understand (as with Processing) what each line of code means. This is the outcome of just the Processing file inserted.

Screen Shot 2014-10-22 at 12.13.00

We then wanted to add in some text, columns and an image. The good thing about this was that as we make the window smaller, the columns transform into rows so that it all fits on the page. Below is the code used and my final outcome. As this was our first workshop, there are obviously things I still need to master but I am looking forward to creating more HTML documents like this and extending my knowledge and skills further.

Screen Shot 2014-10-22 at 12.13.20  Screen Shot 2014-10-22 at 12.44.56

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s