Development Semester One

Responsive Page with CSS

Using the HTML skills we learnt previously and Steve introduced us to basic CSS to make the webpage responsive. We used containers and classes to link the css.

Responsive Page Outcome

The outcome this had was a responsive page, no matter what size the browser page was the containers responded correctly. Doing this meant the page could be used on desktops, tablets and mobiles.

CSS and Containers

To build on the task before we used the CSS to create a really basic website structure. A small coloumn to the left and a bigger right coloumn. We also introduced background colour and text colour along with text size and padding.

CSS and Containers Outcome

This created a "menu" to the left, with links and a heading. Then the main chunk of text in the right container. The only thing missing that was in the brief was a resized image.

Basic Java Script

This was an introduction to Java script. Very basic to begin with, just a pop up message for when the page opened.

Basic Java Script Outcome

This was a good start, not quite website standard, but it worked. Once OK was pressed the page said "this is my first java script page"

Java Script Prompt Box

Using java script to create a promt box that would appear when the page was opened asking a value to be entered, in this case a name.

Prompt Box Outcome

It took the entered value and used this in the webpage when the box was closed. If the user clicks cancel the box returns null.

Introduction to Bootstrap

Further on in the semster we were introduced to bootstrap, a HTML, CSS and Java script framework. We used this to create asthetically pleasing buttons and play around with image properties.

Bootstrap Outcome

The buttons have colours that symbolise information and warning etc. They also change as you hover over them. Still using containers to create colomns on the page. The image was easily resized and has rounded edges.

Dropdown Portfolio

With the help of Steve, I started a first attempt at a portfolio, with a dropdown menu. Using a lot of CSS to get the drop down options with a menu and a submenu as well. Editing the transitions and margins, positioning it all correctly.

Dropdown Portfolio Outcome

The Dropdown works perfectly and I could use this in my portfolio. I tried to add a background image to make it more exciting. I played around a bit to get the image to scale to fit the page but with no luck, I left it to tile.