k1747449-blog

[k1747449-blog]

[k1747449-blog]

Evaluation:

Making a website with HTML and CSS for the first time was very challenging especially the deeper you get into it the more complicated it gets. One of my main issues was trying to change something specific and not affect the entire layout of the webpage. I kept my theme very simple, I began with using dark background and dark font but as I was working on it, I realised that It didn’t look so attractive and eye pleasing and I changed the background to white and also change up the logo and make it a banner instead. I found the white background way better and more attractive and comfier for the eyes. I also done some research and found out that light plays a very important role in deciding how long visitors want to stay on your website and it’s the most harmless colour. I also found that my images and text stand out way more on a white background, because it is easier to modify and allows me to include more and mean more.  

Once I began to get the hang of coding and understand the language more, the rest was mainly experimenting and finding out what you can include and how to include it by okaying around with tags and the words and realising that there’s a result. For example, changing the font style or adding a block-quote. I designed the logo and the family tree on photoshop and the images in the gallery I took them, to avoid copyright problems. I managed to get most of what I wanted to do done however next time I would consider giving more time for research and to understand what I’m doing before starting to save my self-more time and avoid having to start again, I also wanted to add a video however due to timing I wasn’t able to.

[k1747449-blog]

Week 9: Join us page

Today I started working on my final page, join us. This page is for the users to give a quick review and sign up with their details. I used the <form> element to use the action attribute to indicate the pages that the data is being sent to. Each of the form controls sits inside the <form> element. Different types of form control are suited to collecting different types of data. The <fieldset> element is used to group related questions together. The <label> element indicates the purpose of each form control. I also used CSS for it to control the appearance of the form elements. This is both to make them more attractive and to make them consistent across different browsers. I styled the text inputs, texts areas, submit button and labels on forms to get the form controls to align nicely.

[k1747449-blog]

Week 8: Logo

I started sketching some ideas for a logo and played around some images on photoshop. I then started cropping images out and made some shapes and added them together to make the word Ahlulbayt with a dome on top, also adding Kingston society underneath, referring to a mosque. I used the paint bucket tool to colour in the dome blue and also added the text and colour coordinated the colours together to go with the theme and also the university’s colour.

[k1747449-blog]

Week 7: Building the website

After trying out Text Wrangler for a while, I felt like it wasn’t convenient for me, so I decided to give Dreamweaver a go. I started off by watching tutorials from Lynda and going over past lecture slides to recap what Maria taught us about Dreamweaver. I chose to start up by using a template called simple theme. I added some text and headings and tried to play around the homepage. Changed the colours around layout. i started adding more webpages, adding only texts to the pages. However, I realised that using a template was just very complicated and it the software just kept crashing and moving slow and everything wasn’t working properly. So, I went and got the HTML & CSS design and build websites book and went through it all and decided to start again from scratch only this time it was actually working out properly and much better than previously.

My aim is to try keep the website nice and simple but effective and informative. I left the top part of the page for my logo which I will work on shortly on photoshop and started to work on the structure and sketched out how I’d want the webpage to appear like.

I created a separate CSS page for the logo section and background colour to use for all the webpages and then created a separate CSS page for each webpage.

The navigation bar is created using an unordered list. There are borders set to the top and bottom of the list to make it stand out, the display property has been applied to each of the items in the list, so they behave like inline rather than block-level elements. This enables the navigation links to sit next to each other horizontally. The padding property has been used to create space between each of the links.

The width property for the <ul> element is set to 570 pixels and the width property for the <p> elements beneath them is set to 600 pixels. They actually end up the same width as each other because the <ul> element also uses padding to create a gap between the border if the box it creates and the links inside it and any padding, borders or margins are added to the width and height of the box.

For the gallery webpage I added a background image to the whole page by repeating an image with the texture behind the <body> element. A repeating background image is sometimes referred to as wallpaper. The content I added to the page is inside a <figure> element and I was thinking to add captions to the images so until I made up my mind, I added a caption to each image using the <figcaption> element. I used CSS to set up the dimensions and background colour for each <figure> element also the image itself, adding a single pixel grey border to them.

Each of the <figure> element is contained within a <div>, which has two purposes, to create the four- column layout by specifying a width and margins for the element and then floating it to the left and also to add a subtle shadow underneath each image to create a three dimensional appearance making it look like a piece of card. to ensure that this sits underneath the image, the background-position property is used.

https://www.youtube.com/watch?v=T5AMAf6ERe4

https://www.bringyourownlaptop.com/courses/dreamweaver-cc-tutorial/dreamweaver-16-how-to-make-css

[k1747449-blog]

Week 6: New website idea

I decided to change my idea along the way, I’m part of a Ahlulbayt Islamic society in university and we’ve been a lot recently for the society, spreading awareness of islamophobia, hungry for justice, roses for peace and so I had an idea to make a website for the society.

The sites purpose is to create a platform for Kingston students and ABSOC members. The platform will include access to an about us page, information on the society, what we do, gallery of images of previous events and how to join us page with a sign-up link, to introduce what ABSOC is and what we do and how they can participate with the society. The website will not only act as a platform for people to better themselves religiously but also provides a group of friends that many in the ABSOC have grown to cherish.

The target audience will be Kingston members and students who are interested in learning more about the Prophets family. Everyone is welcomed, and anyone with the intention of promoting harmony understanding and mutual respect in today’s diverse society. Whether its intellectual or stimulation or student welfare you’re looking for we are happy to help.

I will make a promotional video and have the president of the society talk briefly about what we do and how everyone can join us. I will use my phone and my Canon DSLR to get footages and images. I will use adobe premiere to edit.

There will social media accounts, Facebook, snapchat, Instagram and a Gmail account. I will use Photoshop to edit the social icons.

References:

https://www.timeshighereducation.com/student/advice/student-blog-everything-you-need-know-about-student-societies-university

https://dianev.com/web-design-help/web_design_basics/target_audience.html

[k1747449-blog]

Week 5: Care4Calais

I didn’t attend the masterclass today because I volunteered with stand up to racism and care4Calais, to go to Calais for the day and help out the refugees with the organisation. I went to take some images and footages for the website and also because I’m part of the stand up to racism society.

[k1747449-blog]

Week 4: Pitch Proposal

SaveRefugees, aim is to get citizens to realise there needs to be a change quickly, the website would help respond to disasters also help rebuild people’s lives as-well as try to save them too. The main idea for the website is to help refugees, to address the needs of those who are less fortunate and who may have difficulties finding food and shelter. Also, there will be a disaster relief aid, when an emergency strikes to provide emergency support for those affected immediately.  

Target audience for the website is not targeted towards a specific group of people but for people who would like to gain knowledge and stay up to date with the crisis happening around the world can gain from this website. There are also many ways that you can get involved if you want to take part in helping a persons life whether it’s by raising funds, volunteering or campaigning for change.

References:

https://prezi.com/p/e60qajnum3ym/#present

[k1747449-blog]

Week 3: Basic HTML & CSS

During this session we looked further into CSS. We learnt about CSS selectors to build our website. Which we found out that there are three main types of CSS selectors, (Tag, ID, Class)

This handout helped us understand the simple language of CSS, and to start building our own style sheets with the above structures and explanations. I also went back to w3 schools and looked at their tutorials to understand CSS properly and become familiar with it. However I didn’t use Dreamweaver for the above exercises, I used TextWrangler, as I found it easier at the beginning to help me experiment first with html and css.

References:

https://www.w3.org/Style/Examples/011/firstcss

https://www.w3schools.com/css/default.asp

[k1747449-blog]

Week 2: Intro to Dreamweaver

Our second workshop was about using Dreamweaver and how we can code on it. Dreamweaver writes the code for us which made our lives easier. We learnt how to use the menus, code and design areas and how to use the program to design with basic Html and CSS. We first had to understand the structure, and most importantly the Html markup language and how the tags work and so on. We then moved on to understanding how CSS works and how we can attach a css style to html page. Maria also showed us how to save our documents and view it on different browsers to see how our work looks like on a site. I also watched some tutorials on Lynda.com to help me understand a couple things I still needed help with. The tutorial explained how to get started with Dreamweaver.

References:

https://www.lynda.com/course-tutorials/Dreamweaver-CC-2017-Essential-Training/540349-2.html?srchtrk=index%3a5%0alinktypeid%3a2%0aq%3aintroduction+to+dreamweaver%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2

[k1747449-blog]

Week 1: Intro to website

Todays first workshop, we were introduced to text editors such as, Dreamweaver, TextWrangler, Text edit and many more. We were also told about w3 schools, to help us familiarise ourselves with basic html and css and to learn how to design with html and css with the tutorials and explanations the website has. We also reviewed some aspects from what we learnt last year and revised the main steps, such as how to use layout and shortcuts. I recapped image optimisation and also how to save images for the web in different formats. Furthermore due to us having to use many images for our blog we went through how to save images for the webs in different formats (GIF,PNG,JPG) and how to resize them.  I set up my research blog today, Maria recommended to use Wordpress or blogger however because I’m familiar with the two platforms I thought Id try tumblr as I haven’t used it before.

References: