Assignment 2: Me, Myself and I Deployment

To deploy my website I had to go through many steps.

Step 1: Create an account
First, I had to create a GitHub account by signing up to www.gibhub.com. To sign up I used my Knumber to create my account.


Step 2: GitHib Repository
The next step was to create a Github Repository. These files are used to store my website online. Once I ensured I was logged in I created a repository called WebDevelopment. Once I created my repository I opened Terminal. Terminal is an interfaced used to connect with the underlying operating system via a shell. To get set up I entered the following command lines:

• PWD
• This produces the directory that the system is currently at.
• LS
• Lists the directory
• CD
• Allows users to change where the directory is located
• Git Status
• Displays the Github application
• Git clone https://github.com/K00174394/WebDevelopment.git
• Links the repository to the Github
• Git checkout --orphan gh-pages
• Creates a new orphan branch
• git add --all
• Adds all the files that are available on the repository file to github
• git commit -m "Adding Pages"
• Commits all changes made to the files and uploads them to github
• Git push --origin gh-pages
• Pushes all the changes 

This allowed me to upload my website online. When uploading my websites and viewing it online I noticed some items do not work correctly including my Google Maps. My next step is to modify these pages and ensure they work correctly.

Link: https://k00174394.github.io/WebDevelopment/

Assignment 2: Me, Myself and I Development

Assignment 2- Development

Introduction 

The main objective of this assignment is to develop a website on a thing that interests you. Stated in the last blog I decided to develop my website about makeup. Before developing the website I designed various prototypes using Balsamiq. The advantage of developing prototypes is to achieve a fully functional website.

As part of the assignment, I must make sure that all images are copyright free. Because of this, I decided to take my own images and also use copyright free images from Stockphotos and FreeStockPhotos. 

Images I captured myself include: 

Powder Image

           Images I got from various copyright free images include:

Copyright Free Image: Source Free Stock Photos

Once I captured my images and ensured that they were suitable for my website I began creating my template. Using my prototypes on Balsamiq I began coding my website using Brackets. I decided to use a basic html style which include's a navigation bar on each page to allow user navigate throughout the pages and also be able to return to the home page. The navigation bar will stay consistent on each page. If the website is inconsistent it slows the visitor down causing them to lose interest and they will leave the website. Links included on my navigation bar include: 

• Home

• About

• Brands

• Makeup

• Face Care

• Eye Pallets

• Low Cost Makeup

• Animal Cruelty

• Brushes and Tools

• Gallery

• Useful Links

• Contact

I coded my navigation bar using hyperlinks, paragraphs and various divs including navigation div and dropdown div. The CSS for the navigation bar formats the navigation horizontal on the website and added padding to the navigation bar. The dropdown div positions the dropdown list from the navigation bar and provides a box shadow around the dropdown list. 

Navigation bar 

Navigation bar with drop down list and box shadow 

CSS For navigation bar

My website also contains many other consistent elements. One of the main consistent elements of my website is a search bar. This search bar redirects users to Google searches.

Developed Search Bar

Like the navigation bar, the search part was developed using div's and a form. The form is used to create an input field for the user to search for information. This information is then directed to Google using the action within the form. 

HTML for Search bar

Secondly, each page contains a footer section which provides users with information about who created the website and also provides them with a link that redirects them to the websites sitemap.

Footer that contains information about developer of the website and link that redirects user to the websites sitemap

Once I decided on my consistent elements on my website I designed a logo for my website. I designed the logo using both Adobe Illustrator and Adobe Photoshop. I downloaded the chosen font from dafont.com. After development of the logo my next task was placement of the logo. I decided to centre the logo on the page because it will be more convenient for both desktop and mobile users 

Centred logo for website

The background image used is a powdered purple eyeshadow. I thought this image was most suitable for the website and also worked well with the colour scheme. I added the background to my css page using a url. The image used is copyright free and is sourced from stockphoto.com

Websites background image

Overall Layout design

Implement&Content Design 

Once I created my basic template for each webpage on my website, I began to add content to my pages. As my website is an informative website I include a lot of text and images. I began with designing my index page. My index page is my main page of the website that the user will land on when they visit the website. When designing this page, I decided to keep it simple and welcome the user to the website. I did this with various images and edited them to be more suitable for the website. The images are modified to look like a polaroid image. On each image I included words to welcome the user to the website. All images used on the welcome page are copyright free and are sourced from FreeStockPhotos.

Index.html (Welcome Page)

The next page I created was the about page. The about page contains information, images and tables about the website's content, makeup, the history of makeup and the benefits of using makeup. Information on this page was researched from various websites and these websites have been sourced on the web page.

About.html (Contains images, text and tables of information)

When designing my website it was compulsory to include a table. I decided a table would be beneficial for the brands webpage. I divided the brands table into four unique sections. These sections include:

• Natural and Green Brand
• High End Brands
• Drug Store Brands
• Independent Brands

Once I created the table and filled in the information I decided to style the table. First, I included a table caption to the webpage using the <caption> tag. I then added a  background colour for the table header using my colour palette chosen. Next, I decided to add colour to the over table and every even cell in the table was colour. I did this using various css rules. 

about.html (Including compulsory table)

When designing the makeup.html I included a page with image links that redirect users to the pages also included in the makeup dropdown list. This provides users with two directions to navigate to these webpages

makeup.html

or

Secondary Navigation bar when hover over Makeup

When a user clicks brushes and tools they are met with 2 image hyperlinks. These image hyperlinks separate the brushes from the tools. The brushes.html page is displayed with a slider. A user can click left and right the images on the page changes and provides the users with a detailed description of the product.

Brushesandtools.html

brushes.html slider that provides information about each brush

tools.html provides information about the main tools of makeup

I decided I would include a page about animal cruelty. Animal cruelty is an important aspect of makeup as some laws allow countries to test products on animals. All products on my website are cruelty free and I provided information on my website to make more users aware. All information on this page that I have researched is also cited and hyperlinks are included on the webpage.

animalcruelty.html

My low cost makeup web page include images and information about low end makeup brands that are as good as high end brands. I included this page for users to be aware of these products, their price and where they can purchase them. 

lowcostmakeup.html

When developing the face care page I decided to include an embedded font-family. The font that I have chosen to include is called Impris and I got this font from dafont.com. To include this font I had to construct various css rules. I first had to initialise the font and provide it with a name. I then had to download the font, create a folder for it and call it's path in the css rule. Once I did this, I created a div around the paragraph of text that I had chosen to include the font family on. In the div css I simply just called the font-family. I included it in the first step on the face care page as this is the most important step in the routine.

facecare.html including font-face

font-face code

Finally, the last page include in the secondary navigation bar is Eye Shadow Pallets. When developing this page I decided to use an image slider. This image slider allows users to click an image. When the image is clicked the image will enlarge and provide the users with information about the product. The user also has access to a left and right navigation bar on the images which allows the user to swipe left and right throughout the eyeshadow pallets. 

Resource: W3Schools.com

eyes.html

enlarged image and information about the pallets

When designing my gallery page I decided to keep consistency of how all my images look throughout the website with a polaroid image effect. All images in the gallery are my own images of various makeup looks that I have created myself or a makeup artist has created for me

Makeup.html including various image in polaroid image effects

I included a useful links page to my website for users to gather even more information that it not available on website. I included:

• Blog links

• Youtube tutorial links

• Link to a local makeup group

• Cruelty free products.

I coded this page using images and hyperlinks. 

HTML for useful links

I styled this page similar to my gallery and my makeup page. I decided to do this to provide consistency throughout the website. Consistency is extremely important in website design as it provides the users with familiarity

Usefullinks.html redirects users to various blogs, youtube channels and makeup websites

For my contact page I provided the users with a form so they can leave comments on how to improve the website or any queries they may have about makeup or the website. When designing the form I included validation for each field. If the user does not fill in the field or does not fill in the field correctly they will be prompted with a dialog box that will specify to the user what is wrong. Once the form is filled in correctly the user clicks submit and the information on the form is sent to my email address.  On this webpage I also included a map. This map specifies to the user the location of where the website was created/based. I did this using a Google API. To specify the location I had to collect the co-ordinates for my location and then receive a key from Google.

Content available on the contact us page

Form validation to specify to the user that information must be filled out before the form is submitted

Form validation to specify to the user that information must be filled out before the form is submitted

The final page I created was the sitemap. A sitemap is a list of pages of a web site accessible to the users. I created the sitemap using data lists and hyperlinks. When creating my sitemap I ensured to include the hierarchy of the website. This makes it easier for users to locate pages they may be searching for.

Sitemap.html

Overall, developing this website was extremely interesting. It was interesting to learn a lot about makeup and it's history when doing research for pages. It was also interesting to learn how to create sliders for the brushes page. I really enjoyed my experience making this website and feel like I have met all my targets I set out when developing this website