Instagram

As part of our last task of the assignment, apart of the creation of an actual website, we had to choose a section from Instagram and code it to make our own Instagram version of that particular section. In my case I chose the Sign Up section of Instagram, and below you can find parts of the code in both HTML and CSS, and the final result.

Part of the HTML Code

Part of the CSS Code

Original Sign up Page

My Version Sign up Page

N.B- This is my final result; can't submit the material, as the file was deleted/corrupted. (This was discussed in class.)

More Coding......

Since we did the HTML and CSS code introduction, we continued to learn new code in both HTML and CSS, and with it we were able to start creating new things for a website. We created a Blog, and a Contact Form which had a drop-down menu selection, and a file selection with the Choose File feature.

Blog Page

Contact Form

Task 2: Specifications and Design - (Style Guide)

4. Style Guide

• 3. An information section containing general information on the entities, events and collaborative efforts between Valletta and Leeuwarden. 

•  4. A submission for with which an individual cans submit proposals for new projects.

•  5. A messaging platform with which users can correspond with each other.

Task 2: Specifications and Design - (Functional and non-functional elements)

3. Functional and non-functional elements

Here you can find all the functional and non-functional elements for every section chosen:

• 3. An information section containing general information on the entities, events and collaborative efforts between Valletta and Leeuwarden.

Apart from the Menu Bar Buttons and the Scroll Bar there are no functionality elements in these pages.

•  4. A submission for with which an individual cans submit proposals for new projects.

For the Submission Form the functionality elements are: Menu bar (which is functional from every page/section), in the empty boxes the user needs to type in the information, attach file is a button which enable the user to attach any files he wishes.
On the other side the Review Proposal page's functionality element is that each proposal can be clicked to be opened for more information.

•  5. A messaging platform with which users can correspond with each other.

For the Inbox the functionality elements are: User log in (Name, Surname and picture) can be clicked so the user's profile will be opened, and the messages can be clicked to be opened.
For the Message Thread the functionality elements are:  in the empty boxes the user needs to type in the information,  attach file is a button which enable the user to attach any files he wishes to, other buttons so the user can be able to change the font type and add any emoji, and the send button that enables the user to send the email.

Task 2: Specifications and Design - (Wireframe Layouts)

2. Wireframe Layouts - Thumbnail Sketches

Here you can find thumbnail sketches for every section chosen:

• 3. An information section containing general information on the entities, events and collaborative efforts between Valletta and Leeuwarden.

•  4. A submission for with which an individual cans submit proposals for new projects.

•  5. A messaging platform with which users can correspond with each other.

Task 2: Specifications and Design - (Sitemap)

1. Sitemap

In this post you can see a sitemap of the website which includes the three chosen sections which are:

• 3.  An information section containing general information on the entities, events and collaborative efforts between Valletta and Leeuwarden.
• 4. A submission for with which an individual cans submit proposals for new projects.
• 5. A messaging platform with which users can correspond with each other.

Website Sitemap

Coding Introduction

This exercise consisted in the introduction of both HTML and CSS code.

First we started with some basic HTML code:

Above there is a screen shot of the first code we did. Over here we were introduced how to do a title (what is going to be written on the tab of the browser), the header of the website, how to put an image with alternative text to it, how to write normal content and finally how to do a hyper-link.

After that we were asked to do a similar exercise but more personalized, and to do the hyper-link within the image.

The day after we were introduced to the CSS code:

After we did a new HTML code/page we started to arrange that content by CSS. In this stage we were taught how to change the font type and size, how to align the text, how to change a background colour, how to do a border, how to arrange the position of a specific part of content with the margin, padding and overflow and finally how to section different parts by given them an ID name.