Bootstrap

From last weeks seminar Kyle introduced the class to the popular front-end HTML, CSS and Javascript framework known as Bootstrap. This mobile-first framework described by Kyle is mostly used by developers because the code included with the framework is designed with different screen dimensions in mind. For example, most traditional web browsers these days run on multiple devices such as desktops, laptops, smartphones and tablets. This means that the screen size will vary with the devices and so will the aspect ratio. Because of this alteration, websites these days need to be responsive to the adjustment of size and shape. It is also important because the user needs the ability to browse a website with ease and responsiveness; if the user is on a website on their phone and they need to ‘pinch to zoom’ then the website design is poor.

To begin, Kyle explained the structure of the bootstrap framework including the folders when the file is downloaded from their website.

Kyle went onto explain CSS and how this Cascading Style Sheet structures the way the HTML file looks and responds to the browsers size and shape; he explained that CSS can be linked within the HTML file or can be written inside the <style> element within the <body> of the document.

The CSS part of a website determines the websites font types, position of elements such as images, fonts, borders and so forth. CSS can also include in realtime animation which is generated by the browser.

In our two hour seminar Kyle gave us the task to create a responsive web page where when the browser was resized to a tablet-like screen the image on the web page would scale down to fit the width of the browser.

He also gave us a tutorial on how to insert our Processing projects into a HTML file using a bit of Javascript.

Overall, I found this seminar very interesting as we now live in an age where there are many different devices that can now access the web. It is very important as a web developer to design website with mobile friendly elements.

There is more to come..

Advertisements